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

js
├── AppBootstrap.js
├── AppConstants.js
├── AppDispatcher.js
├── 动作
│ ├── AppActions.js
│ ├── FriendActions.js
│ └── PhotoActions.js
├── 组件
│ ├── AppRoot.react.js
│ ├── 朋友们
│ │ ├── Friend.react.js
│ │ ├── FriendList.react.js
│ │ └── FriendSection.react.js // 一个查询视图，又名控制器视图
│ └── 照片
│ ├── Photo.react.js
│ ├── PhotoCategoryCard.react.js
│ ├── PhotoCategoryCardTitle.react.js
│ ├── PhotoGrid.react.js
│ └── PhotoSection.react.js // 另一个查询视图
├── 店铺
│ ├── FriendStore.js
│ ├── PhotoStore.js
│ └── __测试__
│ ├── FriendStore-test.js
│ └── PhotoStore-test.js
└── 实用程序
    ├── AppWebAPIUtils.js
    ├── FooUtils.js
    └── __测试__
        ├── AppWebAPIUtils-test.js
        └── FooUtils-test.js

css 目录通常看起来像 components 目录的镜像，每个组件一个 css 文件。然而，现在有些人更喜欢在组件上内嵌所有样式。

不要想太多——存储和查询视图或“部分”之间并不总是 1:1 的，就像在这个例子中那样。

实际上，您只需要为您的应用程序做正确的事情。这不是教条。数据流的东西、控制的反转和存储的解耦——这些比你如何组织文件更重要。

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

一方面，如果您使用的是 Broswerify 之类的东西，那么您的 require 调用的相对路径就很可爱。其次，在处理特定组件时不必在各种文件夹中查找文件可以节省大量时间。

对于横切关注点，例如调度程序、辅助函数、引导程序等，我有一个等效的 App module。我总是觉得我正在处理的每个文件都有一个合理的位置，新开发人员不会很难找到相关文件（当您的module可能共享前缀时会出现问题）。

自从换了我就没有回头。