如何像专业人士一样构建 React 应用🔥

好了，你已经开始构建你的 React 应用了，一切进展顺利，直到你发现项目文件夹一片混乱。听起来很熟悉？别担心，我们都经历过这种情况。构建 React 应用可能会让人感到不知所措，但只要方法得当，你就能保持代码库整洁、可扩展且易于导航。

在本文中，我将带您了解一个对我而言非常有效的文件夹结构。它对初学者友好，可扩展，非常适合中小型项目。让我们开始吧！

1. 资产/🖼️

此文件夹用于存放所有静态文件，例如图片、图标、字体和其他媒体文件。将它们放在一个位置，方便在整个应用中管理和引用。

这里存储的内容：

• 图像（logo.png，background.jpg）
• 图标（SVG 或图标字体）
• 字体（自定义或第三方）

2. 组件/🧩

这是可复用的 UI 组件所在的地方。比如按钮、卡片、模态框，以及任何可以在你的应用中复用的东西。

这里存储的内容：

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

3. 上下文/🌐

React Context 非常适合管理全局状态，无需 prop 钻取。此文件夹存储所有上下文提供程序和相关逻辑。

这里存储的内容：

• 上下文提供程序（AuthContext.js，ThemeContext.js）
• 用于上下文逻辑的 Reducer 或自定义钩子

4. 助手/🛠️

此文件夹用于存放不属于特定组件或功能的实用函数。这些小帮手能让您的工作更轻松。

这里存储的内容：

• 效用函数（formatDate.js，validateEmail.js）
• 常数（appConstants.js）
• 自定义错误处理程序

5. hooks/🎣

自定义 Hooks 是 React 中一个颠覆性的功能。此文件夹用于存放所有可复用的 Hooks，让它们井然有序，易于导入。

这里存储的内容：

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

6. 布局/🖼️

布局是应用的骨架。它定义了页面的结构（例如页眉、页脚、侧边栏），并有助于保持整个应用的一致性。

这里存储的内容：

• 布局组件（MainLayout.js，AuthLayout.js）
• 布局特定的样式

7. 页面/📄

此文件夹包含代表应用各个页面的顶级组件。此处的每个文件都对应应用中的一个路由。

这里存储的内容：

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

8. 服务/🌍

此文件夹用于存放所有 API 调用和外部服务集成。将它们分开存放，方便管理和测试时的模拟。

这里存储的内容：

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

9. 风格/🎨

此文件夹用于存放全局样式、主题和 CSS 实用程序。如果您使用的是 CSS-in-JS 库，则可能不需要此文件夹，但它对于全局样式仍然很有用。

这里存储的内容：

• 全局样式（global.css）
• 主题文件（theme.js用于样式组件或 Material-UI）
• CSS 实用程序类

10. App.js 🎯

这是你的应用的入口点。你可以在这里定义路由、使用提供程序包装应用，以及设置任何全局配置。

此处应包含的内容：

• 路由逻辑（使用react-router-dom）
• 上下文提供程序（AuthProvider，ThemeProvider）
• 全局错误边界或包装器

🗂️ 完整文件夹结构

这是完整的文件夹结构，包括每个文件夹内的文件：

🚀 为什么这种结构有效

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

🛠️ 构建 React 应用的专业技巧

1. 保持简单：不要让结构过于复杂。从你的需求入手，随着应用的发展而扩展。
2. 使用有意义的名称：以明确其用途的方式命名文件和文件夹。
3. 记录您的结构：添加一个README.md文件来向您的团队（或您未来的自己）解释您的文件夹结构。

🎉 准备好构建了吗？

现在您已经搭建好了稳固的架构，是时候开始构建了！记住，最适合您和您的团队的架构才是最好的。您可以根据自己的需求随意调整此设置。

编码愉快💻

感谢阅读！🙏🏻 希望本文对您有所帮助✅ 请积极回应并关注更多😍由Hadil Ben Abdallah 💙 制作

哈迪尔·本·阿卜杜拉跟随

软件工程师 • 技术内容作家 • LinkedIn 内容创建者