第 1 章：React 簡介與前端開發環境回顧

1.1 什麼是 React？為什麼選擇 React？

歡迎來到 React 的世界！React 是一個由 Facebook (現在是 Meta) 開發並維護的 JavaScript UI 函式庫，專注於幫助開發者建立可複用、高效能的使用者介面 (User Interfaces, UI)。

  • UI 函式庫，而非框架：React 主要關注 UI 的呈現層。這意味著您可以將 React 整合到現有的專案中，或者配合其他函式庫 (如路由管理、狀態管理) 來建構完整的單頁應用程式 (Single Page Applications, SPA)。
  • 聲明式編程：在 React 中，您只需要描述 UI 應該長什麼樣子 (聲明您想要的結果)，React 會負責更新 DOM 並確保 UI 與您的描述保持一致。這與命令式編程 (手動操作 DOM 元素) 形成對比，使得程式碼更易於理解和預測。
  • 元件化：這是 React 最核心的概念之一。您可以將 UI 拆分成獨立、可複用的 "元件 (Components)"。每個元件都有自己的邏輯和外觀，就像是樂高積木一樣，您可以將它們組合成複雜的 UI。

為什麼選擇 React？

  • 高效能：React 使用 "虛擬 DOM (Virtual DOM)" 技術。當應用程式狀態改變時，React 會先在記憶體中計算出 UI 的變化，然後只更新實際 DOM 中需要改變的部分，大大減少了直接操作 DOM 的開銷，提升了渲染效能。
  • 元件化架構：使得程式碼更易於管理、維護和複用。大型應用程式可以由許多小型、獨立的元件構成。
  • 龐大的社群與生態系統：React 擁有非常活躍的開發者社群和豐富的第三方函式庫、工具支援，遇到問題很容易找到解決方案，也有大量現成的輪子可以用。
  • JSX 語法：雖然初看可能有些不習慣，但 JSX 允許您在 JavaScript 中編寫類似 HTML 的結構，使得 UI 描述更直觀。
  • 單向資料流：資料在 React 應用中通常是單向流動的 (父元件到子元件)，這使得資料流更清晰，更容易追蹤和除錯。
  • 由 Meta 維護：背後有大公司的支援，保證了其長期發展和穩定性。
  • 跨平台能力：透過 React Native，您可以使用 React 的知識來開發 iOS 和 Android 原生應用程式。

1.2 React 的核心特性

讓我們更深入地了解 React 的幾個核心特性：

  • 元件化 (Component-Based)：

    • 您可以將 UI 分割成獨立的、可重用的程式碼片段，稱為元件。
    • 一個元件可以是一個簡單的按鈕，也可以是一個複雜的表單或整個頁面。
    • 元件可以嵌套，形成元件樹，構成完整的應用程式 UI。
    • 每個元件管理自己的狀態 (state) 和外觀，使得開發和維護更加模組化。

  • 虛擬 DOM (Virtual DOM)：

    • DOM (Document Object Model) 是瀏覽器中 HTML 文件的樹狀結構表示。直接操作 DOM 通常是耗效能的。
    • React 在記憶體中維護一個輕量級的 DOM 表示，稱為虛擬 DOM。
    • 當元件的狀態改變時，React 會建立一個新的虛擬 DOM 樹。
    • 然後，React 會比較新的虛擬 DOM 樹與舊的虛擬 DOM 樹 (這個過程稱為 "Diffing" 或 "Reconciliation")，找出差異之處。
    • 最後，React 只會將這些差異更新到實際的瀏覽器 DOM 中，這個過程稱為 "Patching"。
    • 這種機制有效地減少了對實際 DOM 的操作次數，提高了應用程式的渲染效能。

  • 單向資料流 (One-Way Data Binding / Unidirectional Data Flow)：

    • 在 React 中，資料通常是從父元件透過 props (屬性) 向下流動到子元件。
    • 子元件不能直接修改從父元件接收到的 props。
    • 如果子元件需要改變某些資料，它通常需要通知父元件 (例如透過回呼函式)，由父元件來更新狀態，然後新的狀態再向下傳遞。
    • 這種單向的資料流使得資料的變化更容易追蹤和理解，降低了複雜性，便於除錯。

1.3 前端開發環境回顧

在我們開始編寫 React 程式碼之前，確保您的開發環境已經準備就緒。這部分是對「學習計畫：0. 專案基礎與環境設定」中內容的回顧。

  • Node.js 與 npm/pnpm：

    • Node.js：是一個 JavaScript 執行環境，它允許您在瀏覽器之外執行 JavaScript 程式碼。React 開發工具鏈 (如 Vite、Webpack、Babel) 都依賴 Node.js。
    • npm (Node Package Manager) 或 pnpm (performant npm)：是 Node.js 的套件管理器，用來安裝、管理專案的依賴函式庫 (如 React 本身、各種工具等)。@memos 專案使用 pnpm。
    • 安裝：請參考 Node.js 官方網站 (nodejs.org) 下載並安裝適合您作業系統的 LTS (長期支援) 版本。安裝 Node.js 後，npm 會一起安裝。pnpm 可以透過 npm install -g pnpm 全域安裝。

  • Vite (發音類似 "veet")：

    • Vite 是一個現代化的前端建置工具，它極大地提升了前端開發體驗。
    • 快速的冷啟動：Vite 利用瀏覽器原生的 ES 模組支援，開發伺服器啟動非常快，無需等待長時間的打包。
    • 即時的熱模組替換 (HMR)：當您修改程式碼時，Vite 的 HMR 能夠幾乎即時地在瀏覽器中更新變更，而不會丟失應用程式的狀態。
    • 優化的建置：對於生產環境，Vite 使用 Rollup 進行打包，可以進行程式碼分割、Tree-shaking 等優化。
    • @memos 專案的前端部分使用 Vite。

1.4 建立您的第一個 React 應用程式 (使用 Vite)

讓我們使用 Vite 快速建立一個新的 React + TypeScript 專案。打開您的終端機 (Terminal) 或命令提示字元 (Command Prompt)，然後執行以下命令：

# 假設您已經安裝了 Node.js 和 pnpm

# 使用 pnpm 建立 Vite 專案
pnpm create vite my-first-react-app --template react-ts

# 進入專案目錄
cd my-first-react-app

# 安裝依賴
pnpm install

# 啟動開發伺服器
pnpm dev

命令解釋：

  • pnpm create vite my-first-react-app --template react-ts:
    • pnpm create vite: 呼叫 Vite 的專案建立工具。
    • my-first-react-app: 您專案的名稱，可以替換成您喜歡的名稱。
    • --template react-ts: 指定使用 React 和 TypeScript 的專案模板。
  • cd my-first-react-app: 進入剛建立的專案目錄。
  • pnpm install: 安裝專案所需的所有依賴函式庫 (定義在 package.json 中)。
  • pnpm dev: 啟動 Vite 開發伺服器。終端機會顯示一個本地網址 (通常是 http://localhost:5173/ 或類似的)，在瀏覽器中打開它，您就能看到您的第一個 React 應用程式了！

1.5 專案結構概覽

當您使用 Vite 建立 React + TypeScript 專案後，通常會看到類似以下的專案結構：

my-first-react-app/
├── node_modules/      # 存放專案依賴的地方 (由 pnpm 管理)
├── public/            # 存放靜態資源 (例如 favicon.ico, index.html 的模板)
│   └── vite.svg
├── src/               # 應用程式的原始碼
│   ├── assets/        # 存放圖片、字型等資源
│   │   └── react.svg
│   ├── App.css        # App 元件的 CSS 樣式
│   ├── App.tsx        # 主要的 App 元件 (React 元件)
│   ├── index.css      # 全域 CSS 樣式
│   ├── main.tsx       # 應用程式的進入點 (將 React 應用掛載到 DOM)
│   └── vite-env.d.ts  # Vite 的 TypeScript 環境類型定義
├── .eslintrc.cjs      # ESLint 設定檔 (程式碼檢查)
├── .gitignore         # Git 版本控制忽略的檔案
├── index.html         # 應用程式的 HTML 進入頁面
├── package.json       # 專案資訊、依賴列表、腳本命令
├── pnpm-lock.yaml     # pnpm 用來鎖定依賴版本的檔案
├── tsconfig.json      # TypeScript 編譯器設定檔
├── tsconfig.node.json # 給 Node.js 環境的 TypeScript 設定 (例如 Vite 設定檔)
└── vite.config.ts     # Vite 設定檔

核心關注點：

  • index.html: 這是您應用程式的根 HTML 檔案。React 應用通常會掛載到這個 HTML 檔案中的某個 DOM 元素上 (通常是一個 id="root" 的 div)。

  • src/main.tsx: 這是 JavaScript/TypeScript 程式碼的進入點。它會找到 index.html 中的根 DOM 元素，並將您的主 React 元件 (通常是 App) 渲染到該元素中。

    // src/main.tsx 範例
import React from 'react'
import ReactDOM from 'react-dom/client'
import App from './App.tsx'
import './index.css'

ReactDOM.createRoot(document.getElementById('root')!).render(
  <React.StrictMode>
    <App />
  </React.StrictMode>,
)
  • src/App.tsx: 這通常是您應用程式的根元件。您可以從這裡開始組織您的元件樹。

現在您已經對 React 的基本概念和如何啟動一個專案有了初步的了解。在接下來的章節中，我們將深入探討 React 的各個核心特性。

results matching ""

    No results matching ""