[深入React] 3.JSX的神秘面纱

<div>
    <List />
</div>

会被编译为:

React.createElement("div",null,
    React.createElement(List, null)
);

React.createElement 方法说明：

• 第一个参数
  • 如果是小写标签（如：div）变成字符串，意义是html标签
  • 如果是大写标签（如：List）变成变量，意义是react组件
• 大括号会被当作js表达式

<div className="box">
    hello {'w' + 'orld'}<i/>
</div>

会被编译为:

React.createElement('div',{
        className:"box"
    },
    'hello ' + 'w' + 'orld',
    React.createElement('i', null)
);

• 第二个参数是属性（props），类型为 object
• 第三个参数开始为子元素，或者子元素数组

来源：http://babeljs.io/repl/