[官網學 React] Docs：介紹 JSX

網址（英文）：https://reactjs.org/docs/introducing-jsx.html
網址（中文）：https://zh-hant.reactjs.org/docs/introducing-jsx.html

JSX 的宣告方式如以下：

它不是字串，也不是 HTML，它是 JSX。

JSX 是 JavaScript 的語法擴充，官網建議在 React 使用 JSX 編寫使用者介面（UI）的樣貌。

JSX 看起來像樣板語言（template language），但 JSX 能使用 JavaScript 所有的功能。

JSX 產生 React 的 HTML 元素（elements），在下一篇將會探索和渲染 JSX 到 DOM 上，這篇則著重在介紹 JSX 的基礎。

為何用 JSX

因為渲染的邏輯先天要跟 UI 的邏輯綁在一起：事件如何處理、狀態（state）隨著時間會如何改變、還有資料要如何顯示。

所以 React 將標籤語法（markup）和邏輯放在一起，共同放在一個組件（component）裡，而組件與組件之間互相獨立。

簡而言之就是：原本的 HTML 和 JavaScript 是分成兩個檔案，用語法做區隔，而在 React 是用組件做區隔。

不過 React 並不一定要用 JSX 的方式來編寫，只是大部分的人發現這對在 JavaScript 程式碼中處理 UI 很有幫助。

JSX 也讓 React 能秀出更多有用的錯誤和警告資訊。

在 JSX 嵌入表達式

當需要用到 JavaScript 表達式，都使用花刮（curly braces）包住表達式即可：

function 也可以

JSX 也是表達式

在編譯（compilation）後，JSX 表達式變成能讓 JavaScript 函式回傳的物件。

除了可以放進判斷式裡，還可以將 JSX 表達式 assign 給變數。

在 JSX 指定屬性

字串用 “”

JavaScript 的表達式用 {}

＊由於 JSX 較接近 JavaScript，所以命名方式也是以駝峰命名法（camelCase），不是像 HTML 的命名方法

＊class 變成 className

＊tabindex 變成了 tabIndex

包含 Children

如果標籤（tag）內是空的，可以直接用 /> 關閉此標籤：

無 Children

有 Children

JSX 有預防注入攻擊

在預設下，React DOM 在渲染前會先將所有嵌入在 JSX 中的值轉譯成字串，因此能確保永遠不會注入任何沒有明確寫在應用程式的東西。

這可以避免 XSS（跨網站指令碼） 攻擊。

JSX 代表的是物件

Babel 將 JSX 編譯為呼叫 React.createElement() 的程式。

以下兩個例子等價：

第二張圖是 Babel 編譯後

React.createElement() 進行一些幫助你寫出沒有 bug 的程式的檢查，但基本上它會產生類似下面的物件：

這些物件被稱為 React 元素（React elements），可以將它們想成是我們想在螢幕上看到的東西的敘述式。

React 讀取這些物件，使用這些物件去建構 DOM，並確保他們在最近的狀態。