## 三、JSX 语法 上一节的代码, HTML 语言直接写在 JavaScript 语言之中,不加任何引号,这就是 [JSX 的语法](http://facebook.github.io/react/docs/displaying-data.html#jsx-syntax),它允许 HTML 与 JavaScript 的混写(查看 [Demo02](https://github.com/ruanyf/react-demos/blob/master/demo02/index.html) )。 > ~~~ > var names = ['Alice', 'Emily', 'Kate']; > > React.render( > <div> > { > names.map(function (name) { > return <div>Hello, {name}!</div> > }) > } > </div>, > document.getElementById('example') > ); > ~~~ 上面代码体现了 JSX 的基本语法规则:遇到 HTML 标签(以 < 开头),就用 HTML 规则解析;遇到代码块(以 { 开头),就用 JavaScript 规则解析。上面代码的运行结果如下。 ![](https://box.kancloud.cn/2015-09-27_56077126c3b3b.png) JSX 允许直接在模板插入 JavaScript 变量。如果这个变量是一个数组,则会展开这个数组的所有成员(查看 [demo03](https://github.com/ruanyf/react-demos/blob/master/demo03/index.html) )。 > ~~~ > var arr = [ > <h1>Hello world!</h1>, > <h2>React is awesome</h2>, > ]; > React.render( > <div>{arr}</div>, > document.getElementById('example') > ); > ~~~ 上面代码的arr变量是一个数组,结果 JSX 会把它的所有成员,添加到模板,运行结果如下。 ![](https://box.kancloud.cn/2015-09-27_560771290a105.png)