React 專案的檔案結構

整體結構來源於外網大佬的一篇文章：Delightful React File/Directory Structure，略有修改，使用了一段時間，覺得還不錯。

整體預覽#

index.js#

你可能已經注意到了，每個 component 的文件夾下都會有一個 index.js，它的內容類似於：

export * from './App'
export { default } from './App'

會把組件的模塊重新導出，所以為什麼不把組件代碼都放在 index 裡？因為如果所有的組件都需要從 index 文件導入，那麼各種 index 將會充滿我們的編輯器，查看它們就會變得非常難受。

而且如果沒有進行重新導出，導入 App 組件就需要這樣寫：

import App from '../App/App'

通過 index 文件 “重定向”，我們可以將其縮短為：

import App from '../App'

components#

一個示例組件結構如下：

src/
└── components/
    └── FileViewer/
        ├── Directory.js
        ├── File.js
        ├── FileContent.js
        ├── FileViewer.helpers.js
        ├── FileViewer.js
        ├── index.js
        └── Sidebar.js

hooks#

hooks 文件夾用來存儲項目通用的 hook。

如果 hook 特定於一個組件使用，就把它放在該組件的文件夾下。

我一般會使用這種命名方式 use-worker.hook.js：

烤肉串式 kebab-case 而不是駝峰式
在文件名中加上 .hook

當然你也可以使用常規的 useWorker.js 命名方式。

helpers#

helpers 文件夾用來存儲項目通用的 helper 函數，也就是特定於項目的輔助函數。

如果函數特定於一個組件使用，那就把它放在該組件的文件夾下，就像 FileViewer.helpers.js 這樣。

utils#

utils 文件夾用來存儲項目無關的實用程序，你可以把它理解為僅限於個人使用的 lodash 庫。

constants#

constants 文件夾用來存儲項目的公共常量，其中大部分與樣式相關。

當然如果常量特定於組件，你也可以把它放在組件文件夾下，就像 App.constants.js 一樣。

pages#

如果你使用 Next.js 這種包含路由的框架，就會有 pages 文件夾。