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 文件夹。