我如何构建我的 React /TS 应用程序

（我已经更新了我的反应结构，你可以在这里阅读：https ://dev.to/djamaile/how-i-structure-my-react-ts-applications-2021-145j ）

现在正值暑假，我会做一些业余项目。在我的暑期项目中，我会用 ReactJS 来开发我创建的每个前端项目。我创建了一个样板代码库，可以重复用于每个业余项目。所以，这篇文章的目的是展示我的项目结构，但我对你的项目结构以及你会如何采用不同的结构也很感兴趣。

如果您只想查看代码，请访问：https://github.com/djamaile/react-boilerplate-2020

这是结构的图片：

让我们深入研究文件夹！

📖 API

在 API 文件夹中，我保存了我的 API 路由和 API 调用。此外，我还使用 Axios 创建了一个通用请求函数，可以重复用于 API 请求。

🖼️ 资产

在 assets 文件夹中，我有三个子文件夹。首先是 CSS 文件夹，里面存放着我所有的 in-js-CSS 文件。其次是 images 文件夹，我想这个文件夹本身就说明了一切。最后是 theme 文件夹，这个主题文件夹用于存放 Material-UI。

对于每个 React 项目，我都使用 Material-UI。使用 Material-UI，我们还可以创建自定义主题，这就是我们在主题文件夹中所做的。

🧱 组件

此外，我们还有著名的 components 文件夹。可复用的功能将被放置在 components 文件夹中，并可供 views 文件夹中的功能组件使用。

☂️ 钩子

hooks 文件夹很酷，但基本没用过。我很少自定义 hooks，但还是会保留这个文件夹，以防万一有什么灵光乍现的点子需要用到 hooks 里。

🗺️ 路线

我在 routes 文件夹中保存了我的路由！我觉得我在 routes 文件夹中唯一“奇怪”的地方就是使用了 suspense。我用 suspense 来拆分视图代码。另外，我们使用了 Material-UI 的主题提供程序，这样我们就可以使用在主题文件夹中创建的主题了。

🧪 测试

测试文件夹在那里，但问题是我是否甚至测试......

⌨️ 类型

所以，正如你所知，我使用的是 TypeScript。因此，我有一个名为 types 的文件夹，可以把 TypeScript 类型和接口放进去。Props 类型是唯一例外。它们在组件本身之上声明。

🔨实用程序

我总是在一个组件中创建很多函数。结果，组件会变得非常臃肿。当我感觉到这种情况时，我会将这些函数移到 utils 文件夹中。此外，如果某个函数被其他组件使用，那么它也会被移到 utils 文件夹中。

🗄️ 额外文件

如你所见，我的根目录下仍然有一些文件。重要的文件是 Eslint 和 Prettier 的配置文件。这两个文件扩展了 Airbnb 规则。此外，我在其中也包含自己的规则，对于任何有 Eslint 和 Prettier 使用经验的人来说，设置它们可能相当麻烦。因此，为我做的每个项目预先配置好这些文件，对我来说是救星。

嗯，这就是我的结构。你可能会好奇，你的状态管理文件夹在哪里？我没有创建这些文件夹，因为我一直使用不同的状态管理器。这取决于我当时想用什么。你的结构和我的相比如何？