## 三、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 規則解析。上面代碼的運行結果如下。
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 會把它的所有成員，添加到模板，運行結果如下。
