什麼是 React？非技術人士嘅白話指南

React 係一個用嚟建構用戶介面嘅 JavaScript 函式庫，即應用程式入面人哋睇到同撳到嘅部分。你會用一啲可重用嘅組件（例如一個按鈕、一張產品卡，或者整個頁面）去組合畫面，而 React 會令畫面同你嘅數據保持同步：數據改變時，React 就會更新頁面上依賴該數據嘅部分。佢由 Facebook（而家係 Meta）創立，屬開源項目，而且係最廣泛使用嘅網頁應用程式建構方式之一。

用 AI 建造嘢時，點解佢重要

如果你用 AI 工具建造網頁應用程式，佢好有可能係以 React 寫成嘅。好多 AI 應用程式建構器預設就用 React，因為佢受歡迎、文件完整，而且有大量 React 程式碼俾 AI 模型學習。

用 AI 建造嘢，你唔需要自己寫 React。但識少少，會對你有幫助：

• 精準描述改動。 「將 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 狀態由 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 程式碼，並將專案匯出，喺其他地方繼續工作。

常見問題