React Components文件夹结构

Question

在React应用程序中与我的组件一起使用的最佳文件夹结构是什么？

我现在正在学习做出反应，并试图将Bootstrap主题（Jumbotron）转换为React。

此模板具有一个包含一些链接的导航栏和一个搜索栏，因此我创建了一个导航栏组件，一个NavBarMenu（组件）和一个NavBarSearch（组件）。文件夹结构如下：

这是最好的开始方式？还是我应该创建一个NavBar文件夹，并在其中创建NavBarMenu和NavBarSearch？

就是这样：

src
/components
/NavBar
 index.js
 /NavBarMenu
  index.js
 /NavBarSearch
  index.js

哪种是最佳做法？

谢谢

Answer 1

如果需要创建子目录来组织逻辑，那么可以，这将是一个不错的目录结构。但是我会警告不要过度抽象。如果您不需要在多个位置使用组件，则可能不需要它自己的文件。

另一种方法是创建子组件的文件，而不是创建整个子目录，如下所示： - Nav - __tests__ - NavBar.js - NavBarMenu.js - NavBarSearch.js

我也要把它留在这里，因为我认为您可以使用它。您可以在有或没有webpack的情况下使用它。拥有它真是太好了： https://www.npmjs.com/package/module-alias#usage-with-webpack

Answer 2

我将Nav设置为容器。如果您打算动态/有条件地将其显示在导航栏上，则需要使用状态来跟踪它们。

Nav容器负责我可能想呈现的不同类型的导航，因此我可以在顶部使用NavBar，也可以在移动布局中使用SideNav。

Nav容器知道您是否要显示登录/注册链接，或显示具有用户名和图片的个人资料的链接。

然后，我的NavBar组件负责布置所有链接或子组件（如搜索栏或个人资料链接）的布局。

-Containers
  -Nav / Nav.js
-Components
  -Nav
    -NavBar / NavBar.js NavBar.css
    -NavSearch / NavSearch.js NavSearch.css
    -NavProfile / NavProfile.js NavProfile.css

不要挂断文件夹结构的详细信息。虽然很重要，但最终与提供给用户的最终产品无关。文件夹结构必须保持一致，并且对您和从事此项目的其他人都有意义。

容器和组件的逻辑结构比文件夹结构重要得多。确保在其中添加了很多东西。

Answer 3

为了使React Application可维护，我遵循以下文件夹结构：

src

 -assets

  --images

-components

  --container - This will have all logical components

  --presentation - This will have all view components

-services index.js - All end point call will come here

我找到了最好的文件夹结构here。