组织 React 项目的技巧

没有唯一的出路

1.

2.

3.

4.

5.

6.

7.

8.

9.

10.

最后

这最初是在 Twitter 上发布的：https://twitter.com/chrisachard/status/1239993582397816838

没有唯一的出路

React 是一个故意不提供有关如何构建项目的指导的库 - 这可能会让开发人员感到困惑。

虽然没有硬性规定，但也有一些最佳实践 - 因此这里有 10 条关于如何构建 React 项目的提示。

1.

首先，最重要的是：做对您和您的团队有用的事情

有很多建议，其中很多都是相互冲突的

不要因为没有“正确”地做事而感到焦虑

如果它适合你和你的团队——那么这就是“正确的方法”

2.

话虽如此：

将所有组件和相关代码保存在一个src文件夹中

顶层的另一个文件夹应该public包含静态资产

您要导入组件内部的图像应该位于src，而不是public

3.

共享组件放在名为components或的文件夹中shared

在 中components，按功能对文件进行分组；例如，有一个用于form组件的文件夹，一个用于user组件的文件夹，等等

4.

但不要过早优化！

一开始，把所有组件都放到同一个文件夹中就可以了。等你对应用的整体外观有了更清晰的了解后，再清理它们。

包括每个文件有多个组件……没问题！如果你以后不喜欢，那就清理掉吧。

5.

pages将整个页面（路由端点）保存在名为or的文件夹中screens（适用于 React Native）

在其中，将文件按页面分组放入文件夹中

index.js将主要组件命名为MyPageXYZ.js

（我喜欢这个MyPageXYZ.js，因为我不喜欢有 100 个index.js文件 - 但它确实使导入变得更加复杂）

6.

如果文件的默认导出是 React 组件，则将该文件名大写，就像组件本身一样

这是向其他开发者发出的一个信号，表明组件正在导出

7.

使用绝对进口！

而不是：

import MyComponent from '../../components/pages/MyComponent'

设置绝对导入并将其转换为：

import MyComponent from 'pages/MyComponent'

好多了！🎉

这是文档：

https://create-react-app.dev/docs/importing-a-component/#absolute-imports

8.

我喜欢使用 css-in-js，或者将 css 文件放在它们所使用的组件旁边

对我来说，将 css 文件集中在一个stylesheets文件夹中不再是一种很好的选择，但你的情况可能有所不同 - 按照你认为最好的方式去做

9.

有一个lib或utils文件夹用于存放不可避免创建的随机 js 辅助函数。

如果你不从一个开始，这些函数就会散布在你的代码中，很难共享和查找

10.

如果使用 redux，你可以有单独的actions、reducers等文件夹（这就是我的做法）

或者

将其保存在redux文件夹中（有时称为“鸭子”图案）

不管怎样都可以

无论如何，我强烈推荐 Redux 工具包：https://redux-toolkit.js.org/

最后

这些都只是我的观点！

其他人可能会提出异议，因为他们发现了对他们来说更有效的东西——这很棒；

找到适合你的方法，并使用它🙌

感谢阅读！如果你喜欢这篇文章：

🐦 你可以在 Twitter 上找到我：@chrisachard

💌 或者订阅我的新闻通讯：https://chrisachard.com/newsletter