React应用的结构如何？

Question

我刚开始使用React，但我很难把头放在项目的实际“流程”上。

我已经在这个网站上搜索和搜索了有关React应用程序的结构，但是其中大多数解决了文件结构的问题，并且通常以“ 一种正确的文件结构方式”。

但是我正在寻找比这更高级的东西。我只是想了解React提供的所有组件如何融合在一起。如果我什至不完全了解每个文件之间的关系，我什至不必担心我如何组织文件。

作为我的意思的示例-使用MVC应用程序时，您具有三个“高级”组件：模型，视图和控制器。它们的目的和彼此之间的关系是截然不同的。视图处理显示，模型处理数据，控制器处理它们之间的连接。您可以找到简单的参考图来跟踪此组织。

当然，React不是它自己的范例，我知道它完全专注于前端，但是我很好奇是否存在类似的方式来描述典型React应用程序的各个部分。容器，组件，reducer，动作等如何一起工作以产生最终结果。

Answer 1

我同意MarkoGrešak的评论。您可以边学习边了解代码。

但是，如果您迷路了（我也是），我可以告诉您一些我看到的体系结构：

我的老师分裂了逻辑和观点。在一个文件夹中，您可以找到您的组件；在一个文件夹中，您可以找到经典的JS类，其中包含处理组件打印内容背后逻辑的所有函数。每个组件都导入了自己的css文件，仅包含该组件的样式。我们将其用于MobX。
• 在工作中，我们有一个js文件夹，其中包含一个components文件夹，一个位于“行尾”的组件，一个container文件夹，一个包含其他组件的组件，一个存储所有Redux的存储文件夹，用于图像等的资产文件夹，以及用于我们可能要调用的其他功能的实用程序文件夹。与js文件夹处于同一级别，我们有一个sass文件夹。这绝不是“正确”或“要求”的做事方式。
• 通常，您会发现很多教程和其他有关笨拙和智能组件的内容-在仅接收道具并打印它们的组件与访问数据并对其进行操作的组件之间进行划分。最后有点像我们的容器/组件系统。

最后，您可以自由地做自己想做的事。只是尝试在划分事物的方式上保持一定的逻辑，以使其整体上有意义，但是没有固定的规则。