什么是正确的React App文件结构？

Question

我对构建React应用的正确或标准方式有疑问。

例如，我总是使用create-react-app启动我的react应用。在src内的create-react-app文件夹中，默认情况下有index.js index.css，App.js和App.css文件（还有几个文件，但我现在将不理会。）

但是，我不太了解该结构的工作原理。 index.js不是应用程序的主页吗？为什么index.js连接到App.js？另外，如果我想在应用程序中添加更多页面和组件，应该如何构造它？我知道components文件夹中需要有src文件夹，而不同页面文件（例如pages）的page2.js文件夹

我有一种强烈的感觉，也许我完全走错了路。我正在对此进行一些研究，似乎每个教程的结构都不同。我可以根据需要构造它吗？如果是这样，最合适的方法是什么？

如果我错了，请纠正我。谢谢！

Answer 1

真正没有构建应用程序的“正确”方法。确实，您可以根据项目的需求进行调整。话虽如此，我可能可以帮助您澄清一些事情，并给您一些入门的方法。

1. index.js是您的javascript应用程序的入口点。在其中，通常会启动您的react应用程序。查找带有reactDom.render(<App />, 'root);的行，这就是说，在相应的html文件中找到一个ID为root的html元素（在神奇的构建过程中找到的该元素，当前被create react应用隐藏了），然后换掉react呈现为该节点的html。
2. 将反应成分分为三类非常普遍：（1）容器； （2）组成部分；和（3）页。对于更简单的React应用程序，容器通常负责获取数据，布置一系列组件并将数据传递给它们。组件旨在封装一些特定功能，然后可以在容器中重复使用/布局这些功能。然后，页面是1个或多个容器的集合，这些容器可以在逻辑上分组到一个页面中。我建议利用react-router之类的东西来使您的生活更轻松。对于该路线，您可以说要渲染该组件。 请注意，这里的组件是一个重载术语，因为正如我刚才所描述的，它在体系结构上用来表示一件事，但是同时，这三种体系结构类型最终都是在组件的反应。它们只是其中的一类，可以帮助您进行思考。

我强烈建议您先阅读react的入门文档。 如果您来自OOP背景，请放this  不久前，一些Java同事开始涉足反应。我尝试将效率提高到80/20，以使您动起来。

Answer 2

index.js不是“应用程序的主页”，而是将您的应用程序加载到DOM中的脚本。 App.js通常是应用程序实际内容的起点（即显示或决定显示，无论加载应用程序时看到的内容）。

就src/中的文件夹结构而言，确实没有一个“标准”，正如您所发现的那样。您可以随心所欲地构建事物。最好的方法是看一堆不同的教程和开源的React repos，看看它们是怎么做的（组件在哪里，常量在哪里，脚本在哪里，它们在这些子文件夹中的处理方式等）。然后选择最适合您的那个。

对于您的前几个个人React项目，一个不错的选择可能是尝试一些不同的结构，并让您感觉最简单。

基本上，没有做到这一点的“正确”方法。任何合乎逻辑，直观，易于导航并会保留下来的方式都是可以接受的结构。

Answer 3

src文件夹的常见文件结构之一是grouping by features or routes。

另一种方法是拥有文件grouped by types（组件，API，实用程序等）。

第一个方法对我来说是一种更好的方法，因为当项目太大时，第二个方法将变得难以导航。

还有一个称为ARc的体系结构。通过将它们分为几组，可以帮助您构建和构造组件：

• 原子
• 分子
• 生物
• 模板
• 页面