reactjs - 什么是正确的反应应用程序文件结构？

Question

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

例如，我总是使用create-react-app. 在src里面的文件夹中，默认create-react-app有index.js index.css, App.js, 和App.css文件（还有几个文件，但我暂时不考虑）。

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

我有一种强烈的感觉，也许我完全走错了路。我正在对此进行一些研究，似乎每个教程都有不同的结构。我是否按照我的意愿构建它？如果是这样，最合适的方法是什么？

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

标签： reactjs

Answer 1

实际上并没有一种“正确”的方式来构建您的应用程序。实际上，您可以根据项目的需要进行调整。话虽如此，我可能可以帮助您澄清一些事情，并为您提供一些帮助您入门的东西。

1. index.js 是您的 javascript 应用程序的入口点。在其中，通常会启动您的反应应用程序。寻找一行reactDom.render(<App />, 'root);这样说，在相应的 html 文件中找到一个 id 为 root 的 html 元素（在神奇的构建过程中找到，当前由 create react app 隐藏），然后将 react 渲染的内容换成 html节点。
2. 将 react 组件分为三组是很常见的：（1）容器；(2) 组件；(3) 页数。对于更简单的 React 应用程序，容器通常负责获取数据、布置一系列组件并将数据传递给它们。组件旨在封装一些特定的功能，然后可以在容器中重用/布局。然后，页面是 1 个或多个容器的集合，这些容器可以逻辑地组合在一个页面中。我建议利用react-router 之类的东西来让你的生活更轻松。它允许你说，对于这条路线，渲染这个组件。 知道组件在这里是一个重载的术语，因为正如我刚刚描述的那样，它用于在架构上表示一件事，但同时所有三种架构类型都只是在一天结束时反应组件。它们只是帮助您思考的类别。

我强烈建议您从阅读react的介绍文档开始。如果您来自 OOP 背景，我 会在不久前为一些希望涉足 react 的 Java 同事整理这些内容。我尝试以 80/20 的准确度让您移动。