今天我們要來聊聊如何管理React專案，好的專案結構可以讓其他開發者很清楚該去哪邊找到檔案。

為什麼專案結構很重要？

好的專案結構有助於提升程式的可讀性和維護性，讓團隊成員能夠快速理解程式邏輯，減少出錯機率。同時，清晰的架構能讓開發、測試及擴展功能更加高效。反之，糟糕的專案結構不僅會增加後續維護的難度，也可能導致程式難以擴充、排錯困難，進而影響專案進度和品質。

理想的React專案結構

讓我們來看看一個理想的React專案結構會長什麼樣子：

my-react-app/
├── src/
│   ├── components/          # 可重用的UI組件
│   │   ├── Button/
│   │   │   ├── Button.tsx
│   │   │   ├── Button.test.tsx
│   │   │   └── Button.module.css
│   │   └── ...
│   ├── pages/               # 頁面級組件
│   │   ├── Home/
│   │   │   ├── Home.tsx
│   │   │   └── Home.test.tsx
│   │   └── ...
│   ├── hooks/               # 自定義Hooks
│   ├── utils/               # 工具函數
│   ├── services/            # API相關的服務
│   ├── contexts/            # React contexts
│   ├── types/               # TypeScript類型定義
│   ├── styles/              # 全局樣式
│   └── App.tsx              # 主應用組件
├── public/                  # 靜態資源
├── tests/                   # 端到端測試
├── .eslintrc.js             # ESLint配置
├── .prettierrc              # Prettier配置
├── jest.config.js           # Jest配置
├── tsconfig.json            # TypeScript配置
└── package.json             # 項目依賴和腳本

這個結構有以下幾個優點：

1. 組件化: 所有UI組件都放在 components 資料夾中，方便重用。
2. 頁面分離: 頁面級組件放在 pages 資料夾。
3. 邏輯分離: 自定義Hooks、工具函數和服務都有各自的資料夾。
4. 類型安全: TypeScript類型定義集中管理。
5. 測試友好: 每個組件旁邊都有對應的測試文件。

在package.json中設置腳本

讓我們來看看如何在 package.json 中設置一些有用的腳本：

{
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject",
    "lint": "eslint src/**/*.{js,jsx,ts,tsx}",
    "lint:fix": "eslint src/**/*.{js,jsx,ts,tsx} --fix",
    "format": "prettier --write src/**/*.{js,jsx,ts,tsx,css,md}",
    "type-check": "tsc --noEmit",
    "validate": "npm run lint && npm run type-check && npm run test"
  }
}

這些腳本讓你可以：

• 啟動開發伺服器 (npm start)
• 建置生產版本 (npm run build)
• 運行測試 (npm test)
• 檢查程式碼風格 (npm run lint)
• 自動修復程式碼風格問題 (npm run lint:fix)
• 格式化程式碼 (npm run format)
• 檢查TypeScript類型 (npm run type-check)
• 一次執行所有驗證 (npm run validate)

ESLint和Prettier：

ESLint 和 Prettier 是保持程式碼品質和一致性的工具。
ESLint 是一個靜態程式碼分析工具，主要用來確保 JavaScript 程式碼符合既定的規範，幫助開發者發現並修正潛在的錯誤。它能夠統一團隊的編碼風格，避免程式碼中存在不一致的寫法或潛在的問題，從而提升程式碼的品質和可維護性。

Prettier 則是一個程式碼格式化工具，專注於自動統一程式碼的排版和格式。Prettier 可以根據既定的規則，無論是空格、縮排還是標點符號，確保程式碼在不同開發環境中保持一致，減少不必要的程式碼審查問題，讓開發者能專注於程式碼的邏輯本身。

在 .eslintrc.js 中，你可以這樣配置 ESLint：

module.exports = {
  extends: [
    'react-app',
    'react-app/jest',
    'plugin:@typescript-eslint/recommended',
    'prettier'
  ],
  plugins: ['@typescript-eslint', 'react-hooks'],
  rules: {
    'react-hooks/rules-of-hooks': 'error',
    'react-hooks/exhaustive-deps': 'warn'
  }
};

而在 .prettierrc 中，你可以這樣配置 Prettier：

{
  "singleQuote": true,
  "trailingComma": "es5",
  "tabWidth": 2,
  "semi": true,
  "printWidth": 100
}

測試：

在React專案中，我們主要用 Jest 和 React Testing Library 來寫測試。透過這些工具，我們可以有效地檢查程式碼的運作是否符合預期，並確保應用程式在各種情境下都能正常運行，進而提高專案的穩定性和可靠性。

以下是一個簡單的測試例子：

// src/components/Button/Button.test.tsx
import React from 'react';
import { render, screen } from '@testing-library/react';
import userEvent from '@testing-library/user-event';
import Button from './Button';

test('按鈕可以被點擊', () => {
  const handleClick = jest.fn();
  render(<Button onClick={handleClick}>點我</Button>);
  
  userEvent.click(screen.getByText('點我'));
  expect(handleClick).toHaveBeenCalledTimes(1);
});

小結

今天我們學習了如何組織 React 專案結構、設置實用的 npm 腳本，並使用 ESLint、Prettier 和 Jest 來確保程式碼的品質與功能的正確性。請記住，良好的專案結構和工具設置不僅能提升開發效率，也能確保程式碼的穩定性。

保持程式碼整潔有序需要持續的投入，雖然過程可能有些繁瑣，但這一切都非常值得。一個結構良好的專案不僅能提升個人的工作效率，也能促進團隊間的協作順暢，讓開發過程更加順利。

如果你想更深入地了解React專案的最佳實踐，可以查看 React官方文件 和 Create React App的文件。