# 什麼是 JSX

這是官方文件 (https://zh-hant.reactjs.org/docs/introducing-jsx.html)介紹

其實可以已把 *JSX* 看得很簡單，*JSX* 就是寫在 JavaScript 裡的 HTML 就這樣而已。

## JSX 與 HTML 主要差異

我們來看一下 code 就可以知道差異在哪了

### HTML

<div class="buttonContainer">
  <button type="button" onclick="事件">按鈕</button> // 屬性都是小寫
</div>

### JSX

<div className="buttonContainer">
  <button type="button" onClick="事件">按鈕</button> // JSX 採用駝峰式來命名屬性
</div>

* 只要是由兩個單字組合的屬性，第二個字的開頭一定是大寫。
* HTML 上有的屬性 JSX 一定都有，只是有些名字不一定一樣

目前我只知道 label 標籤裡的 for 屬性在 *JSX *不一樣：

### HTML

<label for="good">我很帥</label>
<input type="checkbox" id="good">

### JSX

<label htmlFor="good">我很帥</label> // 因為 for 在 JS 是保留字，所以改用 htmlFor 來取代
<input type="checkbox" id="good">

除了這些還有什麼？

*JSX* 是可以用大括號裡面放*表達式（express）*，可以下 code：

const title = "大標題";

const Heading = <h1>{title}</h1>;

當然 *JSX *本身也是*表達式（express）*：

function getGreeting(user) {
  if (user) {
    return <h1>Hello, {formatName(user)}!</h1>;
  }
  return <h1>Hello, Stranger.</h1>;
}