我如何构建 React 项目

有很多关于如何构建 Web 应用程序（尤其是 React）的指南。

• 根据智能/哑组件将文件移动到文件夹中。
• 按页眉/主页/页脚组织它们
• 或者将所有内容都放到组件中并将它们组合到页面中？？？

我一直不太确定要不要使用这些约定。
大约两个月前，我开始了一个新项目。简单的技术栈：React + Express + MySQL。
几次提交之后，我不得不把组件移到别处。
经过一番研究，我发现了一些有希望的东西。
它基于以下两个资源：

1. Dan Abramov 的官方指南
2. 布拉德·弗罗斯特的原子设计

丹给了我自由，布拉德给了我结构😅

原子设计引入了一种全新的、抽象的思考项目结构的方式。组件是应用程序的构建块，例如
原子、分子、有机体、模板和页面。这个概念为我们思考结构的方式带来了一股清新的气息。
就我的目的而言，我使用了前三种，但我鼓励你阅读 Brad 的指南并根据你的喜好进行调整。

我从一张草图开始：

主要思路：
3 个文件夹：原子、分子、有机体。
如果组件包含逻辑/状态，则将其移至有机体。
如果组件包含其他组件，则将其移至分子。
否则，该组件为原子。

我喜欢有机类比。它为 React 组件创建了一个思维和逻辑的盒子。如果需要，我可以为 Utils、Routes、API 等添加更多非有机文件夹。
按钮将位于 Atoms 中。
卡片将位于 Molecules 中。
带有 Hooks 的组件将位于 Organisms 中。

src/
  Atoms/
    Button
    ProjectName
    ...
  Molecules/
    ControlBar
    DaysList
    ...
  Organisms/
    User
    CreateUser
    ...
  Utils
    formatMonthData.js

目前，这在我的项目中运行良好，没有任何缺陷。等我的项目发展壮大后，我会重新评估这个概念。