数据渲染

• 组件的this.props与immutable的实现原理类似，不能更改原对象的属性，只能返回一个新的对象。
• render()方法只能返回一个单一的node，如果要返回多个，需要在外部用div或者其他node包裹起来。
• JSX的好处就是能让你在Javascript中使用HTML语法，但它并不是必须的，你仍可以用纯javascript来创建DOM节点。

JSX

渲染组件时，组件名称的首字母需要大写：

ReactDOM.render(<MyComponent />, document.getElementById('app');

因为html中有几个属性关键字和javascript关键字冲突，所以在jsx中需要改写：

1. class 改写为 className
2. for 改写为 htmlFor

属性表达式：

<CommentBox name={window.isLoggedIn ? window.name : ''} />

布尔表达式：

<input type="button" disabled={true} required={false} />

子组件表达式：

<Container>{window.isLoggedIn? <Nav /> : <Login />}</Container>

注释：

<Nav>
    {/* child comment, put {} around */}
    <Person
      /* multi
         line
         comment */
      name={window.isLoggedIn ? window.name : ''} // end of line comment
    />
</Nav>

属性展开：

  var props = {};
  props.foo = x;
  props.bar = y;
  var component = <Component {...props} />;

插入原生HTML：

<div dangerouslySetInnerHTML={{__html: 'First &middot; Second'}} />