建構畫面的最小單位：React element

什麼是 React Element？

React Element 是 React 應用程式中用來描述畫面內容的最小單位。它是一個純粹的 JavaScript 物件，描述了你希望在畫面上看到的 UI 結構（例如 HTML 標籤、屬性、內容等）。React Element 是不可變的（immutable），一旦創建就無法直接修改，只能透過重新渲染來更新畫面。

簡單來說，React Element 就像是畫面的「藍圖」，告訴 React 你想要畫面上顯示什麼。它通常透過 JSX 語法來創建，雖然背後實際上是透過 React.createElement 函數生成。

React Element 的特點

輕量：React Element 是一個普通的 JavaScript 物件，僅描述 UI 結構，不包含實際的 DOM 操作。
不可變：創建後無法直接修改其屬性或內容。
透過 JSX 簡化：在 React 中，通常使用 JSX 語法來撰寫 React Element，編譯後會轉為 React.createElement 呼叫。
對應 DOM：React 會根據 React Element 創建並管理真正的 DOM 節點（透過虛擬 DOM 機制）。

如何創建 React Element？

React Element 可以透過以下兩種方式創建：

使用 JSX（推薦，簡單易讀）
使用 React.createElement（底層實現，較少直接使用）

我會以 JSX 為主來解釋，因為這是 React 開發中最常用的方式，並附上完整的程式碼範例，讓你能直接跟著操作。

步驟 1：設置 React 專案

假設你還沒有 React 專案，我們先從創建一個簡單的 React 專案開始。如果你已經有專案，可以跳過這部分。

安裝 Node.js
確保你的電腦已安裝 Node.js（建議版本為 18 或以上）。可以到 Node.js 官網下載並安裝。
創建 React 專案
開啟終端機，輸入以下指令來創建一個新的 React 專案：
```
npx create-react-app my-react-element-demo
cd my-react-element-demo
npm start
```
這會創建一個名為 my-react-element-demo 的專案，並自動啟動開發伺服器。你可以在瀏覽器中訪問 http://localhost:3000 看到預設的 React 頁面。

步驟 2：撰寫簡單的 React Element（使用 JSX）

我們將修改 src/App.js 檔案，展示如何使用 JSX 創建 React Element，並渲染到畫面上。

打開 src/App.js
使用你慣用的程式碼編輯器（例如 VS Code）打開 src/App.js。

編寫程式碼
將以下程式碼複製並覆蓋到 src/App.js 中：

import React from "react";

function App() {
  // 創建一個簡單的 React Element（使用 JSX）
  const element = <h1>你好！這是我的第一個 React Element</h1>;

  return <div>{element}</div>;
}

export default App;

程式碼解說
- const element = <h1>你好！這是我的第一個 React Element</h1>;
  這行程式碼使用 JSX 語法創建了一個 React Element，表示一個 <h1> 標籤，內容是「你好！這是我的第一個 React Element」。
- return (<div>{element}</div>);
  將 element 渲染到畫面，包在一個 <div> 標籤內（React 要求元件的 return 必須是一個單一的根元素）。
- 儲存檔案後，瀏覽器會自動重新整理，你應該會在畫面上看到「你好！這是我的第一個 React Element」。

步驟 3：進階一點的 React Element（帶屬性與子元素）

React Element 不僅可以描述簡單的標籤，還可以包含屬性（props）和子元素。我們來改進程式碼，展示更複雜的結構。

修改 src/App.js
將以下程式碼複製到 src/App.js：

import React from "react";

function App() {
  // 創建一個帶屬性和子元素的 React Element
  const element = (
    <div className="container">
      <h1 style={{ color: "blue", textAlign: "center" }}>
        歡迎體驗 React Element
      </h1>
      <p>這是一個帶樣式和子元素的範例！</p>
      <button onClick={() => alert("你點擊了按鈕！")}>點我</button>
    </div>
  );

  return element;
}

export default App;

程式碼解說
- <div className="container">：這是一個 React Element，表示一個 <div> 標籤，帶有 className 屬性（在 JSX 中使用 className 代替 HTML 的 class）。
- <h1 style={{ color: 'blue', textAlign: 'center' }}>：這是一個 <h1> 標籤，帶有內聯樣式（style 屬性使用 JavaScript 物件格式）。
- <p> 和 <button>：這些是子元素，嵌套在 <div> 內，形成一個完整的 UI 結構。
- onClick={() => alert('你點擊了按鈕！')}：為按鈕添加點擊事件，點擊時會彈出提示框。
- return element;：直接返回 element，渲染到畫面。
執行結果
儲存檔案後，瀏覽器會顯示一個藍色的標題、段落文字和一個按鈕。點擊按鈕會彈出提示框。

步驟 4：使用 React.createElement 創建 React Element（進階了解）

雖然 JSX 是最常用的方式，但了解底層的 React.createElement 有助於你更深入理解 React Element 的運作。以下是使用 React.createElement 重寫上述範例的程式碼。

修改 src/App.js
將以下程式碼複製到 src/App.js：

import React from "react";

function App() {
  // 使用 React.createElement 創建 React Element
  const element = React.createElement(
    "div",
    { className: "container" },
    React.createElement(
      "h1",
      { style: { color: "blue", textAlign: "center" } },
      "歡迎體驗 React Element"
    ),
    React.createElement(
      "p",
      null,
      "這是一個使用 React.createElement 的範例！"
    ),
    React.createElement(
      "button",
      { onClick: () => alert("你點擊了按鈕！") },
      "點我"
    )
  );

  return element;
}

export default App;

程式碼解說
- React.createElement(type, props, ...children)：
  - type：HTML 標籤名稱（如 'div'、'h1'）或 React 元件。
  - props：元素的屬性物件 located: 2025-07-06 15:02:31.183792
  - children：子元素，可以是文字或其他 React Element。
- 例如，React.createElement('div', { className: 'container' }, ...) 創建了一個 <div> 元素，帶有 className="container" 屬性。
- 這段程式碼的功能與前面的 JSX 範例完全相同，只是用更底層的方式實現。
執行結果
儲存後，畫面效果與前一個範例相同，但你可以看到 JSX 背後的實現方式。

步驟 5：常見問題與操作建議

為什麼使用 JSX 比較好？
JSX 語法簡潔，類似 HTML，易於閱讀和維護，而 React.createElement 較為冗長，容易出錯。建議初學者專注於 JSX。
如何避免常見錯誤？
- 確保每個元件的 return 只有一個根元素（例如包在 <div> 或 <> 內）。
- 屬性名稱使用駝峰命名法（例如 className 而非 class，onClick 而非 onclick）。
- 儲存檔案後，檢查瀏覽器是否有錯誤訊息（可在開發者工具中按 F12 查看）。
如何樣式化 React Element？
- 使用 style 屬性添加內聯樣式（見範例）。
- 在 src/App.css 中撰寫 CSS，並用 className 應用樣式。
- 例如，在 src/App.css 中添加：
```
.container {
  padding: 20px;
  text-align: center;
}
```
如何執行專案？
- 在專案目錄下運行 npm start。
- 若遇到問題，檢查終端機是否有錯誤訊息，或確認 node_modules 是否正確安裝（可運行 npm install）。

總結

React Element 是 React 建構畫面的最小單位，描述 UI 結構。
使用 JSX 創建 React Element 是最簡單的方式，背後透過 React.createElement 實現。
透過以上範例，你可以：
1. 創建一個簡單的 React Element（<h1>）。
2. 創建帶屬性和子元素的複雜 React Element（<div> 包含 <h1>、<p> 和 <button>）。
3. 理解 React.createElement 的底層實現。

什麼是 React Element？​

React Element 的特點​

如何創建 React Element？​

步驟 1：設置 React 專案​

步驟 2：撰寫簡單的 React Element（使用 JSX）​

步驟 3：進階一點的 React Element（帶屬性與子元素）​

步驟 4：使用 React.createElement 創建 React Element（進階了解）​

步驟 5：常見問題與操作建議​

總結​