我如何构建我的 React 项目

2025-05-27

我如何构建我的 React 项目

这篇文章最初发表在我的博客上。

距离上次我写关于如何构建 Node.js REST API 的文章已经过去很久了。那篇文章介绍了如何为 Node.js 应用程序设计一个组织良好、易于维护的文件夹结构。

所以今天我不想谈论 Node.js API，而是谈论 React 应用程序的架构，并再次回答上一篇文章中的相同问题：

文件夹结构应该是什么样的？

再次强调：这个问题没有完美或 100% 正确的答案，但网上也有大量其他文章讨论这个问题。此文件夹结构也部分基于其中多篇文章。

需要特别指出的是，React 并没有真正告诉你如何组织你的项目，只是告诉你应该避免过多的嵌套和过度的思考。确切地说，他们说的是：(来源)

React 对于如何将文件放入文件夹没有明确的规定。不过，生态系统中有一些常用的方法可以参考。

请查看链接来源，了解更多关于这些常见方法的信息。本文不再赘述。

以下结构和架构经我验证，可维护且可靠。它或许能为您设计自己的项目提供帮助。请记住，以下架构基于一个使用create-react-app引导并用JavaScript编写的应用程序。

目录：根目录

react-project
├── node_modules
├── public
├── src
├── package.json
└── package-lock.json
Enter fullscreen mode Exit fullscreen mode

这个结构没什么特别的，对你来说应该不陌生。它实际上是一个基本的create-react-appsrc设置。这里有趣的部分是本文所涉及的文件夹的内容。

那么我们这里有什么？

react-project
├── api
├── components
├── i18n
├── modules
├── pages
├── stores
├── tests
├── utils
├── index.js
├── main.js
└── style.css
Enter fullscreen mode Exit fullscreen mode

如你所见，该应用程序主要分为 8 个目录。从现在开始，我们将自上而下地逐个查看这些目录。

让我们从目录开始api。

目录：src/api

react-project
├── api
│   ├── services
│   │   ├── Job.js
│   │   ├── User.js
│   ├── auth.js
│   └── axios.js
Enter fullscreen mode Exit fullscreen mode

该api目录包含负责 React 应用程序（前端）和 API（后端）之间通信的所有服务。单个服务提供多种功能，可使用 HTTP 协议从外部服务检索数据或将数据发布到外部服务。

auth.js提供身份验证功能，并axios.js包含一个axios实例，其中包含用于传出 HTTP 请求和传入响应的拦截器。此外，JWT 的刷新过程也在这里处理。

目录：src/components

react-project
├── components
│   ├── Job
│   │   ├── Description.js
│   │   └── Preview.js
│   └── User
│   │   ├── Card.js
│   │   ├── Create.js
│   │   └── List.js
Enter fullscreen mode Exit fullscreen mode

如果你已经熟悉 React，你应该知道它主要基于组件。组件实际上是每个 React 应用程序的核心。整个应用程序，至少是展示视图，是由许多小组件构成的。

那么，什么是组件？来源

组件可让您将 UI 拆分为独立的、可重复使用的部分，并单独考虑每个部分。

想象一下，你有一个像 Twitter 或 Facebook 这样的网站。这个大型网站由许多小部件（组件）组成，例如按钮、输入框或小部件。这些部件组合在一起，构成了越来越复杂、越来越庞大的网站。每个组件都有自己的生命周期和状态管理，你可以与其他组件共享组件的状态。

组件在应用程序内被多次重复使用，以避免开发人员编写冗余代码。

不要重复自己（DRY）

将代码库拆分成多个组件不仅仅是 React 独有的。它是软件工程中一种常见的模式，可以简化开发流程和后期维护。

在 React 中，组件通常由一个简单的 JavaScript 函数或类组成。通常，我会为每个组件创建一个新文件。在极少数情况下，我会将多个组件（函数或类）组合到一个文件中。想象一下，一个UserList.js组件渲染以下多个元素UserListItem：

const UserList = ({ users }) => (
  <ul>
    {users.map(user => (
      <UserListItem key={user.userId} user={user} />
    ))}
  </ul>
)

const UserListItem = ({ user }) => <li>{user.name}</li>
Enter fullscreen mode Exit fullscreen mode

在这里，将两者合并到一个文件中是有意义的。此外，UserListItem可能甚至不会被除 之外的任何其他组件使用UserList。

除了组件本身之外，您还可以将其样式表或测试添加到此目录。

目录：src/i18n

react-project
├── i18n
│   ├── de.json
│   └── en.json
Enter fullscreen mode Exit fullscreen mode

i18n代表国际化，负责应用程序的语言支持。包含的 JSON 文件本质上是对象，包含固定常量作为键，其相关的翻译作为值。

因此，每个语言文件的键应该相同，只有值（翻译）彼此不同。稍后您可以通过编写自定义钩子或组件来轻松查询这些语言文件。

目录：src/modules

react-project
├── modules
│   ├── logger.js
│   └── session.js
Enter fullscreen mode Exit fullscreen mode

该目录包含一些全局模块，例如可能用于日志记录或作为浏览器的包装器LocalStorage。

目录：src/pages

react-project
├── pages
│   ├── Home
│   │   ├── components
│   │   │   ├── Dashboard.js
│   │   │   └── Welcome.js
│   │   └── index.js
│   ├── Login.js
│   └── Profile.js
Enter fullscreen mode Exit fullscreen mode

该pages目录包含react-router-dom在应用程序导航过程中访问的路径。在这里，我们将多个组件合并到一个更大的组件中，以显示完整的页面视图。

每个页面可能包含一个独立的component目录，其中包含仅在此页面使用的“本地”组件。对于组件树较深的复杂页面，您可能需要了解React Context API，它能够更轻松地沿组件树传递 props 并处理全局“页面状态”。

目录：src/stores

react-project
├── stores
│   ├── language.js
│   └── user.js
Enter fullscreen mode Exit fullscreen mode

此目录包含所有可从应用程序内任何组件访问的全局 React 状态。虽然Redux可能是最流行的全局状态管理解决方案，但我更喜欢使用zustand。它非常容易上手，而且它的 API 非常简单易懂。

目录：src/tests

react-project
├── tests
│   ├── language.test.js
│   └── utils.test.js
Enter fullscreen mode Exit fullscreen mode

该tests目录包含不属于某些组件的测试。例如，这可能是针对算法实现的测试。此外，我验证并比较了上面提到的语言文件的键，以确保没有遗漏任何特定语言的翻译。

目录：src/utils

react-project
├── utils
│   ├── hooks
│   │   ├── useChat.js
│   │   ├── useOutsideAlerter.js
│   │   ├── useToast.js
│   ├── providers
│   │   ├── HomeContextProvider.js
│   │   ├── ToastContextProvider.js
│   ├── colors.js
│   ├── constants.js
│   ├── index.js
Enter fullscreen mode Exit fullscreen mode

这里，我们提供了一些实用工具，例如：自定义钩子、上下文提供程序、常量和辅助函数。欢迎在这里添加更多内容。

全部在一起

最后但同样重要的是项目结构的完整概述：

react-project
├── api
│   ├── services
│   │   ├── Job.js
│   │   ├── User.js
│   ├── auth.js
│   └── axios.js
├── components
│   ├── Job
│   │   ├── Description.js
│   │   └── Preview.js
│   └── User
│   │   ├── Card.js
│   │   ├── Create.js
│   │   └── List.js
├── i18n
│   ├── de.json
│   └── en.json
├── modules
│   ├── logger.js
│   └── session.js
├── pages
│   ├── Home
│   │   ├── components
│   │   │   ├── Dashboard.js
│   │   │   └── Welcome.js
│   │   └── index.js
│   ├── Login.js
│   └── Profile.js
├── stores
│   ├── language.js
│   └── user.js
├── tests
│   ├── language.test.js
│   └── utils.test.js
├── utils
│   ├── hooks
│   │   ├── useChat.js
│   │   ├── useOutsideAlerter.js
│   │   ├── useToast.js
│   ├── providers
│   │   ├── HomeContextProvider.js
│   │   ├── ToastContextProvider.js
│   ├── colors.js
│   ├── constants.js
│   ├── index.js
├── index.js
├── main.js
└── style.css
Enter fullscreen mode Exit fullscreen mode

就是这样！希望这能给那些不知道如何构建 React 应用程序或不知如何入门的人一些帮助。欢迎提出任何建议。

文章来源：https://dev.to/larswaechter/how-i-struct-my-react-projects-jii
Devto 翻译
PREV
作为新手在科技领域建立职业生涯
NEXT
🛠 新工作第一天最重要的七件事！😎