Framework · 2013 年發布

React

React 是以元件建構使用者介面的 JavaScript 函式庫：你宣告介面應有的樣子，React 只更新有變化的部分。

React 是由 Meta（當時的 Facebook）打造、於 2013 年開源的使用者介面函式庫。它把畫面拆成小型的函式元件，每個元件依據收到的 props 和自身持有的狀態（state），以 JSX 描述自己應有的樣子。資料改變時，React 會把新結果與前一次比較，只把真正不同的部分套用到 DOM。

React 特別適合按鈕、表單與清單眾多的互動式畫面。它廣泛用於單頁應用程式、儀表板、後台管理介面與設計系統；以 Next.js 等框架建立伺服器端渲染網站，或用 React Native 開發行動 App 時，也能沿用同一套思考方式。路由、資料請求、測試工具等生態系相當完整，可以依需求挑選組合。

初學者建議先跟著 react.dev 的快速入門與井字遊戲教學動手練習。官方文件建議新產品採用 Next.js 等框架，但在學習階段，用 Vite 建立的簡單專案更容易看懂結構。先熟悉陣列方法、解構賦值、模組等現代 JavaScript 語法，再學 JSX 與 Hooks 會輕鬆許多。

特色

以元件為基礎的設計

把介面拆成獨立的函式元件，透過 props 傳遞資料，再把小元件組合成完整畫面。

使用 JSX 的宣告式 UI

不必手動修改 DOM，只要用 JSX 寫出目前狀態對應的結果，React 就只更新變動的部分。

以 Hooks 管理狀態與副作用

useState、useEffect、useRef、useContext 等 Hooks 讓你在一般函式中處理狀態、副作用、DOM 參照與共用資料。

完整的生態系

搭配 Next.js、React Router、TanStack Query、React Native 等成熟工具，從 Web 到行動裝置都能用相同方式開發。

適用情境

單頁應用程式（SPA）
儀表板與後台管理介面
設計系統與可重複使用的 UI 元件
搭配 Next.js 或 React Native 的 Web 與行動 App

安裝

1
準備 Node.js
React 的開發工具在 Node.js 上執行。從 nodejs.org 安裝 LTS 版本，再確認 node 與 npm 能顯示版本。
```
node --version && npm --version
```
2
用 Vite 建立專案
使用 Vite 的 react-ts 範本建立採用 TypeScript 的 React 專案。只想用 JavaScript 時，把範本名稱改成 react。
```
npm create vite@latest my-app -- --template react-ts
```
3
啟動開發伺服器
進入專案資料夾，安裝相依套件並啟動開發伺服器。在瀏覽器開啟終端機顯示的網址（預設為 http://localhost:5173）。
```
cd my-app && npm install && npm run dev
```

第一個程式

第一個元件

src/App.tsx 裡的 App 函式是一個元件，會回傳描述畫面內容的 JSX。它用 useState Hook 建立 count 狀態，按下按鈕時 setCount 會改變這個值。狀態改變後，React 會重新呼叫 App，只更新畫面上的數字。開發伺服器執行期間，每次儲存檔案瀏覽器都會立即更新。

src/App.tsx

import { useState } from "react";

export default function App() {
  const [count, setCount] = useState(0);

  return (
    <main>
      <h1>Hello, React!</h1>
      <button onClick={() => setCount(count + 1)}>
        Clicked {count} times
      </button>
    </main>
  );
}

npm create vite@latest my-app -- --template react-ts && cd my-app && npm install && npm run dev

常用工具

Vite: 前端建置工具，提供快速的開發伺服器與最佳化的正式版建置，並內建官方 React 專案範本。
React Developer Tools: 瀏覽器擴充功能，可檢視元件樹以及每個元件的 props 與狀態，並分析渲染效能。
ESLint: 程式碼檢查工具。搭配 eslint-plugin-react-hooks 能找出違反 Hooks 規則的寫法與遺漏的 Effect 相依項目。
Vitest: 直接沿用 Vite 設定的測試執行器。與 React Testing Library 搭配，從使用者的角度測試元件。

逐步指南

共六章，帶你從安裝一步步認識 React 的核心概念。

官方文件與參考資料

使用的語言

討論

發起討論

在這裡提問、分享經驗，交流關於 React 的看法。

還沒有討論。來發起第一則吧。

特色