可扩展应用程序的 React 项目结构最佳实践

这篇文章最初发表于https://www.devaradise.com/react-project-folder-structure

React 项目结构或架构在项目维护中起着至关重要的作用。良好的文件夹结构将帮助团队中的开发人员轻松定位和关联（ELER）。

React 生态系统赋予开发者构建 React 项目所需的自由。我们可以按照自己的喜好进行构建。

但是，如果您刚刚启动一个中型到大型的反应项目，那么正确地构建项目以便您的团队以后可以轻松维护它可能会令人困惑。

那么，如何构建你的 React 项目？

我知道有很多文章用不同的方法讨论这个问题。说实话，对我来说，没有一个能适合所有项目和程序员编码风格的最佳项目架构。

我这里展示的只是 React 项目构建的一种个人观点。你可以将部分或全部内容应用到你的项目中。这取决于你的选择。

以下是我为可扩展应用程序设计的最佳 React 文件夹结构。我将解释每个文件夹的功能以及包含这些文件夹的原因。

这是解释..

1. Assets 文件夹

assets 文件夹包含用于样式设置的图片和 scss 文件夹。在这个项目架构中，我使用 SCSS 文件进行集中样式设置。我更喜欢这种方式。

如果您希望在每个组件中添加样式，这没问题。但是，您应该考虑在此处设置默认或共享样式。

如果您的项目中不使用 scss/sass，您可以将其重命名为 css 或样式。

2. Components 文件夹

组件文件夹包含一系列 UI 组件，如按钮、自定义输入字段、模式等，这些组件将在项目中的文件之间共享和使用。

如果您不喜欢“组件”，可以将其重命名为“元素”或“UI”。

每个组件都有一个测试文件来帮助我们维护它们，因为它们在项目中被广泛使用。

3. Pages 文件夹

pages 文件夹反映了应用程序的路由。此文件夹内的每个组件都有自己的路由。

页面组件将包含来自 components 文件夹、parts 文件夹或其自身子文件夹的子组件。它有自己的状态，并且通常还会调用一些服务。

4. 零件

parts 文件夹与 components 文件夹基本相同，它包含页面中可复用的组件。

不同之处在于，parts 文件夹中的组件反映页面的各个部分，如页脚、侧边栏和页眉，而 components 文件夹中包含独立的 UI 组件，如按钮、表单或输入字段。

有时，零件中的组件可以使用组件文件夹中的某些组件。

5.服务

服务文件夹的灵感来自 Angular 架构（嗯，我也是一名 Angular 开发人员）。

Angular中有一个称为依赖注入的功能，它允许我们在项目的任何位置注入服务。大多数情况下，服务用于管理 API 集成。因此，它与组件中的逻辑分离。

服务不是 React 组件。它只是一个 JavaScript 函数，用于根据数据类型管理 API 集成。

为了清楚起见，以下是我在大多数 React 项目中编写服务的方法。

以下是我在组件中调用它的方式。

我使用 axios 进行 API 调用。为了在组件中调用服务，我使用了 JavaScript 的 Promise。

你可能会问，为什么要在服务中单独调用 API？我们可以在组件内部直接使用 Axios 调用 API。

那么，如果我们需要由不同的开发人员在不同的组件中调用 API 怎么办？

我敢打赌，代码不会标准化，而且如果开发人员发生变化，维护起来会很困难。

通过使用服务，我们可以基于数据类型集中调用 API 来解决这个问题。如果有人想使用它，只需在组件中使用 Promise 调用即可。

6. 存储（如果使用 Redux）

如果您决定在项目中使用 Redux，则需要包含 store 文件夹。其中包含用于管理 Redux 状态的 actions 和 reducers 子文件夹。

大多数情况下，动作和减速器将在页面组件中被调用，因此它们通常根据使用它们的页面来命名。

如果您的应用程序规模较小，请在使用 Redux 之前尝试最大限度地利用 props 和 states 组件。如果觉得太复杂，那么您可以使用 Redux。

7. 实用程序

utils 文件夹只是用来存放项目中重复使用的一些实用函数的地方。utils 文件夹中的文件应该只包含一些函数，例如日期格式化、字符串转换等。

我们是否需要从一开始就包含所有文件夹？

嗯，不。您不必从项目开始就包含所有文件夹。

例如，如果您不确定是否在项目中使用 redux，则您不必创建存储文件夹。

如果您确定您的项目仅使用少量 API，则 Services 文件夹也是不必要的。

但是，从一开始就安排好资产、组件、部件和页面文件夹非常重要，这样才能更好地管理代码。

就这样。你觉得怎么样？如果你有什么看法，请随时发表评论并提出你的想法，以便我们对此进行更多思考。

编码愉快！