像大佬一样为React应用搭建文件夹结构🔥

所以，你已经开始构建你的React应用了，一切都很顺利，直到你发现你的项目文件夹变得一团糟。听起来熟悉吗？别担心，我们都有过这样的经历。整理一个React应用可能会让你感到不知所措，别担心，但是采用正确的方法，你可以使你的代码库保持整洁、易于扩展且导航。

在这篇文章里，我将带您了解一个对我不失有效的文件夹结构布局。这个结构新手友好，易于扩展，非常适合作为小型到中型项目的工具。让我们开始吧，一起看看！

这个文件夹用于存放所有的静态资源，比如图片、图标、字体等。将它们放在一个地方便于管理和在应用中引用。

这里存什么：

• 图片（logo.png，background.jpg），
• 图标（如SVG或图标字体），
• 字体（自定义或第三方，如myfont.ttf）。

资源文件夹

这里存放的是你可以重复使用的UI组件。比如按钮、卡片、弹窗等，这些都是可以在你的应用中重复使用的组件，等等。

这里存放什么：

• 可复用的组件 (Button.jsx, Card.jsx)
• （如果没有使用 CSS-in-JS，组件特定的样式）
• 复杂组件的子文件夹（例如 components/Header/ 文件夹）

组件

React Context 适合用来管理全局状态而无需 prop 传递。这个文件夹里存放了所有相关的 context 逻辑和提供器。

可以在这里存储什么

• 上下文提供器（AuthContext.js，ThemeContext.js，）
• 上下文逻辑相关的Reducers和自定义钩子

上下文资料

这个文件夹是存放不属于任何特定组件或功能的实用函数。这些小巧的辅助工具会让你的生活更轻松。

这里存什么:

• 工具函数脚本（formatDate.js，validateEmail.js）
• 常量文件（appConstants.js）
• 自定义错误处理函数

帮助 文件夹

自定义钩子在 React 中是真正的改变游戏规则的存在。这个文件夹是用来存放所有可重用钩子的地方，让它们保持有序且方便导入。

这里可以放什么:

• 自定义的钩子（useFetch.js，useLocalStorage.js）
• 处理特定逻辑的钩子（例如 useAuth.js，useTheme.js）

钩子文件夹

布局就像是应用的骨架。它们决定了页面的结构，比如顶部、底部和侧边栏，帮助整个应用保持一致。

这里可以存些什么：

• 一些布局组件 (MainLayout.js, AuthLayout.js) 和针对这些组件的样式。

, 布局文件夹（Layouts 文件夹）

这个文件夹里包含代表你应用中的每个页面的顶级组件。这里的每个文件都对应于应用中的一个路由路径。

这里存什么：

• 页面组件（如 Home.jsx，About.jsx，Contact.jsx）和特定页面的逻辑与样式。

页面文件夹

这个文件夹用来存放所有API调用和外部服务集成，这样分开存放使得管理和模拟测试都更容易。

这里可以存储什么

• API 服务相关的文件（authService.js，userService.js）
• API 配置文件（例如，apiConfig.js）

服务文件夹

这个文件夹是用来存放全局的样式、主题和CSS工具类（utilities）。如果你在使用CSS-in-JS，这种情况下可能不需要这个文件夹，但它仍然对全局的样式很有用。

这里可以存什么：

• 全局样式表（global.css），
• 主题文件脚本（theme.js，如 styled-components 或 Material-UI），
• CSS 实用类

Styles 文件

这是你应用的入口点，在这里设定路由，将应用包裹在提供者内，并设置全局配置。

这里可以放些什么:

• 路由规则（使用 react-router-dom），上下文提供器（AuthProvider，ThemeProvider），全局错误边界或包装组件。

以下为完整的文件夹及其内部文件的结构，如下所示：

整个文件夹结构图

• 可扩展性: 随着应用程序的增长，您可以轻松添加新的文件夹或子文件夹而不会破坏现有结构的完整性。
• 可读性: 每个部分都有其位置，使您和您的团队可以轻松找到所需的内容。
• 可重用性: 通过分离关注点，您可以在应用程序中重用组件、钩子 (hooks) 和工具。

1. 保持简洁： 尽量不要让结构过于复杂。从实际需求出发，随着应用的成长逐步扩展。
2. 使用有意义的名称： 用能清晰表达其用途的方式为文件和文件夹命名。
3. 记录结构： 添加一个 README.md 文件来向你的团队或未来的自己解释文件夹结构。

你现在有了一个稳固的结构，是时候开始搭建了！记住，最适合你们的结构才是最好的，可以根据你们的需求随意调整。

编码快乐，加油！💻

感谢阅读！🙏🏻 希望你觉得这很有帮助 ✅ 请点赞和关注获取更多内容 😍 由 Hadil Ben Abdallah 精心制作 💙

(/hadil)

软件开发工程师 • 技术内容创作者（点击此处访问原文）