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

Question

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

例如，我总是使用 create-react-app 启动我的 React 应用程序。在create-react-app里面的src文件夹里面有index.js index.css, App.js 和 App.css 默认情况下的文件(还有几个文件，但我暂时忽略)。

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

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

如有错误请指正。谢谢!

Answer 1

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

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

我强烈建议您先阅读 react 的介绍文档.如果您来自 OOP 背景，我输入 this 一段时间前，一些希望涉足 React 的 Java 同事在一起。我尝试达到 80/20 的准确度，以确保让您动起来。