什麼是 React？給非工程師的白話指南

React 是一個用來建立使用者介面的 JavaScript 函式庫，也就是人們在應用程式中看到並點擊的部分。你用稱為元件的可重複使用零件來組成畫面，例如一個按鈕、一張商品卡片或整個頁面。React 會讓畫面與你的資料保持同步：資料改變時，React 會更新依賴該資料的頁面部分。它由 Facebook（現在的 Meta）開發，是開放原始碼，也是最廣泛使用的網頁應用程式建構方式之一。

用 AI 建立東西時，為什麼它很重要

如果你用 AI 工具建立網頁應用程式，它很可能是以 React 寫成的。許多 AI 應用程式建構工具預設就使用 React，因為它很受歡迎、文件完善，而且 AI 模型可以學習的 React 程式碼非常多。

你不需要會寫 React 也能用 AI 建立應用程式。但稍微了解一點會幫助你：

• 精準描述修改。 「把 ProductCard 元件的價格改成粗體」比「讓價格在某處更醒目」清楚得多。
• 理解錯誤訊息。 像「Cannot read properties of undefined」或「Too many re-renders」這類訊息會比較容易理解。
• 做出合理的選擇。 純 React 應用程式是在瀏覽器中渲染，這會影響搜尋能見度和首次載入速度。了解這點，有助於你決定何時要求改用不同的架構。
• 日後與開發者合作。 React 是常見的技能，開發者通常能很快接手 React 程式碼。

日常生活中的比喻

想想樂高積木。你不需要從一整塊積木雕刻出完整的模型，而是用標準的積木組合起來。幾塊積木可以做出一個輪子；四個輪子加上其他零件就變成一輛車。如果你希望每輛車的輪子都是紅色，只需要改一次輪子的設計。

React 元件就是這些積木。Button 元件會用在 ProductCard 裡面，ProductCard 又用在 ProductGrid 裡面，而 ProductGrid 是 ShopPage 的一部分。只要修改一次 Button，應用程式中的每一個按鈕都會跟著改變。

比喻的另一半是：想像樂高模型會在你改變說明書時自動重組。這就是 React 的另一個特色：你描述在目前資料下畫面應該長什麼樣子，React 會自行計算頁面上需要改變的部分。

核心概念

元件（Components）

元件就是一個會回傳一段介面的 JavaScript 函式。React 的文件把元件描述為擁有自己的邏輯和外觀的一塊 UI。元件名稱以大寫字母開頭。

JSX

元件通常以 JSX 撰寫，它看起來就像混在 JavaScript 裡的 HTML：

function Greeting() {
  return <h1>Welcome back!</h1>;
}

JSX 並非必要，但 React 的文件指出大多數專案都會使用它。它在瀏覽器執行前會被轉換為普通的 JavaScript。

Props

Props 是你傳入元件的輸入值，就像可重複使用零件上的設定：

<ProductCard name="Lavender Candle" price={24} />

同一個 ProductCard 可以顯示任何商品。

State

State 是元件記住的資訊，會在應用程式執行時改變，例如選單是否展開、搜尋框裡輸入了什麼、購物車裡有幾件商品。當 state 改變時，React 會重新渲染該元件，讓畫面與資料一致。

Hooks

Hooks 是名稱以 use 開頭的函式，例如 useState（記住一個值）和 useEffect（在渲染後執行程式碼，例如抓取資料）。你會在 AI 產生的 React 程式碼中到處看到它們。

實例：購物車計數器

假設你的線上商店有一個「加入購物車」按鈕，以及一個顯示商品數量的購物車圖示。在 React 中大致會像這樣：

import { useState } from "react";

function Shop() {
  const [cartCount, setCartCount] = useState(0);

  return (
    <div>
      <CartIcon count={cartCount} />
      <ProductCard
        name="Lavender Candle"
        price={24}
        onAdd={() => setCartCount(cartCount + 1)}
      />
    </div>
  );
}

function CartIcon({ count }) {
  return <span>Cart ({count})</span>;
}

function ProductCard({ name, price, onAdd }) {
  return (
    <div>
      <h2>{name}</h2>
      <p>${price}</p>
      <button onClick={onAdd}>Add to cart</button>
    </div>
  );
}

當顧客點擊「加入購物車」時會發生什麼事：

1. 按鈕的 onClick 呼叫 onAdd，而 onAdd 再呼叫 setCartCount。
2. React 把 cartCount 這個 state 從 0 更新為 1。
3. React 重新渲染 Shop，並將 count={1} 傳入 CartIcon。
4. 頁面現在顯示「Cart (1)」。沒有人寫程式去說「找到購物車文字並改掉它」，畫面是跟著資料走的。

但也要注意它的限制。這個數字存在瀏覽器的記憶體中。重新整理頁面後，它會回到 0。要保留購物車，你需要把它存到持久的地方，例如 cookie、瀏覽器儲存空間，或是透過後端存進資料庫。React 負責畫面，它並不會儲存你的資料。

React 在網頁應用程式中的位置

「Vite + React」應用程式是在瀏覽器中渲染（單頁應用程式）。Next.js 應用程式則可以先在伺服器上渲染頁面，有助於搜尋引擎並提升首次載入速度。

常見術語說明

常見錯誤與迷思

• 「React 是一種程式語言。」 它是以 JavaScript（或 TypeScript）撰寫並在其中使用的函式庫。
• 「React 會儲存我的資料。」 State 存在瀏覽器中，重新整理就會消失。需要長期保存的資料必須使用後端與資料庫。
• 把機密放進 React 程式碼。 React 應用程式中的所有內容都會傳送到訪客的瀏覽器，放在那裡的 API 金鑰等同公開。請把它們保留在伺服器上。
• 「React 應用程式無法在搜尋中排名。」 僅在客戶端渲染對搜尋較不利，但預先渲染或伺服器端渲染能解決大部分問題。
• 超大型元件。 一個 1,000 行的元件，無論是人還是 AI 都很難安全地修改。請要求拆分成較小的元件。
• 以為 React 網頁應用程式就是手機應用程式。 它在瀏覽器中執行，包括在手機上，但它不是 App Store 的應用程式。

可以向 AI 建構工具要求的事項

• 「把這個頁面拆分成小型且有名稱的元件，並告訴我每個元件位於哪個檔案。」
• 「讓 ProductCard 元件可以重複使用，並以 name、price 和 image 作為 props。」
• 「把購物車儲存到資料庫，讓它在重新整理後仍然保留。」
• 「所有 API 金鑰都保留在伺服器上；React 程式碼應該呼叫我們自己的 API。」
• 「為來自伺服器的資料加入載入中與錯誤狀態。」
• 「如果這些頁面的搜尋能見度很重要，請預先渲染它們，或使用伺服器端渲染的架構。」
• 「用白話文解釋這個錯誤的意思，以及它來自哪個元件。」

若要了解更全面的架構，請參閱前端與後端；若要檢視 AI 寫出的程式碼，請參閱如何檢視 AI 產生的程式碼。

Mythex 中的 React

除非你另外指定，Mythex 會以 Vite + React + TypeScript + Tailwind 開始新專案，並在你聊天時執行即時預覽。你可以在第一則提示詞中指定其他架構，例如「使用 Next.js」或「單純的靜態 HTML 登陸頁」，Mythex 會根據你的描述來選擇；目前沒有相關的設定畫面。技術選擇方式的文件頁面說明了各種選項。程式碼編輯器在免費方案中為唯讀；在 Pro 方案中，你可以直接編輯 React 程式碼，並將專案匯出，在其他地方繼續開發。

常見問題