在 React 專案中組織文件和目錄對於可維護性、可擴充性和易於導航至關重要。本文探討了不同規模的 React 專案的一般架構和資料夾結構，為每個層級提供了清晰的演示。
第 1 種：依「檔案類型」分組
這種結構的特點是簡單 - 按文件類型對文件進行分組：
└── src/
├── actions/
├── assets/
├── components/
│ ├── Dialog.tsx
│ ├── DistributionGraph.tsx
│ ├── Employees.tsx
│ ├── PaymentForm.tsx
│ └── HoorayDialog.tsx
├── helpers/
├── reducers/
├── storage/
├── store/
└── utils/- 專案規模：小型至中型
- 優點：
- 簡單明了
- 缺點：
- 會迅速膨脹並變得難以維護
- 業務關注點沒有分離
假設您有很多與付款相關的程式碼。有一天，整個業務發生變化或不再需要，更換或刪除它有多容易？使用此資料夾結構，您必須檢查每個資料夾及其中的檔案才能進行必要的變更。如果專案不斷擴大，它很快就會變成維護地獄，隨著時間的推移只會變得更糟。
第 2 種：按「檔案類型」和功能分組
隨著專案的成長，「2 級」結構引入了按每種類型中的功能進行分組：
└── src/
├── actions/
├── assets/
├── components/
│ ├── auth/
│ │ └── SignUpForm.tsx
│ ├── payment/
│ │ └── PaymentForm.tsx
│ ├── common/
│ │ └── Button.tsx
│ └── employees/
│ ├── EmployeeList.tsx
│ └── EmployeeSummary.tsx
├── helpers/
├── reducers/
└── services/- 專案規模：中型到大型
- 優點：
- 簡單明了
- 內容按功能分組
- 缺點：
- 與功能相關的邏輯仍然分佈在多個資料夾類型中
現在讓我們回到需要修改或刪除支付模組的問題陳述。有了這個結構，現在做起來就容易多了。
「2 級」資料夾結構是我為大多數專案推薦的結構。
第 3 種：依功能/模組分組
對於較大的專案，「3 級」結構提供了高度模組化的方法，為每個模組內應用程式的不同方面定義了清晰的邊界：
└── src/
├── assets/
├── modules/
| ├── core/
│ │ ├── components/
│ │ ├── design-system/
│ │ ├── hooks/
│ │ ├── persistence/
│ │ └── utils/
│ ├── payment/
│ │ ├── components/
│ │ ├── hooks/
│ │ ├── utils/
│ │ └── services/
│ ├── auth/
│ │ ├── components/
│ │ ├── hooks/
│ │ ├── utils/
│ │ └── services/
│ └── employees/
│ ├── components/
│ │ ├── EmployeeList.tsx
│ │ └── EmployeeSummary.tsx
│ ├── design-system/
│ ├── hooks/
│ ├── lib/
│ └── utils/
└── - 專案規模：大型且複雜
- 優點：
- 內容按功能/模組清晰地分組
- 特徵/模組是現實世界中物件的清晰表示
- 缺點：
- 您必須充分了解業務邏輯才能做出正確的分組決策
有了這個，如果您要刪除或修改支付邏輯，您將立即知道從哪裡開始。
為資料夾名稱賦予一致的含義
無論結構層級如何，某些資料夾名稱都應具有特定的含義。資料夾名稱的含義可能會根據您的偏好或專案的約定而有所不同。
以下是我通常對資料夾名稱的看法：
-
Components ：React 元件 - 主要的 UI 建構塊。
-
design-system ：基於設計系統的基本 UI 元素和模式。
-
icon ：用於內嵌使用的 SVG 圖示。
-
hooks ：用於共享邏輯的自訂 React 鉤子。
-
hocs ：反應高階元件。
-
contexts / providers ：包含 React Contexts 和 Providers。
-
utils ：與業務邏輯或任何技術無關的通用邏輯實用程序，例如字串操作、數學計算等。
-
lib ：與某些技術相關的實用程序，例如 DOM 操作、HTML 相關邏輯、localStorage、IndexedDB 等。
-
plugins ：第三方插件應該放在這裡（例如 i18n、Sentry 等）
-
services ：封裝主要業務邏輯。
-
helpers ：提供特定於業務的實用程式。
-
styles ：包含（全域）CSS 或 CSS-in-JS 樣式。
-
types ：適用於一般 TypeScript 類型、枚舉和介面。
-
configs ：應用程式的配置（例如環境變數）
-
Constants ：常數，未更改的值（例如
export const MINUTES_PER_HOUR = 60）。 -
api ：用於與伺服器通訊的邏輯。
-
graphql ：GraphQL 特定的程式碼。
-
states 、 reducers 、 store 、 actions 、 selectors ：全域狀態管理邏輯（Redux、Zustand、Valtio、Jotai 等）
-
路線/路由器：定義路線（如果您使用React Router或類似的）。
-
測試：程式碼的單元測試和其他類型的測試。
結論
在 React 專案中選擇正確的資料夾結構至關重要，並且應該基於專案的大小和複雜性。雖然「Level 1」可能足以滿足小型專案的需要，但「Level 2」和「Level 3」為中型和大型專案提供了更有組織性和模組化的結構。就我個人而言，我經常推薦「Level 2」資料夾結構。此外，了解常見資料夾名稱有助於在 React 應用程式中保持一致且直覺的架構。
原文出處：https://dev.to/itswillt/folder-structures-in-react-projects-3dp8
很好的指南，認同