每个开发人员都应该使用的可扩展且可维护的 React 项目结构。

良好的项目结构对于项目的成功至关重要，尤其是在代码库的理解、灵活性和维护方面。结构不合理且维护不善的项目很快就会变得一团糟，留下可怕的遗留问题，让任何人都不愿继续合作。

现在我将向你展示我在项目中经常使用的结构，并解释其背后的原因。对于大型应用程序来说，这种结构应该是一个很好的起点，你可以根据项目需求对其进行扩展。以下是我推荐给大多数项目的 src 结构：

让我们从上到下介绍一下这些文件夹。

测试

首先，我们有一个tests文件夹，其中包含 React 应用程序的所有测试文件。我在我的大部分 CRA 应用程序中都使用了 Jest。我发现 CRA 在编写测试时选择了filename.test.js格式。但这种方法对眼睛和大脑来说有点繁琐。你可以在名为tests的文件夹中编写测试，Jest 会自动运行该文件夹中的测试。

API

api文件夹包含我们应用程序的 API 层。它将包含负责执行 API 请求和与服务器通信的方法。

资产

assets 文件夹包含fonts、images和videos。fonts 文件夹用于保存自定义字体和字形。images 文件夹用于保存整个应用程序中使用的图片。

成分

components目录包含两个目录：common和specific。common目录包含应用程序中常用的可复用组件。例如，按钮、表单组件、与排版相关的组件等等。不常用的组件则放在specific组件中。

钩子

顾名思义，hooks目录用于存放所有自定义且可复用的钩子。需要注意的是，任何并非真正可复用但与特定功能耦合的钩子都应该放在与该功能相同的目录中。例如，假设我们有一个新闻通讯表单组件，其中包含一个用于用户注册新闻通讯的表单。该组件可以使用一个名为useNewsletterSignup的钩子来处理用户注册。这样的钩子不应该放在全局的src/hooks目录中，而应该放在本地，因为它与NewsletterForm组件耦合。它可能如下所示：

语境

上下文目录应该包含任何全局级上下文状态提供程序。

布局

布局目录，顾名思义，应该包含为页面提供不同布局的组件。例如，如果您正在构建一个仪表板应用程序，则可以根据用户是否登录来渲染不同的布局。

配置

在config目录中，您可以放置​​应用程序和第三方服务的任何运行时配置文件。例如，如果您使用Firebase或OIDC等服务进行身份验证，则需要添加配置文件并在应用中使用它们。请确保不要将 config 与环境变量混淆，因为此处的任何内容都会出现在构建包中。

常量

您可以在此处放置整个应用程序中使用的任何常量变量。建议您将常量首字母大写，以区别于应用中的其他变量和本地化常量。

以下是定义和使用常量的一些示例：

• 单独定义常量

// in constants/appConstants.ts
export const APP_NAME = 'Super app'
export const WIDGETS_LABEL = 'Widgets'

// Somewhere in your app 
import { APP_NAME, WIDGETS_LABEL } from '@/constants/appConstants' 
console.log(APP_NAME) 

// You can also grab all named exports from the file 
import * as APP_CONSTANTS from '@/constants/appConstants' 
console.log(APP_CONSTANTS.WIDGETS_LABEL) 

• 在一个对象中定义相关常量

// in constants/appConstants.ts 
// Create an object with constant values 
export const apiStatus = { 
IDLE: 'IDLE', 
PENDING: 'PENDING', 
SUCCESS: 'SUCCESS', 
ERROR: 'ERROR' 
} 

// Somewhere in your app
 import { apiStatus } from '@/constants/appConstants' 
console.log(apiStatus.PENDING) 

助手

任何实用程序和小型可重复使用的功能都应该放在这里 - 例如，格式化日期、时间等的功能。

国际

此目录是可选的。如果应用程序需要国际化支持，请添加此目录。国际化（也称为 i18n）是指以适合用户语言环境的格式显示应用内容。这些内容可以包括但不限于翻译文本或特定格式的日期、时间和货币。例如，英国使用 DD/MM/YYYY 格式，而美国使用 MM/DD/YYYY 格式。

服务

在大型应用程序中，我们可能会有复杂的业务逻辑代码，这些代码会在多个不同的地方使用。这类代码最好从组件中抽取出来，放在其他位置，而services文件夹就是一个不错的选择。

店铺

store文件夹负责与全局状态管理相关的文件。React 项目可以使用许多状态管理解决方案，例如Redux、Zustand、Jotai等等。

样式

您可以将全局样式、变量、主题样式和覆盖放在样式文件夹中。

类型

您可以在此处放置任何全局和可共享的类型。通过这种方式，您可以节省时间，并更轻松地共享您和您的团队所需的 TypeScript 代码和类型。

视图

通常，views 目录只包含路由/页面组件。例如，如果我们有一个页面允许用户查看产品，那么在 views 文件夹中应该有一个Products.tsx组件，对应的路由可能如下所示：

<Route path=”/projects” element={<Products />} />

不过，我说“通常”是有原因的。许多应用程序在视图中放置路由组件，而其余组件则放在 components 文件夹中。这种方法对于中小型应用程序来说可能有效，但当页面和组件数量增加时，管理和维护起来会更加困难。

概括

选择正确的文件夹结构并非易事。您需要与团队就适合应用程序的结构达成一致，因为适合某个需求的结构可能并不适合其他需求。希望在未来几年内也能保持有效。为了确保结构良好且易于维护，您会采取哪些不同的做法？请在下方评论区留言告诉我。

感谢您的阅读！
希望这篇文章对您有所帮助。请与您的朋友和同事分享。分享即关爱。

通过各种平台与我联系