React 项目中更好的文件结构

React 项目是否存在完美的文件结构？可能没有。但有些文件结构比其他文件结构好得多。

多年来，我发现我倾向于以某些特定的方式来构造文件，我认为这更容易理解和合理。

有意义的文件夹名称

在编程中，命名是最难的事情之一。我最喜欢的文件夹命名策略之一是提取主题并使用它：

• 想要一个存放公共资源的地方？public文件夹应该很合适；
• 有一些你引以为豪的自定义钩子吗？把它们放在文件夹中，方便查找hooks；
• 还想包含另一个css文件吗？请将它们存储在css文件夹中。

等等等等。

几乎没有文件夹嵌套

我一直对这个src文件夹以及它存在的原因感到好奇。直到今天，它仍然是编程领域众多谜团之一。

我喜欢将所有文件夹尽可能放置在靠近项目根目录的位置。这样，任何参与该项目的新开发人员都能更轻松地找到它们。

React 官方文档也建议避免过多的嵌套。

按特征分组

该components文件夹是我的一个例外：它有两 (2) 层嵌套。通用组件可以直接从文件夹根目录访问，而“专用”组件则有自己的文件夹。

文件夹的内容components：

• Button.jsx- 常用按钮组件
• Link.jsx- 通用链接组件
• Forms
  • AddClientForm.jsx- 特定的“表单”组件
  • EditClientForm.jsx- 另一个特定的“表单”组件

最小示例

这是我创作的启动项目以及我现在正在进行的许多项目的项目结构。

• api
• components
• css
• data
• functions
• hooks
• models
• pages
• public
• LICENSE
• README.md

我希望文件夹结构清晰易懂。如果不是，那说明我的文件夹命名很糟糕。请在下方评论区留言告诉我。

总结

我最喜欢的文件结构：

• 易于阅读和理解
• 是浅嵌套
• 按特征分组

有不同意见吗？迫不及待想听！