GitHub 上值得学习的开源 React 项目列表

GitHub 个人资料 README 生成器

随着你对 React.js 的了解不断增长，你会发现很多资源的代码示例比较简单，但高级内容却很少。而且很多资源都包含“过时的代码”（例如没有 hooks、到处都是类组件等等）。

如果你想知道如何构建一个中大型代码库？或者想知道自己做的每件事是否都正确？

提升技能的一个方法是研究其他开发者的做法。他们处理项目的方式可以让你学到一些可能需要几周时间才能学会的经验。

这就是为什么我列出了一些开源 React.js 应用供大家学习。它们都使用了诸如 Hooks、Context 等现代功能，并且很多都使用了 Redux-toolkit。所以，无论你是经验丰富的开发者，还是刚刚入门，都不妨看看！

1）Take Note – Live | Repo

Take Note 是一个开源笔记项目，被称为“开发者笔记应用程序”

这是一款支持 Markdown 的简单纯文本笔记应用。没有那些我们不需要的花哨东西 :)

代码看起来组织得很好：

它使用 React hooks（耶！）和redux-toolkit =）（参见slices文件夹）。

2）云音乐-Repo

这是网易云音乐流媒体服务的克隆版本。README 是中文的，但代码却是纯英文的。

这个项目使用了 redux（没有使用 redux-toolkit）和 hooks。我发现这个项目中比较有意思的是它的代码结构：

起初，它看起来非常标准，但在查看了 reducer（store/reducer.js）之后，我注意到它们正在将一些组件和样式与redux逻辑一起“分组”（在应用程序文件夹内） ：

3）Todoist 克隆 - Repo

Karl Hadwen制作了这个Todoist克隆版，他甚至在 Youtube 上发布了视频教程。

对于“后端”，他使用了Firebase，而不是从头构建 API。他使用了 context，而没有使用 redux（是的，你并不总是需要使用 redux）。

4）抵押贷款 –活期|回购

抵押贷款是抵押贷款超额付款计算器！

它使用D3绘制图表和钩子！虽然它很小，但对于学习如何在类似计算器的应用程序中运用钩子来说，它是一个很好的开始。

5）Tomato Work –直播| Repo

Tomato-work 是一个使用 React hooks 和 redux 编写的个人事务管理系统：

UI 部分，它使用了Antd，顺便说一句，它相当不错。代码结构很标准：

我觉得有趣的是，它有一个services文件夹（让我想起了 Angular），里面的每个文件都是一个 API 调用的抽象。所以，他没有直接在组件中调用 axios，而是使用了服务函数。

6）和我一起写作——直播| Repo

Write with me是一款实时协作 Markdown 编辑器，使用 React 编写，带有 hooks，并使用AWS Amplify

正如你所见，这是一个小项目：

因此，代码结构并非使用不同的文件夹来组织。所有状态管理都使用useReducer钩子完成。

有一个graphql文件夹，因为 Amplify 与 graphql 一起使用

7）JIRA 克隆 ​​-实时|回购

这是一个简化的 JIRA Clone，看起来很棒！

分析代码结构，可以看到它使用 cypress 和 jest 进行测试：

正如作者所说，它是现代现实世界 React 代码库的一个很好的例子。它有以下特性（摘自 README）：

8）Spectrum –直播|回购

Spectrum 是一个允许您创建和参与精彩社区的平台。

我看到很多人推荐这个仓库。理由很充分：这个仓库就是他们的全部产品！

“话虽如此，这个代码库并不是典型的开源项目，因为它不是一个范围有限的库或包——而是我们的整个产品。”

在我看来，这是最好的开源全栈 React 项目之一，它展示了如何正确构建大型代码库

前端 SPA（React）位于src文件夹中

从文件夹结构中可以推断，它们根据代码“类型”（组件、减速器、钩子等）来划分代码。

9）GitHub 个人资料 README 生成器 –实时| Repo

该工具提供了一种简单的方法来创建 GitHub 个人资料 README，并附带最新的附加组件，如访客数量、GitHub 统计信息等。

这是一个使用 Hooks 的Gatsby项目示例。文件按类型组织，适合项目规模：

如果您还没有创建您的 GitHub 个人资料，也许您现在可以使用此工具来创建（我已经创建了！）

我是否错过了一个项目？

找到使用最新反应工具（例如 hooks）的开源项目有点困难😓。

如果您认为我错过了一个很酷的现代项目，请在评论中回复😊