React：JSX

• JSX是一種句法變換---每一個(gè)JSX節(jié)點(diǎn)都對(duì)應(yīng)著一個(gè)JavaScript函數(shù)
• JSX既不提供也不需要運(yùn)行時(shí)庫(kù)
• JSX并沒(méi)有改變或添加JavaScript的語(yǔ)義---它只是簡(jiǎn)單的函數(shù)調(diào)用而已。

• 運(yùn)行使用熟悉的語(yǔ)法來(lái)定義HTML元素樹(shù)。
• JSX執(zhí)行更快，因?yàn)樗诰幾g為JavaScript代碼后進(jìn)行了優(yōu)化。
• 它是類型安全的，在編譯過(guò)程中就能發(fā)現(xiàn)錯(cuò)誤。
• 提供更加語(yǔ)義化且易懂的標(biāo)簽。
• 是原生的JavaScript

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

ReactDOM.render(
  <div>
    <h1>Hello</h1>
    <p>一起學(xué)習(xí)吧</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')
);

//結(jié)果：helloworld

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

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

//結(jié)果：2016-9-4

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

//結(jié)果：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')
)
//渲染結(jié)果：
<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>

• 使用三目運(yùn)算符
• 設(shè)置一個(gè)變量并在屬性中引用
• 將邏輯轉(zhuǎn)化到函數(shù)中
• 使用&&運(yùn)算符

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>   
  )  
}