* 簡介

JSX是一種JavaScript的語法擴展，一種類似XML的語法，而在寫React元件時，通常會使用JSX來提升程式撰寫效率，但是JSX並非強制使用，也可以選擇不用，雖然JSX最終還是透過Babel轉成JavaScript，不過通常認識了JSX就會瞭解它的好，接下來就來認識JSX吧。

* 使用方式

簡介中有提到JSX必須透過Babel解析(瀏覽器才看得懂)，而最簡單的方式就是引入babel
<script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.23/browser.min.js"></script>
這樣就可以開始練習囉!

* 對比JSX與解析後的原生JavaSCript

是不是覺得認識JSX很美好呢?使我們撰寫上方便了許多

const text = 'Hello'
<p>{text}</p>

解析後:

var text = 'Hello'
React.createElement("p",null,"Hello")

* 使用JSX的好處

1. 更加語意化且易懂的標籤
2. 程式碼更加簡潔
   最終JSX會轉換成JavaScript，但使用JSX可以讓程式碼看起來更簡潔，且易懂。以下為使用JSX和不使用JSX的範例:
   <a href="https://www.google.com.tw/">google</a>
   不使用JSX的寫法

//React.createEmelent(元件/HTML標籤，元件屬性(以物件表示)，子元件)
React.createElement('a',{href: 'https://www.google.com.tw/'},'google')

3. 結合原生JavaScript語法

* JSX語法中只能有一個根元素

不允許多個根元素

<div>標題</div>
<p>內容</p>
<span>文字</span>

應要改成一個根元素

<div>
    <div>標題</div>
    <p>內容</p>
    <span>文字</span>
</div>

但是缺點是html結構因此多了一層，如果React版本是v16的話可以使用<React.Fragment/>像是:

<React.Fragment>
    <div>標題</div>
    <p>內容</p>
    <span>文字</span>
</React.Fragment>

* JSX如何分辨是開發者寫的元件還是對應HTML的DOM元素

相信這是每個初學者常碰到的問題，英文大寫字元為開頭的標記代表自訂的元件，英文小寫字元為開頭的標記則是HTML的DOM元素標記。因此，你所寫的元件類別或函式型元件的名稱，都必需以"英文大寫字元"為開頭
<Pagination /> //元件