⚛️ ReactJS 文件夹结构 + 样板。

有很多文件夹结构可供遵循ReactJS，你可能会困惑该为下一个项目选择哪一个🤔。我们将在本文中回答这个问题。

我将与你们分享我将在下一个项目中使用的样板。

关于 ReactJS 文件夹结构 ⚛

默认情况下ReactJS带有一个简单的项目设置，因此对于那些从未使用过 React 编码的人来说，他们不应该太担心文件夹结构。

否则，如果您有 React 经验，那么您就该组织您的应用程序结构了。

解释每个文件夹的作用📁

我们的重点将放在src我们要构建文件夹的文件夹中。

（对于文件夹图标，我使用名为“Material Icon Theme”的 vs-code 扩展）中级

📁 资产

• 我们在这里将所有媒体文件分组。
• 我个人更喜欢创建诸如Images, Icons, Videos, Audios等等的子文件夹......

您可能希望将所有组件放在一个地方，但最好将其分成两个文件夹。（组件和容器）。

📁 组件

• 此文件夹包含我们所有的应用程序展示组件（无状态组件）。

📁 容器

• 在这个文件夹中，我们有状态组件（智能组件），我们可以在其中跟踪状态。

📁 常量

• 在这个文件中，我们将所有常量像正则表达式一样分组。

📁 助手

• 在这里，我们创建并导出将在应用程序的不同位置重复使用的函数。

📁 Hooks

• 为定制挂钩制作的文件夹。

📁 布局

• 它包含布局文件，例如Navbar, Footer, Sidebar。
• 布局用于包装特定组件。

📁 页面

• 此文件夹包含页面组件Home, Contact等...
• 每页都包裹着特定的Layout

📁 验证

• 在这里，我们使用像Formik这样的库来编写表单验证和规则。

📁 服务

• 在这个文件夹中，我们通过为每个服务创建文件来管理所有的 API 请求。

📁 上下文

• 此文件夹包含我们在应用程序中管理和全球化状态的所有上下文文件，例如主题样式。

📁 配置

• 我们所有的应用程序配置都将位于此文件夹中。

📁 国际化

• 此文件夹用于支持多语言。
• 您可以JSON为每种想要翻译的语言创建包含文件的子文件夹。
• 请点击此处查看他们的分步指南。

✨ 保持代码的一致性

• 通过向您的项目添加Eslint&Prettier它将为您提供：
  • 一个很好的 linting 环境。
  • 纠正不良的编码习惯。
  • 使您的代码干净且一致。

样板

我创建了一个 Github 存储库，其文件夹结构与我上面解释的相同。如果您想使用它，这里是链接[ 这里 ]

结论

好吧，我遵循的结构是基于我的经验并且也取决于项目。

如果您对您的文件夹结构感到满意✅那么您没有义务遵循与我相同的结构。

感谢您阅读这篇文章❤️