本文主要介紹一些關於 JSX 的知識，包括 JSX 是什麼，以及它的用途等，力求讓各位對 JSX 有一個簡單的了解

JSX 是什麼

JSX=JavaScript+XML，它看起來像是 HTML 和 JavaScript 的混合體，實際上它是一種 JavaScript 的語法擴展，用來在 React 中描述 UI 。

XML？HTML？

相信各位看到 XML 時都多多少少會想起這個名字相近的 HTML，實際上，XML 和 HTML 都是一種標記語言。但是 XML 不同於 HTML 的地方在於它擁有更嚴格的語法要求和它允許用戶自定義標籤。一般 XML 是描述數據用的，人們的關注點在於數據本身；而 HTML 更多的時候只需要顯示數據，這時人們比較關心數據的外觀而不是內容。

JSX 語法

來個最簡單直觀的例子

<script type="text/babel">
ReactDOM.render(
    <h1>Hello, world!</h1>,
    document.getElementById('example')
);
</script>

這個例子中 HTML 語言直接與 JavaScript 語言混用了，在實際的開發中，這可以有效的擴展 JavaScript 的語義。如果轉化成完全的 JavaScript，就應該這麼寫

<script type="text/javascript">
      ReactDOM.render(
        React.DOM.h1(null,'hello,world!'),
            document.getElementById('example')
      );
</script>

簡單的說，JSX 看到 HTML 就按 HTML 來對待，看到 JavaScript 就按 JavaScript 來對待

JSX 的使用

JSX 的語法

JSX 本身就和 XML 語法類似，可以定義屬性以及子元素。唯一特殊的是可以用大括弧來加入 JavaScript 表達式，例如：

var person = <Person name={window.isLoggedIn ? window.name : ''} />;

一般每個組件都定義了一組屬性（props，properties的簡寫）接收輸入參數，這些屬性通過 XML 標記的屬性來指定。大括弧中的語法就是純 JavaScript 表達式，返回值會賦予組件的對應屬性，因此可以使用任何 JavaScript 變數或者函數調用。

上述代碼經 JSX 編譯就會得到：

var person = React.createElement(  Person,  {name: window.isLoggedIn ? window.name : ''});

在 JSX 中使用事件

就像這樣

<button onClick={this.checkAndSubmit.bind(this)}>Submit</button>

JSX 和原生 HTML 定義事件的唯一區別就是 JSX 採用駝峰寫法來描述事件名稱，大括弧中仍然是標準的 JavaScript 表達式，返回一個事件處理函數。在 JSX 中你不需要關心什麼時機去移除事件綁定，因為 React 會在對應的真實 DOM 節點移除時就自動解除了事件綁定。

在 JSX 中使用樣式

儘管在大部分場景下我們應該將樣式寫在獨立的 CSS 文件中，但是有時對於某個特定組件而言，其樣式相當簡單而且獨立，那麼也可以將其直接定義在 JSX 中。在 JSX 中使用樣式和真實的樣式也很類似，通過 style 屬性來定義，但和真實 DOM 不同的是，屬性值不能是字元串而必須為對象，例如：

<div style={{color: '#ff0000', fontSize: '14px'}}>Hello World.</div>

裡面的大括弧只是標準的 JavaScript 對象表達式，外面的大括弧是 JSX 的語法。

在 JSX 中自定義組件

在 JSX 中，我們不僅可以使用 React 自帶 div ,  input... 這些虛擬 DOM 元素，還可以自定義組件。組件定義之後，也都可以利用XML語法去聲明，而能夠使用的 XML Tag 就是在當前 JavaScript 上下文的變數名，這一點非常好用，你不必再去考慮某個 Tag 是如何對應到相應的組件實現。

JSX 學習的技巧

1.不要將 JSX 看作是模板，而應視為需要被編譯的可替代的 JS 語法（語句）。也就是說，JSX 只是將類似 XML 的標記轉換為 JavaScript 。

2.Babel 工具是 React 團隊的主要選擇，用於將 ES *代碼和 JSX 語法轉換為 ES5 代碼。您可以通過 http://babeljs.io/ 了解更多關於Babel的信息，或閱讀Babel手冊。

3.JSX 的優點有四點：

（1）技術含量較低的人仍然能夠理解和修改所需的部分。CSS 開發人員和設計人員會發現 JSX 比 JavaScript 更為熟悉。也就是說，使用 JSX 的 HTML 標記看起來像 HTML 標記，而不是 createElement() 函數的金字塔。

（2）您可以利用 HTML 中 JavaScript 的全部功能，避免學習或使用模板語言。JSX 不是模板解決方案。它是用於表示 UI 節點和組件的樹結構的聲明性語法。

（3）通過添加JSX轉換步驟，你會發現一些在HTML中你可能會忽略的錯誤。

（4）JSX 提倡內聯樣式的思想。這可能是一件好事。

4.謹防 JSX Gotchas。

5.JSX 與 React 本身不同。JSX 不會試圖遵守任何 XML 或 HTML 規範。JSX 被設計為 ECMAScript 特性，並且與 XML / HTML 的相似性僅在表面上（即它看起來像 XML / HTML，因此您可以只寫一些熟悉的東西）。目前正在起草一份 JSX 規範，任何人都可以將其作為一個類似於 XML 的語法擴展到 ECMAScript，而不需要任何定義的語義。

6.在 JSX 中，<foo-bar />單獨是有效的，而<foo-bar>不是。