什么是JSX
React的核心机制之一就是虚拟DOM：可以在内存中创建虚拟的DOM元素。React利用虚拟DOM来减少对实际DOM的操作从而提升性能。当然，虚拟DOM也可以通过JavaScript来创建，例如：
var child1 = React.createElement('li', null, 'First');
var child2 = React.createElement('li', null, 'Second');
createElement语法：
ReactElement createElement(
string/ReactClass type,
[object props],
[children ...]
)
创建并返回一个新的指定类型的ReactElement。type 参数可以是一个html标签名字符串（如："div","span"等），或者是ReactClass(通过React.createClass 创建的)。
使用这样的机制，我们完全可以用JavaScript构建完整的界面DOM树，正如我们可以用JavaScript创建真实DOM。但是，这样的代码可读性差，于是React发明了JSX, 利用我们熟悉的HTML语法来创建虚拟的DOM:
var root = (
<ul>
<li>First</li>
<li>Secont</li>
</ul>
);
这两段代码是完全等价的，后者将XML语法直接加入到JavaScript代码中，让你能够高效的通过代码而不是模板来定义界面。之后JSX通过翻译器转换到纯JavaScript再由浏览器执行。
因此，JSX本身并不是什么高深的技术，可以说只是一个比较高级但很直观的语法糖。它非常有用，却不是一个必需品，没有JSX的React也可以正常工作：只要你乐意用JavaScript代码去创建这些虚拟DOM元素。
JSX语法
基本规则：遇到HTML标签（以< 开头），就用HTML规则解析；遇到代码块（以{ 开头），就用JavaScript规则解析。
例如：
var names = ['Alice', 'Emily', 'Kate'];
ReactDOM.render(
<div>
{
names.map(function (name) {
return <div>Hello, {name}!</div>
})
}
</div>,
document.getElementById('example'));
输出结果:
Hello, Alice!
Hello, Emily!
Hello, Kate!
小语法总结：
- JSX中 使用js表达式，表达式写在{}：
ReactDOM.render(
<div>{1 + 1}</div>,
document.getElementById('example')
);
- JSX中 不能使用if else语句， 但可以使用三元运算表达式来替代。
var person = <Person name={window.isLoggedIn ? window.name : ' '} />;
- JSX中注释需要写在花括号中
ReactDOM.render(
<div>{/*注释*/}</div>，
document.getElementById('example')
);
- JSX中遇到数组，数组会自动展开所以成员
var arr = [<h1>Alice</h1>, <h2>Emily</h2>];
ReactDOM.render(
<div>{arr}</div>,
document.getElementById('example')
);
