React 项目文件夹结构

只是想展示一下我目前偏好的 React 项目文件夹结构。我觉得这样可以更好地展示和区分我的 React 项目文件。

让我们浏览 src 文件夹内的每个文件夹。

1. api-config

api-config由包含 API 端点的文件组成。此文件夹不包含任何逻辑。这有助于将所有 API URL 端点集中存放在同一个位置，避免分散在各个组件中，尤其是在 useEffects 内部。

2. 资产

assets文件夹主要由图像（.png， .svg ..）和可能需要的任何其他静态文件组成。

3. 常见

common文件夹分为更多特定于反应的文件夹。

components文件夹由单个组件组成，这些组件本质上是原子的，不组成任何其他组件。

hooks顾名思义，它包含您可以为您的项目开发的自定义钩子

4. 常数

constants顾名思义，它由项目中使用的常量组成

5. 模块

modules文件夹包含 React 组件，这些组件由定义在 下的小组件组成common/components。例如，一个<Header />组件可能看起来像

 <>
   <Title />
   <Image />
   <Menu />
 </>

6. 页面

pages是路由器路由的一对一映射。这类似于NextJS或GatsbyJs的概念。
这是一个更大的 React 组件，用于呈现整个页面。它可能包含额外的路由，因此会包含更多嵌套页面。该页面的一个示例是仪表板页面，其可能如下所示（以简化形式呈现）。

<>
 <PageHeader />
 <PageTopMenu />
 <PageLeftNavigation />
 <VisitorBlockChart />
 <VistorLineChart />
 <SomeOtherAwesomeComponent />
 <PageFooter>
</>

7. 存储或全局上下文

store文件夹包含跨产品使用的全局存储或全局上下文。

另外，如果你还没有用过ZustandReact-Redux 的替代品，不妨试试。它的状态管理系统非常简单易用，而且你不需要把组件包装在.jsProvider中。

8.测试

Test文件夹。请不要只是口头上说说而已。写起来很有趣，而且在重构过程中真的能帮到你（比 TypeScript 更有帮助……:P）
React-testing-library

9. 实用程序

其他所有要转储的内容（……其实不是，请不要这样做）。
将常用的实用函数存储在此文件夹中。

10.路线

一个文件夹包含所有根级路线。

结束语

这个文件夹结构在过去的一年里不断发展，并确实帮助我完成了我当前的几个大项目。这并不意味着它不会再次改变，但至少对于我的下一个项目，我将继续使用这种结构。

请告诉我您最近的喜好是什么？

下次再见
Kumar Nitesh
@knitesh
Twitter: @imknitesh