我如何构建我的 React.js 项目

将 React 应用程序组织成文件和文件夹是一个颇具争议的话题，因为没有绝对正确或错误的方法。我决定分享一下我最近是如何组织我的项目的。

警告：非常主观！

让我们开始吧。

单个文件

React 项目通常以一个src/文件夹和一个src/App.tsx带有 App 组件的文件开始。

在某些时候，您的应用程序具有更多功能、更多行，并且您需要制作更小的独立组件：

有时将多个组件放在一个文件中是可以的，尤其是当这些组件与主组件紧密耦合时。通常情况下，使用多个文件会更好，因为最终一个文件将不再足够用。

多个文件

我们可以将这些组件拆分成多个文件，而不是将所有代码都放在一个文件中。由于我们的项目目前还很小，我会这样做：

在上面的例子中，List 组件只导出了List，但它也有ListItem未导出的 组件。

如果你想更上一层楼，可以开始使用目录而不是文件。我还会提取出ListItemfrom List，并将其作为src/components/List/partials子目录中的独立组件：

从现在开始，我只会使用/components可重复使用组件的目录。

文件夹分离

接下来，我们将功能与组件分离。假设我们需要创建一个useUser钩子，因此我们将创建一个专用hooks目录并将其放入其中：

该hooks文件夹仅用于存放可重复使用的钩子。如果某个钩子仅由一个组件使用，则应将其保留在该组件自己的文件（或目录中）。

同样的原则也适用于许多其他事情。例如，如果我们需要创建一个可重用的服务，我们将创建一个services目录并将我们的服务放入其中：

分离视图

当我们为所有可重复使用的内容创建单独的目录，并将不可重复使用的内容仅保存在使用的地方时，我们已经取得了长足的进步。

最后，我想创建一个名为 的目录views。这些视图基本上是 URL 的表示。例如，目录User可以表示https://<url>/user等等。

这些视图当然可以导入可重复使用的服务或组件，但它们也有自己的不可重复使用内容的子目录。

以下是我的项目结构的示例：

关注 Twitter 了解更多：https://twitter.com/bjakyt