为React组件和函数（包括文件名）命名最佳实践

Question

我注意到许多项目使用大写的类名和小写的文件名来命名它们的react组件。为什么会有所不同？

Answer 1

我认为这不是最佳实践。该文件的名称应与React组件的名称相同，并应使用 PascalCase 编写。

例如：Navigation.jsx exports Navigation class component

有关命名约定的更多信息：

• Hackernoon on Medium
• Stackoverflow question

奖励：在React项目中构建文件和文件夹：

• Yay, Hackernoon again!

• Alexis Mangin's post

• 如果您不使用redux，则可能不需要阅读此书，但是它在 function-first 和 feature-first 分组技术。 Alex Moldovan's post

编辑：来自nextjs official website

  

Next.js将在/pages中以与   文件名。

     

例如，/pages/about.js在site.com/about投放。

因此，对于Nextjs，他们希望将组件文件和页面文件分开，因为页面文件用于路由。

Answer 2

我认为与所有javascript框架相同，应该是

• Presentational和Container组件保存在src / components中 按模块/功能对组件进行分组。
• 将通用组件保留在src / components / UI内使屏幕保持简单， 用最少的结构和代码。
• 列出要路由的项目组屏幕 定义。对于路由/用户/列表，我们将在以下位置显示一个屏幕 /src/screens/User/List.jsx。

像这样的东西最后，我们的应用程序将像这样

这是一种宝贵的资源，可作为reference

---