简单的 React 文件夹结构

所以你已经完成了所有教程，并且已经运行了那些生成命令，那么下一步是什么？大多数情况下，在生成新的 React 项目后，开发人员不知道将代码放在哪里或组织在哪里。

在对不同的 React 项目进行一些研究和反复试验之后，我找到了最适合我和我的团队的文件夹结构。

本文仅代表个人观点，欢迎根据自身情况进行调整。以下是我组织 React 应用程序的方式：

.
├── README.md
├── package.json
├── tsconfig.json
├── public/
└── src/
    ├── index.tsx
    ├── routes.ts
    ├── api/
    ├── assets/
    ├── config/
    ├── containers/
    ├── context/
    ├── types/
    ├── utils/
    └── components/
        └── common/

以下是每个项目或文件夹的简要概述。

src/- 包含我们所有的 React 代码库。
index.tsx- 基本 React 组件。如果您不使用 TypeScript，只需将其更改为“index.js”或“index.jsx”。
routes.ts- 应用导航。如果您不使用 TypeScript，只需将其更改为“routes.js”。
api/- API 调用相关功能。
assets/- 图像、字体和其他静态文件。
config/- 配置文件
containers/-智能组件
context/- React 上下文
types/- TypeScript 相关文件或功能。
utils/- 辅助函数
components/-哑组件
components/common/- 共享组件

您可以在此处查看此文件夹结构。如果您也在 React 应用程序中使用 Redux，可以在此处
查看其结构。我也已使用 React Native 应用程序实现了它，请在此处 查看。

包起来

如果您有任何问题或建议，请在下面的评论中留言。

谢谢阅读。