Jeff的隨手筆記

學習當一個前端工程師

0%

『Day 3』從 HTML 到 JSX

Posted on Edited on In

前言

在上一篇的內容中，不知道大家是否留意到這段程式碼：

1
2
3
4
5
6
7
export default function Gallery() {
  return (
    <section>
      <h1>Amazing scientists</h1>
    </section>
  );
}

看起來很特別對吧？在 JavaScript 的函式中竟然出現了類似 HTML 的語法。這個有趣的語法特性，正是我們今天要介紹的主角 - JSX。

為什麼需要 JSX？

回想網頁開發的演進，多年來我們習慣將：

  • 內容寫在 HTML
  • 樣式寫在 CSS
  • 邏輯寫在 JavaScript

這三者通常都是分開的獨立檔案。但隨著網頁互動性越來越重要，JavaScript 的角色也產生了變化。它不再只是負責互動功能，更開始主導內容的呈現。

這種轉變促使了 React 這類現代前端框架的誕生。React 選擇將渲染邏輯和 HTML 整合在一起，形成了我們現在熟知的「元件（Component）」概念。而 JSX 就是實現這個想法的關鍵工具。

認識 JSX

JSX 是一種特殊的語法糖，讓我們能在 JavaScript 中撰寫類似 HTML 的程式碼。雖然 JSX 看起來像 HTML，但本質上它是 JavaScript 語法的擴展，並與 HTML 有本質的不同。

在運作時，我們寫的每段 JSX 程式碼都會經過轉譯，將這些類 HTML 語法轉換成 React 所需的 JavaScript 函式呼叫（如 React.createElement）。這就像一個翻譯過程，將我們易於閱讀的 JSX 語法轉換成電腦可以理解和執行的形式。

許多人剛接觸 React 時常會誤以為 JSX 就是 HTML，因為它模仿了 HTML 的外觀，但這只是表象——JSX 的本質是生成 React 元素（elements）。經過轉譯後，JSX 會生成一連串 React.createElement 函式呼叫，從而建立 React 元素。

這種轉譯過程帶來了一些 JSX 特有的規則，讓我們無法直接將 HTML 複製到 JSX 中使用，這些嚴格規則幫助我們編寫更好的 React 元件。

JSX 的三大重要規則

1. 只能回傳單一根元素（Return a single root element）

每個 React 元件都必須回傳單一的 JSX 表達式。

這個規則的本質是因為 JSX 在轉譯後會變成 React.createElement() 的函式呼叫，這個函式會回傳一個代表 React element 的 JavaScript 物件。

在 React 的渲染過程中，需要一個單一的根元素來進行比較和更新。雖然這個「單一」的元素內部可以包含多個子元素，但最外層必須是單一的。這就是為什麼當我們需要回傳多個元素時，必須用一個父元素包住它們：

1
2
3
4
5
6
<div>
  <h1>Hedy Lamarr's Todos</h1>
  <img src="https://i.imgur.com/yXOvdOSs.jpg" alt="Hedy Lamarr" class="photo" />
  <ul>...</ul>
</div>

如果不想多加一層 div，還可以使用 React 提供的 Fragment 語法，Fragment 最常見的寫法是空標籤 <> 和 </>：

1
2
3
4
5
<>
  <h1>Hedy Lamarr's Todos</h1>
  <img src="https://i.imgur.com/yXOvdOSs.jpg" alt="Hedy Lamarr" class="photo" />
  <ul>...</ul>
</>

除了這種簡短語法，還有一種完整的寫法 <Fragment> 和 </Fragment>：

1
2
3
4
5
6
7
import { Fragment } from 'react'

<Fragment>
  <h1>Hedy Lamarr's Todos</h1>
  <img src="https://i.imgur.com/yXOvdOSs.jpg" alt="Hedy Lamarr" class="photo" />
  <ul>...</ul>
</Fragment>

雖然完整寫法較少使用，但在需要在 Fragment 上加上 key 屬性時（例如在迴圈中），就必須使用這種寫法。大部分情況下，我們都會使用較簡潔的空標籤寫法。
無論使用哪種方式，重要的是確保元件始終回傳單一的元素樹結構（single tree of elements），這樣 React 才能正確地管理和更新 DOM。

2. 標籤必須正確閉合（Close all the tags）

在 JSX 中，所有標籤都必須明確地關閉。以 img 標籤為例：

  • HTML 寫法：<img src="image.jpg">
  • JSX 寫法：<img src="image.jpg" />

如果沒有閉合，React內建的JSX轉譯工具將沒辦法判別這個 React element 結束的位置而導致無法進行轉換。

3. 使用駝峰式命名（camelCase most of the things）

在前面我們提到 JSX 最終會被轉換成 JavaScript，在這個過程中，HTML 的屬性（attributes）會變成 JavaScript 物件中的鍵（keys）。這就帶來了一個有趣的問題：JavaScript 對變數命名有一些特定的限制。

這些限制包括：

  • 不能使用帶有破折號（-）的名稱
  • 不能使用 JavaScript 的保留字（例如 class 和 for）
  • 需要符合 JavaScript 的變數命名規則

為了解決這些問題，同時也為了保持程式碼風格的一致性，JSX 採用了駝峰式（camelCase）的命名規則。這導致了一些 HTML 屬性在 JSX 中的寫法改變，最常見的例子是：

  • class 要寫成 className
  • for 要寫成 htmlFor

這種命名規則的改變，不僅解決了與 JavaScript 語法的相容性問題，還讓我們看到駝峰式命名的屬性時，就能立即辨識出這是 React 元件的屬性，而不是普通的 HTML 屬性。

總結

今天我們一起認識了 JSX 這個 React 中不可或缺的重要概念。從一開始 HTML、CSS、JavaScript 分離的傳統開發方式，到現在能夠在 JavaScript 中直接撰寫類 HTML 語法的轉變，這並不只是開發方式的改變，更代表了網頁開發思維的演進。

JSX 雖然看起來很像 HTML，但它其實是一個更強大的工具。透過轉譯機制，它讓我們能用更直覺的方式撰寫 React 元件，同時又保有 JavaScript 的所有能力。

要善用 JSX，記住三個關鍵規則：

  1. 元件只能回傳單一根元素，需要時可以使用 Fragment
  2. 所有標籤都要正確閉合
  3. 使用駝峰式命名來撰寫屬性