建立 2026-09-15 更新 2026-09-15

元件與 JSX

元件是 React 的基本單位：一個回傳標記的函式。JSX 讓你用「像 HTML」的語法描述這份標記。學會這兩件事，才能讀懂任何 React 檔案。

函式元件

元件名稱必須大寫開頭，React 才會把它當元件而不是普通 HTML 標籤。

function Welcome() {
  return <h1>你好，React</h1>;
}

在別的元件裡像標籤一樣使用：

function App() {
  return (
    <main>
      <Welcome />
      <Welcome />
    </main>
  );
}

同一份 Welcome 可以出現多次，每次都是獨立的實例。官方稱這個組合方式為「巢狀元件」，見 Your First Component。

一個元件只能回傳一個根節點。需要包一層又不想多一個 DOM 節點時，用 Fragment：

function Title() {
  return (
    <>
      <h1>標題</h1>
      <p>副標</p>
    </>
  );
}

JSX 規則

JSX 會被編譯成 React.createElement(...)。幾個最常踩的點：

• 插入資料用大括號：<p>{user.name}</p>。大括號裡是 JavaScript 運算式，不是敘述（不能寫 if，可以寫三元或函式呼叫）。
• 屬性用 camelCase：class 改 className，for 改 htmlFor，因為它們在 JavaScript 裡是保留字。
• 內聯樣式是物件：style={{ color: "navy", fontSize: 16 }}。外層 { } 進入 JS，內層 { } 是物件。
• 必須關閉標籤：<img />、<input /> 都要有結尾。
• 註解：{/* 這是 JSX 註解 */}。

function Badge({ label, count }) {
  const isHot = count > 10;
  return (
    <span className={isHot ? "badge hot" : "badge"}>
      {label}：{count}
    </span>
  );
}

為什麼用元件

把按鈕、導覽列、卡片拆開之後：

• 同一段 UI 只維護一份。
• 資料（props / state）與畫面寫在一起，改起來對得上。
• 之後要測、要重用，邊界清楚。

下一步：Props。官方逐步：Writing Markup with JSX。