Question

我们可以将容器文件夹保留在组件文件夹之外吗？

在组件文件夹中还有common-folder和helpers-folder吗？

如何在组件文件夹中排列以下文件夹？

容器
pageContainers
常见
实用程序
助手

Answer 1

您可以使用分形文件结构，全面的hackernoon帖子将其全部here进行了总结。

它使您能够确定文件和文件夹的位置，更易于管理的组件，并为无限扩展铺平了道路。

Answer 2

在我看来，“模块化”方法对于React应用程序来说非常不错。目的是“监视”您的文件。例如：

/src
 /Components
   /Button
     index.js
     style.css
 /Containers
   /Dashboard
     /Components
       ...somes components used only in dashboard
   index.js
   style.css
  /UserProfile
    /Components
     ...somes components used only in UserProfile
    /Service
      fetcher.js
      reducer.js
    index.js
    style.css
 /Services
   reducer.js
   /auth

     ...
 App.js

如您所见，我们有一个“容器”文件夹。每个“模块”都有自己的样式，组件，服务，实用程序等...

对应用程序进行“范围界定”的好处是：

更容易维护
对于用户而言，结构更加清晰，您无需在存储了100个其他组件的唯一Component文件夹中搜索“ Button组件”
积极进取。例如，您拥有“身份验证模块”，允许用户向您的网站进行身份验证。如果您确定组件的范围，则为该服务/组件添加一些新功能会更加容易。

当然，文件夹的一般树会更大。您可以根据需要调整结构，但不要忘记考虑“范围”。

这可能不是“最佳方法”。但是它有一些很好的优点

如果您想进一步，我建议您写这篇优秀的文章：https://medium.com/@alexmngn/why-react-developers-should-modularize-their-applications-d26d381854c1

和

https://medium.com/@alexmngn/how-to-better-organize-your-react-applications-2fd3ea1920f1

如何构造ReactJS组件文件夹？

2 个答案: