有一种基于这种方式的变种方式，在模块的目录下保持着两个目录的分离。
想象一下在你的应用中有一个 User 模块，在此模块下，你有两个目录去分离你的组件：src└─ User ├─ components └─ containers
上述方式最小化了在两个遥远目录下不断切换的的问题，但是同样增加了很多烦恼。当你的应用有非常多模块的时候，你最终会可能会创建几十个 containers 和 components 目录。
所以我们讨论如何组织目录和文件的时候，和组件是否被拆分为展示型和容器型是无关的。也就是说，我们会把所有的组件都放在 components 目录下，除了页面。 即使在目录上拆分它们是不必要的，了解它们之间的差异性依然是有必要的。如果你对这个话题还有疑问，建议阅读这篇文章： Presentational and Container Components。 拆分和组合代码
在 components 目录下，我们通过模块/特性(module/feature)的结构来组织文件。
在对用户进行增删改查的过程中，我们只会有一个 User 模块。所以我们的目录结构会像下面这样：src└─ components └─ User ├─ Form.jsx └─ List.jsx
每当一个组件会有不止一个文件的时候，我们会将这个组件和它对应的文件放在同一个文件夹下，并且使用同一个名字来命名。举个例子：现在我们有一个 Form.css 文件包含了 Form.jsx 的样式，这时我们的目录结构会像这样：src└─ components └─ User ├─ Form │ ├─ Form.jsx │ └─ Form.css └─ List.jsx 测试用的文件和被测试的文件放在一起，在上面这个例子中， Form.jsx的测试文件会放在同一个文件夹下并且命名为 Form.spec.jsx UI 组件
除了通过模块拆分组件，我们还会在 src/components 放置一个 UI 目录，用于存放所有通用的组件。
