使用 JSX 編寫標記
JSX是一種 JavaScript 語法擴充，讓您能在 JavaScript 檔案中編寫類似 HTML 的標記。雖然有其他編寫元件的方式，但大多數 React 開發者偏好 JSX 的簡潔性，且大多數程式碼庫都使用它。
您將學習
- 為何 React 將標記與渲染邏輯混合
- JSX 與 HTML 有何不同
- 如何使用 JSX 顯示資訊
JSX：將標記放入 JavaScript
網路一直建立在 HTML、CSS 和 JavaScript 之上。多年來，網頁開發者將內容放在 HTML 中，設計放在 CSS 中，邏輯放在 JavaScript 中——通常放在不同的檔案裡！內容在 HTML 中標記，而頁面的邏輯則單獨存在於 JavaScript 中：
HTML
JavaScript
但隨著網路變得更加互動，邏輯越來越決定內容。JavaScript 負責 HTML！這就是為什麼在 React 中，渲染邏輯和標記共存於同一個地方——元件。
Sidebar.jsReact 元件
Form.jsReact 元件
將按鈕的渲染邏輯和標記保持在一起，確保它們在每次編輯時都能彼此同步。相反地，不相關的細節，例如按鈕的標記和側邊欄的標記，則彼此隔離，使得單獨更改其中任何一個都更加安全。
每個 React 元件都是一個 JavaScript 函數，可能包含一些 React 渲染到瀏覽器中的標記。React 元件使用一種稱為 JSX 的語法擴充來表示該標記。JSX 看起來很像 HTML，但它更嚴格一些，並且可以顯示動態資訊。理解這一點的最佳方法是將一些 HTML 標記轉換為 JSX 標記。
注意
JSX 和 React 是兩個獨立的東西。它們經常一起使用，但您可以獨立使用它們。JSX 是一種語法擴充，而 React 是一個 JavaScript 函式庫。
將 HTML 轉換為 JSX
假設您有一些（完全有效的）HTML：
而您想將其放入您的元件中：
如果您直接複製貼上，它將無法運作：
這是因為 JSX 比 HTML 更嚴格，並且有更多規則！如果您閱讀上面的錯誤訊息，它們將引導您修復標記，或者您可以遵循下面的指南。
注意
大多數時候，React 螢幕上的錯誤訊息會幫助您找到問題所在。如果您遇到困難，請閱讀它們！
JSX 的規則
1. 回傳單一根元素
要從元件回傳多個元素，請用單一父標籤將它們包裹起來。
例如，您可以使用<div>：
如果你不想在標記語言中額外添加一個<div>，你可以改用 <> 和 </>：
這個空標籤稱為 片段（Fragment）。片段讓你可以將元素分組，而不會在瀏覽器的 HTML 樹狀結構中留下任何痕跡。
2. 關閉所有標籤
JSX 要求標籤必須明確關閉：自閉合標籤如<img>必須變成<img />，而包裹標籤如 <li>oranges 必須寫成 <li>oranges</li>。
以下是海蒂·拉瑪的圖片和清單項目關閉後的樣子：
3. 駝峰式命名所有（幾乎）屬性！
JSX 會轉換成 JavaScript，而寫在 JSX 中的屬性會變成 JavaScript 物件的鍵。在你自己的元件中，你通常會希望將這些屬性讀取到變數中。但 JavaScript 對變數名稱有限制。例如，它們的名稱不能包含連字符，也不能是像class這樣的保留字。
這就是為什麼在 React 中，許多 HTML 和 SVG 屬性都以駝峰式命名書寫。例如，不使用stroke-width，而是使用strokeWidth。由於class是保留字，在 React 中你改寫為className，其名稱源自於 對應的 DOM 屬性：
你可以在DOM 元件屬性清單中找到所有這些屬性。 如果你寫錯了，別擔心——React 會在 瀏覽器控制台 中列印一條帶有建議修正的訊息。
專業提示：使用 JSX 轉換器
轉換現有標記語言中的所有這些屬性可能很繁瑣！我們建議使用轉換器來將你現有的 HTML 和 SVG 轉換為 JSX。轉換器在實踐中非常有用，但了解其運作原理仍然值得，這樣你就能夠舒適地自行編寫 JSX。
以下是你最終的結果：
總結
現在你了解了 JSX 存在的原因以及如何在元件中使用它：
- React 元件將渲染邏輯與標記語言組合在一起，因為它們是相關的。
- JSX 與 HTML 相似，但有一些差異。如果需要，你可以使用轉換器。
- 錯誤訊息通常會指引你朝著正確的方向修復你的標記語言。