大綱

• 什麼是 JSX ?
• 使用 JSX 的好處
• 複合元件
• JSX 與 HTML 有何不同 ?
• 不使用 JSX 的 React

什麼是 JSX ?
JSX 它代表的是 JavaScript XML，是一種用於在使用 React 元件開發過程中建立標記、它類似於 XML 的語法。不使用 JSX 的話，React 也是能正常運作的，但是使用它可以讓我們的 React 元件更容易閱讀，因此使用 JSX 是好處多多。

以下幾點整理了，關於使用 JSX 突顯它的特性說明：

1. JSX 是一種語法轉換，每一個 JSX 節點都映射到一個 JavaScript 函式。
2. JSX 本身既不提供，也不需要運行一個時庫。
3. JSX 它不會改變或增加 JavaScript 的語意，它只是很簡單的函式呼叫。

使用 JSX 的好處
JSX 本身有很多好處，尤其當專案中的程式碼變得越來越龐大以及元件數變得越多及複雜，這些好處就會更明顯，以下是整理了一些好處說明，請看如下。

熟悉性：
從一間公司來看，都會是由非工程師及工程師所組成，哪不管今天的角色是不是工程師，這些成員都可以容易的閱讀和為這個 JSX 專案貢獻，更好的情況是了解基於 XML 語言的人都可以輕鬆採用 JSX。

語義的清楚：
透過 JSX 可以將我們的 JavaScript 程式碼轉換成更具有語義以及更有意義的標記。這樣做的好處是，我們就可以使用類似 HTML 的語法來宣告元件結構和訊息流，且知道透過轉換它會變成正常的 JavaScript 程式碼。另外，JSX 允許在應用程式標記中，可以同時使用所有預先定義好的 HTML5 標籤 (tag) 以及我們開發中自行定義好的元件。

複合元件
透過上面的介紹，我們會知道 JSX 所帶來的好處，如何以簡單的方式標記來表示一個元件。

自訂元件：
透過封裝 (wrap) 起來以便 render 函式將標記好的元件回傳。

動態值：
JSX 會渲染大括號 {...} 之間的動態值。大括號在 JavaScript 裡代表的是執行環境的訊號，任何放在大括號內的程式碼都會被運算，最後的結果會渲染成標記的節點。

JSX 與 HTML 有何不同 ?
以下是簡單的說明 JSX 與 HTML 語法的不同之處。

屬性：
在 HTML 中，我們很常對每一個節點設定屬性，其格式如下：
<div id='example-id class='example-class'>...</div>

JSX 也是使用同樣的方式處理，但是卻擁有更大的優勢及好處，因為我們可以使用 JavaScript 的動態變數來設定屬性。只需要使用大括號而不是使用引號將 JavaScript 變數包起來即可。

var reactExampleId = this.props.id;
var classes = 'example-class';
…
<div id={reactExampleId} class={classes}>...</div>

選擇語句：
在 React 中，元件的標記和產生它程式碼是綑綁在一起的。這說明著 JavaScript 的全部邏輯能力我們都能運用，例如常用的迴圈和常用語句。

不使用 JSX 的 React
所有的 JSX 標記最終都會被轉化成普通的 JavaScript。所以對於 React，其實 JSX 又並不是必要的。然而，JSX 隱藏了一些複雜性。如果我們在專案的開發中，打算不使用 JSX 的情況下要使用 React，我們就必須要知道建立一個元素的基本三個步驟：

1. 定義元件類別
2. 建立一個用以生產的該元件類別的實作的工廠 (factory)
3. 使用該工廠建立 ReactElement 實作

建立一個 React 元素：
對於平常在使用的 HTML 元素，React 透過 React.DOM 這個名稱空間為我們提供了工廠。這些預先定義的工廠是 React.createElement 的縮寫，為我們提供了一個參數，其底下舉一個簡單的例子。
React.createElement('div');
React.DOM.div();

簡寫：
雖然 React.DOM* 這個名稱空間使用起來很方便，但是在重複輸入了段時間之後，我們會發現其實是很乏味的。哪這個時候，我們可以透過使用較短的變數名稱，例如 R，來保存一個參數以將低這些麻煩。