[JSX](http://facebook.github.io/jsx/)?是一個看起來很像 XML 的 JavaScript 語法擴展。React 可以用來做簡單的 JSX 句法轉換。
[TOC]
## 為什么要使用 JSX？
你不需要為了 React 使用 JSX，可以直接使用純粹的 JS。但我們更建議使用 JSX , 因為它能定義簡潔且我們熟知的包含屬性的樹狀結構語法。
對于非專職開發者（比如設計師）同樣比較熟悉。
XML 有固定的標簽開啟和閉合。這能讓復雜的樹更易于閱讀，優于方法調用和對象字面量的形式。
它沒有修改 JavaScript 語義。
## HTML標簽 與 React組件 對比
React 可以渲染 HTML 標簽 (strings) 或 React 組件 (classes)。
要渲染 HTML 標簽，只需在 JSX 里使用小寫字母開頭的標簽名。
~~~
var myDivElement = <div className="foo" />;
React.render(myDivElement, document.body);
~~~
要渲染 React 組件，只需創建一個大寫字母開頭的本地變量。
~~~
var MyComponent = React.createClass({/*...*/});
var myElement = <MyComponent someProperty={true} />;
React.render(myElement, document.body);
~~~
React 的 JSX 里約定分別使用首字母大、小寫來區分本地組件的類和 HTML 標簽。
> 注意:
>
> 由于 JSX 就是 JavaScript，一些標識符像?`class`?和?`for`?不建議作為 XML 屬性名。作為替代，React DOM 使用?`className`?和?`htmlFor`?來做對應的屬性。
## 轉換
JSX 把類 XML 的語法轉成純粹 JavaScript，XML 元素、屬性和子節點被轉換成`React.createElement`?的參數。
~~~
var Nav;
// 輸入 (JSX):
var app = <Nav color="blue" />;
// 輸出 (JS):
var app = React.createElement(Nav, {color:"blue"});
~~~
注意，要想使用?``，`Nav`?變量一定要在作用區間內。
JSX 也支持使用 XML 語法定義子結點：
~~~
var Nav, Profile;
// 輸入 (JSX):
var app = <Nav color="blue"><Profile>click</Profile></Nav>;
// 輸出 (JS):
var app = React.createElement(
Nav,
{color:"blue"},
React.createElement(Profile, null, "click")
);
~~~
使用?[JSX 編譯器](http://reactjs.cn/react/jsx-compiler.html)?來試用 JSX 并理解它是如何轉換到原生 JavaScript，還有?[HTML 到 JSX 轉換器](http://reactjs.cn/react/html-jsx.html)?來把現有 HTML 轉成 JSX。
如果你要使用 JSX，這篇?[新手入門](http://reactjs.cn/react/docs/getting-started.html)?教程來教你如何搭建環境。
> 注意:
>
> JSX 表達式總是會當作 ReactElement 執行。具體的實際細節可能不同。一種優化 的模式是把 ReactElement 當作一個行內的對象字面量形式來繞過`React.createElement`?里的校驗代碼。
## JavaScript 表達式
### 屬性表達式
要使用 JavaScript 表達式作為屬性值，只需把這個表達式用一對大括號 (`{}`) 包起來，不要用引號 (`""`)。
~~~
// 輸入 (JSX):
var person = <Person name={window.isLoggedIn ? window.name : ''} />;
// 輸出 (JS):
var person = React.createElement(
Person,
{name: window.isLoggedIn ? window.name : ''}
);
~~~
### 子節點表達式
同樣地，JavaScript 表達式可用于描述子結點：
~~~
// 輸入 (JSX):
var content = <Container>{window.isLoggedIn ? <Nav /> : <Login />}</Container>;
// 輸出 (JS):
var content = React.createElement(
Container,
null,
window.isLoggedIn ? React.createElement(Nav) : React.createElement(Login)
);
~~~
### 注釋
JSX 里添加注釋很容易；它們只是 JS 表達式而已。你只需要在一個標簽的子節點內(非最外層)小心地用?`{}`?包圍要注釋的部分。
~~~
var content = (
<Nav>
{/* 一般注釋, 用 {} 包圍 */}
<Person
/* 多
行
注釋 */
name={window.isLoggedIn ? window.name : ''} // 行尾注釋
/>
</Nav>
);
~~~
> 注意:
>
> JSX 類似于 HTML，但不完全一樣。參考?[JSX 陷阱](http://reactjs.cn/react/docs/jsx-gotchas.html)?了解主要不同。
