Reactjs 应用程序目录结构

我的团队目前正在使用Facebook的Flux架构开发一个用ReactJS编写的大型应用程序。它目前仍处于婴儿期，但很快就会发展壮大。它将有50多个小组件视图、大量动作、商店和动作创建者

目前，我们的目录结构如下-

App
|___ module_1
|    |___ components
|    |    |___ component1.react.js
|    |    |___ component2.react.js
|    |___ module1ActionCreators.js
|    |___ module1Constants.js
|    |___ module1store.js
|
|___ module_2
     |___ ... (same structure as above)

这种方法的一个问题是，随着该应用程序的增长，module_x文件夹的数量将越来越大

有没有人可以分享他们是如何构建应用程序的？根据我们的经验，Facebook的示例应用程序（todo和chat）具有适合小型应用程序的体系结构，但一旦这些应用程序、组件和操作的数量增加，管理起来就变得更加困难

---

提前感谢。

通常的目录结构更像这样：

js ├── AppBootstrap.js ├── AppConstants.js ├── AppDispatcher.js ├── actions │ ├── AppActions.js │ ├── FriendActions.js │   └── PhotoActions.js ├── components │ ├── AppRoot.react.js │ ├── friends │ │ ├── Friend.react.js │ │ ├── FriendList.react.js │ │ └── FriendSection.react.js // a querying-view, AKA controller-view │ └── photos │ ├── Photo.react.js │ ├── PhotoCategoryCard.react.js │ ├── PhotoCategoryCardTitle.react.js │ ├── PhotoGrid.react.js │ └── PhotoSection.react.js // another querying-view ├── stores │ ├── FriendStore.js │ ├── PhotoStore.js │ └── __tests__ │ ├── FriendStore-test.js │ └── PhotoStore-test.js └── utils ├── AppWebAPIUtils.js    ├── FooUtils.js └── __tests__ ├── AppWebAPIUtils-test.js └── FooUtils-test.js js ├── AppBootstrap.js ├── AppConstants.js ├── AppDispatcher.js ├── 行动 │ ├── AppActions.js │ ├── FriendActions.js │   └── PhotoActions.js ├── 组件 │ ├── approt.react.js │ ├── 朋友 │ │ ├── Friend.react.js │ │ ├── FriendList.react.js │ │ └── FriendSection.react.js//一个查询视图，也称为控制器视图 │ └── 照片 │ ├── Photo.react.js │ ├── photocegorycard.react.js │ ├── PhotosegoryCardTitle.react.js │ ├── PhotoGrid.react.js │ └── PhotoSection.react.js//另一个查询视图 ├── 商店 │ ├── FriendStore.js │ ├── PhotoStore.js │ └── __测验__ │ ├── FriendStore-test.js │ └── PhotoStore-test.js └── 乌提尔斯 ├── appwebaputils.js    ├── FooUtils.js └── __测验__ ├── AppWebAPIUtils-test.js └── FooUtils-test.js css目录通常看起来像是components目录的镜像，每个组件有一个css文件。然而，现在有些人更喜欢在组件上内嵌所有样式

不要想得太多——存储和查询视图或“部分”之间并不总是1:1的关系，正如本例中所示

---

实际上，你只需要做适合你的应用的事情。这不是教条。数据流、控制反转和存储解耦——这些都比如何组织文件重要得多。

我也在为大型应用程序确定初始结构方面遇到了困难。在花时间将应用程序划分为基于流量角色的文件夹（即操作、存储、常量等）之后，我得到了一个与您非常相似的结构

首先，如果您正在使用类似Broswerify的东西，那么在您的require调用上的相对路径是很可爱的。第二，在处理特定组件时，不必查找不同文件夹中的文件，这可以节省大量时间

对于交叉关注点，如dispatcher、helper函数、bootstrapper等，我有一个等效的应用程序模块。我总是觉得我处理的每个文件都有一个合理的位置，而新开发人员也不会费力地找到相关的文件（当您的模块可能共享前缀时会出现问题）

---

自从切换之后，我就没有回头看。

如果一个组件足够通用和可重用，那么将其分解为自己的npm模块。如果你很慷慨，那么就把它开源，并把它列在上面。我认为这是开发大型应用程序的好方法。但是您的模块可能太小了。我的应用程序目前是按类型排序的，如@fisherwebdev的答案和每个flux示例所示，但我相信这并不能很好地扩展。我在商店文件夹中已经有25家商店。我计划“按功能订购”而不是“按类型订购”，这些功能实际上都是一个小“应用程序”，将插入“核心”应用程序。每一个都应仅依赖于“核心”模块。不过这只是一个想法。还没有设计。@RoryKoehein你设计了什么东西要试一下吗？我认为这是正确的方法。我们就是这样做的，除了我们在一个功能中再次按类型排序外，这导致了大量的额外文件夹，其中只有几个文件。@froginvasion是的，我们上个月终于这样做了。我们将整个应用程序移到了一个“核心”文件夹中，现在正在逐个移出模块。我们还在模块内部按类型订购，我同意这一点。每个模块有1到5个atm存储区。通过将模块从导入和加载模块的应用程序入口点删除，可以将模块从应用程序中删除。它们只依赖于核心。当核心模块或其他模块需要使用模块中的代码时，他们必须检查模块是否通过外观可用（模块也在React视图中的

上下文上共享）。事实上，其他事情比文件夹结构更重要。另一方面，文件夹结构可以让您（或未来的开发人员）对正在发生的事情有一个很好的了解。我几乎认为文件夹/子文件夹/文件模型是不够的，也许提供更灵活的IDE会有用（例如，文件夹图而不是文件夹树）。。。无论何时使用动作，都必须导入
“../../someActions”
？同样，如果您需要任何实用程序，您必须浏览几个文件夹。当然，它已经比我的文件夹结构更扁平了。