每个开发人员都应该使用的可扩展和可维护的 React 项目结构。
每个开发人员都应该使用的可扩展和可维护的 React 项目结构。
image by @jcomb freepik
一个好的项目结构可以对项目在理解代码库、灵活性和维护方面的成功程度产生巨大影响。没有良好结构和维护的项目很快就会变成一团糟和可怕的遗产，没有人愿意与之合作。
现在，我将向您展示我在项目中经常使用的结构，并解释其背后的原因。这种结构应该是大型应用程序的一个很好的起点，您可以根据项目的需要对其进行扩展。这是我可以为大多数项目推荐的 src 结构：
让我们从上到下覆盖文件夹。
api
首先，我们有 api 文件夹，其中将包含我们应用程序的 API 层。它将具有负责执行 API 请求和与服务器通信的方法。
资产
资产文件夹包含 字体 , 图片， 和 视频 .在里面 字体 ，您可以保留任何自定义字体和字样。在图像中存储在整个应用程序中使用的任何图片。
成分
components 目录包含两个目录： 常见的 和 过渡 .这 常见的 目录将包含在整个应用程序中常用的任何可重用组件。例如， 纽扣 , 表单组件 , 相关的组件 排版 ， 等等。任何不符合要求的组件 常见的 将被放置在 过渡 成分。
挂钩
这 挂钩 顾名思义，目录将包含任何自定义和可重用的钩子。请注意，任何不是真正可重用但与特定功能耦合的钩子都应放置在与该功能相同的目录中。例如，假设我们有一个 通讯表单组件 包含用于为用户注册时事通讯的表单。这个组件可以使用一个名为 使用时事通讯注册 这将处理注册用户。像这样的钩子不应该放在全局中 src/钩子 目录，而是在本地，因为它耦合到 通讯表格 零件。这是它的样子：
最好保持与使用它的地方尽可能紧密耦合的逻辑。这样，我们就不会在全局中不必要地添加更多代码 挂钩 应该只包含可重复使用的钩子的文件夹。这同样适用于其他功能，例如 帮手 , 服务 ， ETC。
语境
上下文目录应包含任何全局级上下文状态提供程序。
布局
布局 目录，顾名思义，应该包含为您的页面提供不同布局的组件。例如，如果您正在构建仪表板应用程序，您可以根据用户是否登录来呈现不同的布局。
配置
在里面 配置 目录，您可以放置应用程序和第三方服务的任何运行时配置文件。例如，如果您使用类似的服务 Firebase 或 OIDC 进行身份验证 ，您将需要添加配置文件并在您的应用程序中使用它们。只需确保不要将配置与环境变量混淆，因为此处的任何内容都将存在于构建包中。
常数
您可以在此处放置在整个应用程序中使用的任何常量变量。将常量大写以将它们与应用程序中的其他变量和本地化常量区分开来是一种很好的做法。
下面是一些定义和使用常量的例子：
-
单独定义常量
-
在一个对象中定义相关常量
帮手
任何实用程序和小型可重用函数都应该放在这里——例如，格式化日期、时间等的函数。
国际
该目录是可选的。如果应用程序需要内部化支持，请添加它。 Intl，也称为 i18n，是关于以适合用户区域设置的格式显示应用程序的内容。此内容可以包括但不限于翻译文本或日期、时间和货币的特定格式。例如，虽然英国使用 DD/MM/YYYY 格式，但美国使用 MM/DD/YYYY。
服务
在较大的应用程序中，我们可能会在几个不同的地方使用复杂的业务逻辑代码。像这样的代码很适合从组件中提取并放置在其他地方，而服务文件夹是一个很好的候选者。
店铺
store 文件夹负责与全局状态管理相关的文件。有许多状态管理解决方案可用于 React 项目，例如 Redux，状态，Jotai ，还有更多。
风格
您可以将全局样式、变量、主题样式和覆盖放在样式文件夹中。
类型
在这里您可以放置任何全局和可共享的类型。使用这种方法，您可以节省时间并更轻松地共享您和您的团队需要的 TypeScript 代码和类型。
意见
通常，views 目录只包含路由/页面组件。例如，如果我们有一个允许用户查看产品的页面，我们将有一个组件 产品.tsx 在views文件夹中，对应的路由可能是这样的：
<Route path=”/projects” element={<Products /> } />
不过，我说“通常”是有原因的。许多应用程序在 意见 ，而它的其余组件都放在 components 文件夹中。这种方法适用于中小型应用程序，但当页面和组件的数量增加时，管理和维护起来会更加困难。
概括
选择正确的文件夹结构并非易事。您需要就适合应用程序的结构与团队达成一致，什么可能适合一种需求，可能不适合另一种需求。希望在未来几年内有效。您会采取哪些不同的措施来确保良好的、可维护的结构？请在下面的评论中告诉我。
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明
