jsx

1，jsx简介
React的核心机制之一就是可以在内存中创建虚拟的DOM元素。React利用虚拟DOM来减少对实际DOM的操作从而提升性能。
JSX就是Javascript和XML结合的一种格式。React发明了JSX，利用HTML语法来创建虚拟DOM。当遇到<，JSX就当HTML解析，遇到{就当JavaScript解析。

2，JSX语法介绍
（1）三元表达式
var person = <Person name={window.isLoggedIn ? window.name : ''} />;
上述代码经jsx编译后得到
var person = React.createElement(
Person,
{name: window.isLoggedIn ? window.name : ''}
);
（2）数组递归
var lis = this.todoList.todos.map(function (todo) {
return (
<li>
<input type="checkbox" checked={todo.done}>
<span className={'done-' + todo.done}>{todo.text}</span>
</li>
);
});

var ul = (
<ul className="unstyled">
{lis}
</ul>
);
（3）样式
var myStyle = {
fontSize: 100,
color: '#FF0000'
};
ReactDOM.render(
<h1 style = {myStyle}>菜鸟教程</h1>,
document.getElementById('example')
);
（4）注释
ReactDOM.render(
<div>
<h1>菜鸟教程</h1>
{/注释.../}
</div>,
document.getElementById('example')
);
3，HTML 标签 vs. React 组件
React 可以渲染 HTML 标签 (strings) 或 React 组件 (classes)。

（1）要渲染 HTML 标签，只需在 JSX 里使用小写字母的标签名。
var myDivElement = <div className="foo" />;
ReactDOM.render(myDivElement, document.getElementById('example'));
（2）要渲染 React 组件，只需创建一个大写字母开头的本地变量。
var MyComponent = React.createClass({/.../});
var myElement = <MyComponent someProperty={true} />;
ReactDOM.render(myElement, document.getElementById('example'));