React项目文件夹结构

只是想展示一下我目前偏好的 React 项目文件夹结构。我认为这种结构能很好地展示和划分我的 React 项目文件。

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

1. api-config

api-config此文件夹包含 API 端点文件，不包含任何逻辑。这样做是为了将所有 API URL 端点集中在一个地方，避免它们分散在各个组件中，尤其是在 useEffects 方法中。

2. 资产

assets文件夹主要包含图像（.png、 .svg 等）以及可能需要的任何其他静态文件。

3. 常见

common文件夹被细分为更多与 React 相关的文件夹。

components文件夹由各个独立的组件构成，这些组件本质上是原子性的，不与其他组件相互连接。

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

4. 常量

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

5. 模块

modules文件夹包含 React 组件，这些组件由在 `<component>` 下定义的更小的组件组​​成common/components。例如，一个<Header />组件可能如下所示：

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

6.页

pages这是路由的一对一映射。这类似于NextJS`or`的概念GatsbyJs。
这是一个更大的 React 组件，它呈现一个完整的页面。它可能包含额外的路由，因此会有更多嵌套页面。例如，仪表盘页面可能看起来像这样（在其最简形式中）：

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

7. 存储或全局上下文

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

顺便提一下，如果你还没用过ZustandReact Redux，不妨试试看。它是一个非常简单易用的状态管理系统，而且你不需要把组件包裹在 ` .Zustand`Provider里。

8.测试

Test文件夹。而且请不要只是敷衍了事。编写它很有趣，并且在重构过程中真的能帮到你（比 TypeScript 更有帮助…… :P）。React
-testing-library

9. 工具

其他东西都可以放进去（……真的不要，请不要这样做）。
常用的实用函数应该放在这个文件夹里。

10.路线

包含所有根级路由的文件夹。

尾注

这种文件夹结构在过去一年中不断演变，确实对我的几个大型项目有所帮助。这并不意味着它以后不会再改变，但至少在我的下一个项目中，我会继续使用这种结构。

请告诉我你最近喜欢什么？

下次再见，
库马尔·尼特什
@knitesh
推特：@imknitesh