使用 React 構建 Web 應用程式：概念釋出

使用 React 構建現代 Web 應用程式不僅僅涉及編寫元件。從最初的概念到生產部署，每個階段都需要仔細的規劃和正確的工具。本指南將引導您完成 React 應用程式的整個生命週期，並在每個階段提供實用的建議和程式碼示例。

1. 專案規劃和線框圖

在編寫一行程式碼之前，請投入時間進行規劃。定義應用程式的核心功能、使用者流程和資料要求。 Figma、Excalidraw 甚至紙筆草圖等工具可幫助您在實施之前視覺化使用者介面。

主要規劃成果包括：

使用者故事- 定義使用者需要完成什麼
線框圖- 每個螢幕的低保真佈局
資料模型- 識別實體、關係和 API 端點
技術架構- 選擇您的堆疊、託管和第三方服務
MVP 範圍- 決定版本 1.0 中提供的內容

2. 選擇 React 框架

建立 React 應用程式 (CRA)

CRA 是最初的首選引導工具。它在底層提供了 Webpack 的零配置設定。但是，它不再被積極維護，也不建議用於新專案。

Vite

Vite已成為單頁應用的首選。它提供極快的熱模組更換 (HMR) 和由 Rollup 支援的精益構建流程。

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

Next.js

對於需要伺服器端渲染 (SSR)、靜態站點生成 (SSG) 或 API 路由的應用程式，Next.js 是行業標準。它提供基於檔案的路由、內建影象最佳化和開箱即用的出色效能。

npx create-next-app@latest my-app
cd my-app
npm run dev

選擇 Vite 來實現純 SPA 和客戶端渲染的儀表板。當您需要 SEO、SSR 或全棧框架時，請選擇 Next.js。

3. 元件架構和組成

結構良好的元件是可維護的 React 應用的基礎。請遵循以下原則：

單一職責- 每個元件都應該做好一件事
組合勝於繼承- 透過組合簡單元件構建複雜的 UI
容器/演示分離- 將資料獲取邏輯與渲染分開
託管- 將相關檔案（元件、樣式、測試、型別）放在一起

推薦的專案結構如下所示：

src/
  components/
    Button/
      Button.jsx
      Button.test.jsx
      Button.module.css
      index.js
    Header/
      Header.jsx
      Header.test.jsx
  features/
    auth/
      LoginForm.jsx
      useAuth.js
      authSlice.js
    dashboard/
      Dashboard.jsx
      DashboardCard.jsx
  hooks/
    useLocalStorage.js
    useDebounce.js
  utils/
    formatDate.js
    api.js

4. React Hooks 深入研究

Hook 是現代 React 開發的支柱。深入理解它們對於構建強大的應用程式至關重要。

useState 和 useReducer

使用useState獲得簡單、獨立的狀態值。當狀態邏輯變得複雜或下一個狀態依賴於前一個狀態時，切換到useReducer。

import { useReducer } from 'react';

function reducer(state, action) {
  switch (action.type) {
    case 'increment':
      return { count: state.count + 1 };
    case 'decrement':
      return { count: state.count - 1 };
    default:
      throw new Error('Unknown action');
  }
}

function Counter() {
  const [state, dispatch] = useReducer(reducer, { count: 0 });
  return (
    <div>
      <p>Count: {state.count}</p>
      <button onClick={() => dispatch({ type: 'increment' })}>+</button>
      <button onClick={() => dispatch({ type: 'decrement' })}>-</button>
    </div>
  );
}

useEffect 和 useLayoutEffect

使用useEffect實現資料獲取、訂閱和 DOM 突變等副作用。僅當您需要在瀏覽器繪製之前測量或改變 DOM 時，才使用useLayoutEffect。

useMemo 和 useCallback

這些掛鉤分別記憶值和函式。在將回撥傳遞給最佳化的子元件或計算昂貴的派生值時使用它們。不要過度使用它們 - 過早的最佳化會增加複雜性，而不會帶來可衡量的好處。

自定義掛鉤

將可重用邏輯提取到自定義掛鉤中。這是 React 最強大的模式之一：

function useLocalStorage(key, initialValue) {
  const [value, setValue] = useState(() => {
    const stored = localStorage.getItem(key);
    return stored ? JSON.parse(stored) : initialValue;
  });

  useEffect(() => {
    localStorage.setItem(key, JSON.stringify(value));
  }, [key, value]);

  return [value, setValue];
}

5. 狀態管理

選擇正確的狀態管理方法取決於應用程式的複雜性。

React 上下文

上下文內建於 React 中，適用於主題、身份驗證狀態和區域設定等低頻更新。避免將其用於頻繁更改的資料，因為每個消費者都會在每次上下文值更改時重新渲染。

Redux 工具套件

Redux 工具套件極大地簡化了 Redux。它是具有複雜互連狀態的大型應用程式的最佳選擇：

import { createSlice, configureStore } from '@reduxjs/toolkit';

const todosSlice = createSlice({
  name: 'todos',
  initialState: [],
  reducers: {
    addTodo: (state, action) => {
      state.push({ id: Date.now(), text: action.payload, done: false });
    },
    toggleTodo: (state, action) => {
      const todo = state.find(t => t.id === action.payload);
      if (todo) todo.done = !todo.done;
    },
  },
});

export const store = configureStore({
  reducer: { todos: todosSlice.reducer },
});

Zustand

Zustand 提供了一個輕量級、基於鉤子的儲存，並且具有最少的樣板。它非常適合中型應用：

import { create } from 'zustand';

const useStore = create((set) => ({
  count: 0,
  increment: () => set((s) => ({ count: s.count + 1 })),
  decrement: () => set((s) => ({ count: s.count - 1 })),
}));

6. 使用 React 路由器進行路由

對於 SPA，React 路由器提供宣告式路由。版本 6 引入了帶有巢狀路由和相關連結的簡化 API：

import { BrowserRouter, Routes, Route } from 'react-router-dom';

function App() {
  return (
    <BrowserRouter>
      <Routes>
        <Route path="/" element={<Home />} />
        <Route path="/dashboard" element={<Dashboard />}>
          <Route path="analytics" element={<Analytics />} />
          <Route path="settings" element={<Settings />} />
        </Route>
        <Route path="*" element={<NotFound />} />
      </Routes>
    </BrowserRouter>
  );
}

對於 Next.js 專案，路由是基於檔案系統的，您根本不需要 React 路由器。

7. API 與 React 查詢整合

TanStack 查詢（以前稱為 React 查詢）是伺服器狀態管理的標準。它處理快取、後臺重新獲取、分頁和樂觀更新：

import { useQuery, useMutation, useQueryClient } from '@tanstack/react-query';

function useTodos() {
  return useQuery({
    queryKey: ['todos'],
    queryFn: () => fetch('/api/todos').then(res => res.json()),
    staleTime: 5 * 60 * 1000,
  });
}

function useAddTodo() {
  const queryClient = useQueryClient();
  return useMutation({
    mutationFn: (newTodo) =>
      fetch('/api/todos', {
        method: 'POST',
        body: JSON.stringify(newTodo),
      }),
    onSuccess: () => queryClient.invalidateQueries({ queryKey: ['todos'] }),
  });
}

8. 表單處理

對於超出簡單輸入的表單，請使用表單庫。 React Hook Form 重量輕且高效能：

import { useForm } from 'react-hook-form';

function SignupForm() {
  const { register, handleSubmit, formState: { errors } } = useForm();

  const onSubmit = (data) => console.log(data);

  return (
    <form onSubmit={handleSubmit(onSubmit)}>
      <input {...register('email', { required: 'Email is required' })} />
      {errors.email && <span>{errors.email.message}</span>}
      <input type="password" {...register('password', { minLength: 8 })} />
      <button type="submit">Sign Up</button>
    </form>
  );
}

9. 使用 Jest 和 React 測試庫進行測試

測試可確保您的應用程式正常工作並在您進行更改時繼續工作。 React 測試庫鼓勵以使用者與其互動的方式測試元件：

import { render, screen, fireEvent } from '@testing-library/react';
import Counter from './Counter';

test('increments counter on button click', () => {
  render(<Counter />);
  const button = screen.getByRole('button', { name: /increment/i });
  fireEvent.click(button);
  expect(screen.getByText(/count: 1/i)).toBeInTheDocument();
});

圍繞使用者行為而不是實現細節構建測試。測試使用者所看到和所做的事情，而不是內部元件狀態。

10. CI/CD 管道

使用 CI/CD 管道自動化構建、測試和部署過程。 React 應用程式的典型 GitHub Actions 工作流程：

name: CI/CD
on:
  push:
    branches: [main]
  pull_request:
    branches: [main]

jobs:
  build-and-test:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v4
      - uses: actions/setup-node@v4
        with:
          node-version: 20
          cache: 'npm'
      - run: npm ci
      - run: npm run lint
      - run: npm test -- --coverage
      - run: npm run build

11. 部署

部署位置取決於您的框架選擇和基礎設施要求。

Vercel

Vercel 是 Next.js 應用的最簡單選擇。連線您的 Git 儲存庫，Vercel 會自動處理構建、預覽和生產部署。每個拉取請求都會獲得一個預覽 URL。

AWS

如需更多控制，請使用 S3 + CloudFront（用於靜態 SPA）或 ECS/Fargate（用於伺服器渲染應用程式）等服務部署到 AWS。 AWS Amplify 提供與 Vercel 類似的託管託管體驗。

Docker

將您的應用程式容器化，以實現跨環境的一致部署：

FROM node:20-alpine AS builder
WORKDIR /app
COPY package*.json ./
RUN npm ci
COPY . .
RUN npm run build

FROM node:20-alpine AS runner
WORKDIR /app
COPY --from=builder /app/.next ./.next
COPY --from=builder /app/node_modules ./node_modules
COPY --from=builder /app/package.json ./
EXPOSE 3000
CMD ["npm", "start"]

12. 效能監控

應用程式投入生產後，請監控其效能以儘早發現迴歸情況。

核心 Web Vitals- 使用 Google Lighthouse 或web-vitals庫等工具跟蹤 LCP、FID 和 CLS
錯誤跟蹤- 使用 Sentry 或 Bugsnag 捕獲和診斷執行時錯誤
分析- 實施事件跟蹤以瞭解使用者行為
捆綁包分析- 執行npx webpack-bundle-analyzer或npx vite-bundle-visualizer以識別較大的依賴性

React DevTools Profiler 可幫助識別開發期間不必要的重新渲染。有策略地使用React.memo、useMemo和useCallback來最佳化熱路徑。

結論

構建生產型 React 應用程式是一個經歷規劃、架構、實施、測試和部署的過程。每個階段都建立在前一個階段的基礎上。從一個可靠的計劃開始，根據您的要求選擇正確的工具，編寫乾淨且可組合的元件，徹底測試，自動化您的管道，並在生產中進行監控。 React 生態系統成熟且得到良好支援 - 利用其優勢，您將充滿信心地交付可靠、高效能的 Web 應用程式。