学习现代 React 开发的顶级 GitHub 存储库

TL;DR

开源有很多好处，其中之一就是学习新技能。本文将介绍 GitHub 上一些优秀的开源 React 项目，你可以利用这些项目快速提升 React 的学习和编程经验。

React 教程只能带你走这么远

网上有很多 React 教程。其中很多都是学习 React 基础知识的优秀资源。但大多数课程在解释现代 React 应用的各个部分如何相互关联方面存在不足。

许多开发者初次开发大型应用程序时，都会遇到诸如“如何高效管理文件夹结构？”或“如何在大型应用程序之间传递状态？”之类的问题。这类“现实生活中”的编程问题，在课堂之外，那些拥有实际合作开发大型应用程序经验的团队，往往能更好地解决这些问题。

开源——自由大学

培养这些技能的方法之一是加入这样的团队，亲眼看看高级开发人员是如何开发应用程序的。虽然这种方法听起来很简单，但机会似乎很少，尤其是在你职业生涯刚刚起步、还没有找到工作的情况下。

值得庆幸的是，有一个免费的替代方案，不需要经验或面试。

开源。

开源代码库让你能够立即参与大型项目。以开发者身份加入这些团队，并通过为项目做出贡献来获得其他开发者的反馈，这几乎就像一个后门作弊代码。

我们热爱开源的众多原因之一

这是我们热爱开源的众多原因之一。开源不仅对项目和维护者本身有益（通过获得社区的贡献和意见），而且对整个社区成员也大有裨益。开源让每位开发者都能立即获得信息、反馈和实践经验，从而帮助他们成长进步。

“Preevy”——一款让开发人员生活更轻松的开源工具

这些只是我们对开源工具“Preevy” https://github.com/livecycle/preevy 的发布感到如此兴奋的部分原因。它不仅能让开发团队从中受益（通过轻松创建可共享的预览环境），也为我们提供了一个与社区中其他有兴趣学习并为此类项目做出贡献的开发者互动的绝佳方式。

请随意查看，给我们留一颗星并做出贡献❤️❤️❤️！

因此，在这样的背景下，让我们安顿下来，看看 GitHub 上的一些最好的开源 React 项目，您可以使用这些项目快速提升您的 React 学习和经验。

您可以从开源 React 项目学习

Cal.com

https://github.com/calcom/cal.com

Cal.com 自称是“为所有人提供日程安排基础设施”。他们是 Calendly 等预约安排服务的竞争对手。他们提供托管和自托管两种服务。这是一款全栈 Next.js 应用，依赖 tRPC 实现类型安全的客户端到服务器通信。该代码库拥有相当广泛的 Monorepo 设置（使用 Turborepo），可将应用拆分成多个包。在样式方面，Cal.com 使用 TailwindCSS 和 Headless Radix 组件。该代码库非常活跃，并积极鼓励贡献者。许多问题都被标记为“good first issue”和“help wanted”。

分类法

https://github.com/shadcn/taxonomy

这个有点不同。它是由一位开发者构建的，作为演示版本，用于探索 Next.js 13 应用路由器的新功能。但别被它迷惑了。它可以说是目前使用新应用路由器最全面的开源应用之一。因此，即使对于想要学习如何在生产环境中使用应用路由器的经验丰富的 React 开发者来说，这也是一个很棒的资源。

除了前端和后端均使用 Next.js 之外，Taxonomy 还使用 NextAuth 进行身份验证，使用 Prisma 作为 ORM，并使用 TailwindCSS 和 Radix 进行样式设置。Stripe 订阅集成尤其引人注目。如果您想了解如何将订阅功能集成到您的应用中，那么这里就是您的理想存储库。

高风暴

https://github.com/chronark/highstorm

Highstorm 是该领域的新秀。它是一项监控应用程序中发生的事件的服务。您可以通过其 API 提交事件，然后这些事件会被输入到 Highstorm 仪表板。同样，这是一个基于 Next.js 的项目。它使用 Tinybird 作为分析数据的数据库，并使用 Clerk 进行身份验证。如果您想学习如何处理大量分析数据并将其显示在精美的图表中，这个项目非常适合您。

都柏林

https://github.com/steven-tey/dub

Dub.sh 大约一年前作为开源链接缩短器推出，是 Bitly 等服务的替代方案。它也基于 Next.js，并结合使用了旧版 Pages 和新版 App 路由器。它通常是首批采用 Next.js 新功能（例如 Metadata API）的项目之一。

该代码库是了解多租户 Next 应用的绝佳去处。这些应用服务于不同域名下的不同用户。例如，Dub.sh 允许用户添加自己的域名来创建短链接。该应用设计精美，网站上充满了各种有趣的动画。Framer Motion 库为此提供了帮助。

防弹反应

https://github.com/alan2207/bulletproof-react

Bulletproof React 与我们迄今为止介绍的其他项目有所不同。该仓库确实包含一个功能齐全的 React 应用演示。但最有价值的还是阅读该应用附带的详尽文档。该文档列出了设计大型 React 应用各个方面的最佳实践。这是一个值得定期参考的宝贵资源，可以帮助您重温最佳实践。

总结和开始

正如我们所见，上述每个代码库都提供了构建大规模 React 应用程序的独特视角。无论您的经验多么丰富，每个人都可以从研究这些代码库的代码中受益。

开始从代码库学习的一个实用技巧是提出一个具体的问题。例如，你可以问“Taxonomy 如何处理 Stripe 订阅？”。然后深入研究代码层，找到问题的答案。

最后一点——探索开源代码库是提升 React 技能的好方法，但这不是你唯一应该做的事情。将新学到的知识应用到你自己的项目中也很重要。这样你才能巩固新技能并记住知识。

最重要的是享受这个过程，并认识到开源是一个培养新技能的友好场所，无论你目前的经验水平如何。