[React.js 學習筆記] JSX簡介

本系列文章將參考 React 官方教學和網路上文件以及 react 引領未來的用戶界面開發框架一書整理成 React 初學者系列教學文章


在 React 中有一個重要觀念就是元件是用來關注點分離的，而不是被當做模版或是業務邏輯使用。另外，我們必須洗腦自己，在 React 中， HTML 和 JS 存在著緊密聯繫，透過這樣的設計可以充分利用 JavaScript 的強大能力而不用浪費時間在蹩腳的模版語言上。簡單來說，React 是將 HTML 元素直接寫在 JS 內，透過 JSX 內可以在 JS 內寫 HTML 再轉換成純 JS。
好吧，如果你還是沒辦法說服自己使用 JSX 的話(尤其是過去被教育絕對不要在JavaScript中寫HTML的朋友)，可以看看使用的好處(請注意在 React 中使用 JSX 並非必須，只是可以提高程式碼可讀性)： 

1. 允許使用熟悉的語法來定義HTML元素樹(非開發者也可以了解。如:設計師)
2. 提供更加語意化且易懂的標籤
3. 程序結構更容易直覺化
4. 抽象了 React Element 建置過程
5. 可以隨時掌握HTML標籤，以及生成標籤的代碼
6. 原生 JS
按:JSX 亦即 JavaScript XML，一種在 React 元件內部建構標籤的類 XML 語法。JSX是一種語法變換，每個JSX節點都對應一個JS函數。

屬性
在JSX可以用變數當作屬性值，也可以是函數傳回值

<div id={myId} > </div>

條件判斷
需要注意的是如果直接在

<div className={if(isComplete){'is-complete'}}></div>

條件判斷方式:
1. 使用三元運算子
2. 使用變數
3. 使用函數
4. 使用邏輯運算符

非DOM屬性
1. key
2. ref
3. 設置原始HTML(建議不使用

事件
在所有瀏覽器中，事件名稱已經規範化統一用駝峰形式表示。例如:

handleClick: function(e){},
render: function() {
    return <div onClick={this.handleClick}>...</div>
}

註解
事實上JSX本質就是JS，因此可以在標籤內加入原生JS注釋。
注釋可以用下列方式加入:
1. 當作元素子節點