此文章是翻译File Structure这篇React（版本v16.2.0）官方文档。

File Structure

这里有构建React 项目的推荐方法吗？

React 没有建议你怎样将文件放到文件夹中。也就是说在生态系统中你有几种通用方法，你可以需要去考虑。

按照特性或路由分组（Grouping by feature or routes）

一个构建项目的常用方式是按照特性或路由分组将本地CSS、JS 和测试一起。

  1. common/
  2.   Avatar.js
  3.   Avatar.css
  4.   APIUtils.js
  5.   APIUtils.test.js
  6. feed/
  7.   index.js
  8.   Feed.js
  9.   Feed.css
  10.   FeedStory.js
  11.   FeedStory.test.js
  12.   FeedAPI.js
  13. profile/
  14.   index.js
  15.   Profile.js
  16.   ProfileHeader.js
  17.   ProfileHeader.css
  18.   ProfileAPI.js

“特性”的定义不是通用的，它取决于你选择的粒度。如果你不能列出一个顶级文件夹的列表，你可以问你的用户关于产品的主要组成部分是什么，并使用他们的心理模型（metal model）作为蓝图。

按照文件类型分组（Grouping by file type）

另一个通用的构建项目的方式是按照相似的文件在一起，例如：

  1. api/
  2.   APIUtils.js
  3.   APIUtils.test.js
  4.   ProfileAPI.js
  5.   UserAPI.js
  6. components/
  7.   Avatar.js
  8.   Avatar.css
  9.   Feed.js
  10.   Feed.css
  11.   FeedStory.js
  12.   FeedStory.test.js
  13.   Profile.js
  14.   ProfileHeader.js
  15.   ProfileHeader.css

有些人还喜欢进一步，根据应用程序中的角色将组件分离d到不同的文件夹。例如，Atomic Design是建立在这一原则基础上的设计方法。记住，把这些方法当作有用的例子来对待，而不是严格的遵循规则往往更有成效。

避免太多的嵌套（Avoid too much nesting）

在JavaScript项目中有许多与深层的目录嵌套相关的痛点。在它们之间编写相对导入变得更加困难，或者在文件被移动时更新这些导入。除非你有一个非常有说服力的理由使用深层文件夹结构，否则请考虑在单个项目中限制自己最多三个或四个嵌套文件夹。当然，这只是一个建议，它可能与你的项目无关。

不要想太多（Don’t overthink it）

如果你只是开始一个项目，在选择项目结构上不要想太多。选择上述方式的任意一个（或者随你自己想法）开始写代码。在编写了一些真正的代码之后，你可能想要重新思考它。

如果你感到非常困惑，开始只需要将所有文件保存在一个文件夹中。最终它会变得足够大，以至于你想把一些文件与其他文件分开。到那时，你将有足够的知识来区分最常一起编辑的文件。一般来说，保持经常在一起改变文件在一起是一个好主意。这个原则被称为“托管（colocation）”。

随着项目规模的扩大，他们经常在实践中使用上述几种方法的组合。所以从一开始就选择“正确”并不是很重要。