React：JSX

• JSX是一种句法变换---每一个JSX节点都对应着一个JavaScript函数
• JSX既不提供也不需要运行时库
• JSX并没有改变或添加JavaScript的语义---它只是简单的函数调用而已。

• 运行使用熟悉的语法来定义HTML元素树。
• JSX执行更快，因为它在编译为JavaScript代码后进行了优化。
• 它是类型安全的，在编译过程中就能发现错误。
• 提供更加语义化且易懂的标签。
• 是原生的JavaScript

ReactDOM.render(
    <h1>Hello,world!</h1>,
    document,getElementById('example')
);

ReactDOM.render(
  <div>
    <h1>Hello</h1>
    <p>一起学习吧</p>
  </div>,
  document.getElementById('example')
);

var Hello=React.createClass({
  render:function(){
    return (
      <div className="item">Hello</div>
    );
  }
});
var World=React.createClass({
  render:function(){
    return (
      <div>world</div>
    );
  }
});
ReactDOM.render(
  <div>
    <Hello/><World/>
  </div>,
  document.getElementById('example')
);

//结果：helloworld

var text='Hello world';
ReactDOM.render(
  <div>{text}</div>,
  document.getElementById('example')
);
//结果：Hello world

function dateToString(d){
  return [
    d.getFullYear(),
    d.getMonth()+1,
    d.getDate()
  ].join('-');
};
ReactDOM.render(
  <div>{dateToString(new Date())}</div>,
  document.getElementById('example')
);

//结果：2016-9-4

var text=['hello','world'];
ReactDOM.render(
  <div>{text}</div>,
  document.getElementById('example')
);

//结果：helloworld

var Divider=React.createClass({
  render:function(){
    return (
      <div className="divider">
        <h2>{this.props.children}</h2>
      </div>
    )
  }
});

ReactDOM.render(
  <Divider>Props</Divider>,
  document.getElementById('example')
)
//渲染结果：
<div class="divider">
  <h2>Props</h2>
</div>

<div id="id" class="className"></div>

var id='id';
var className='className';
<div id={id} className={className}></div>

<div className={this.getClassName()}></div>

• 使用三目运算符
• 设置一个变量并在属性中引用
• 将逻辑转化到函数中
• 使用&&运算符

render:function(){
  return (
    <div className={this.state.isActive?'active':''}></div>
  )
}

getIsActive:function(){
  return this.state.isActive?'active':''
}

render:function(){    
  return ( 
    var isActive=this.getIsActive();  
    <div className={isActive}></div>   
  )  
}

getIsActive:function(){
  return this.state.isActive?'active':''
}

render:function(){    
  return ( 
    <div className={this.getIsActive()}></div>   
  )  
}