这些 Github 项目，藏着 React 最前沿的技术
首发于公众号 前端从进阶到入院，欢迎关注。
TL;DR
开源项目很棒，其中之一的原因就是，我们可以从中学习新技能。在本文中，我们将介绍一些在 GitHub 上的最佳开源 React 项目，可以帮助你快速提升 React 编程技能和实践经验。
React 教程只能带你走这么远
在线上有很多 React 教程可供学习。其中很多都是教授 React 基础知识的优秀资源。但是大多数教程在解释现代 React 应用的不同组成部分如何连接在一起时往往不够深入。
当你第一次着手开发一个大型应用时，很多开发者会遇到一些问题，比如“如何高效地管理文件夹结构？”或者“如何在一个大型应用中传递状态？”。这些都是实际编码中遇到的问题，而这些问题往往需要团队合作才能更好地解决。
开源——一个免费的大学
培养这些技能的一种方法是加入这样的团队，亲眼看看高级开发者是如何处理应用的。但是，尤其是当你刚开始学习，还没有找到工作时，这样的机会可能很少。
幸运的是，有一种不需要经验或面试的免费替代方案。
开源。
开源仓库让你能够立即参与到大型项目中。这几乎就像是一个秘密通道，作为开发者加入这些团队，并通过为项目做出贡献获得其他开发者的反馈。
我们喜爱开源的众多原因之一
这就是我们喜爱开源的众多原因之一。它不仅对项目和维护者本身有益（通过获得社区的贡献和反馈），而且对整个社区中的所有成员都是一个巨大的互惠。开源为每个开发者提供了即时获取信息、反馈和实践经验的机会，帮助他们成长和进步。
“Preevy”——一个让开发者生活更轻松的开源工具
这些只是我们对我们的开源工具“Preevy”github.com/livecycle/p…发布感到非常兴奋的原因之一。它不仅可以让开发团队受益（通过
轻松创建可共享的预览环境），而且还是我们与社区中其他对学习和贡献此类项目感兴趣的开发者互动的好方式。
欢迎随时查看、给我们点赞并做出贡献 ❤️❤️❤️！
有了这个背景，让我们放松一下，来看一些在 GitHub 上可以帮助你快速提升 React 学习和经验的最佳开源 React 项目。
可以学习的开源 React 项目
Cal.com
Cal.com 自称为“面向所有人的调度基础设施”。他们是 Calendly 等预约调度服务的竞争对手。他们提供托管和自托管的两种解决方案。这是一个基于 Next.js 的全栈应用程序，依赖于 tRPC 实现类型安全的客户端与服务器通信。该存储库采用了相当庞大的 Monorepo 设置（使用 Turborepo），将应用程序拆分为多个包。在样式方面，Cal.com 使用了 TailwindCSS 和无头 Radix 组件。该存储库非常活跃，他们积极鼓励贡献者。许多问题被标记为“good first issue”（适合初次贡献的问题）和“help wanted”（需要帮助的问题）。
Taxonomy
这个项目与众不同。它是由一位开发者构建的演示项目，用于探索新的 Next.js 13 App Router 功能。但是不要被它所欺骗。这可能是目前为止使用新的 App
Router 的最全面的开源应用程序之一。因此，即使是有经验的 React 开发人员，也可以从中学习如何在实际生产中使用 App Router。
除了前端和后端都使用 Next.js 之外，Taxonomy 还使用 NextAuth 进行身份验证，Prisma 作为 ORM，以及 TailwindCSS 和 Radix 进行样式设计。特别有趣的是 Stripe 订阅集成。因此，如果您想学习如何将订阅集成到您的应用程序中，这个存储库非常适合您。
Highstorm
Highstorm 是一个新兴的服务，用于监控应用程序中发生的事件。您可以通过他们的 API 提交事件，然后这些事件将被传送到 Highstorm 的仪表板中。同样，这是一个基于 Next.js 的项目。它使用 Tinybird 作为分析数据的数据库，使用 Clerk 进行身份验证。如果您想学习如何处理大量分析数据并在漂亮的图表中展示它们，这个项目非常适合您。
Dub.sh
Dub.sh 是大约一年前推出的开源链接缩短服务。它是 Bitly 等服务的替代品。它也是基于 Next.js 的，使用了旧版页面和新版 App Router 的组合。它通常是最早采用新的 Next.js 功能（如元数据 API）的项目之一。
这个存储库是学习多租户 Next.js 应用程序的好地方。多
租户应用程序是为不同的用户在不同的域下提供服务的应用程序。在 Dub.sh 的情况下，用户可以添加自己的域名来创建缩短链接。该应用程序设计得非常漂亮，在整个网站上有很多愉快的动画效果。使用 Framer Motion 库可以帮助实现这一点。
Bulletproof React
与我们迄今为止介绍的其他项目不同，Bulletproof React 的价值不仅在于其中包含一个完全功能的 React 演示应用程序，而且还在于配套的详细文档。这份文档阐述了设计大规模 React 应用程序的各个方面的最佳实践。这是一个很好的资源，可以定期参考，以巩固您对最佳实践的记忆。
总结和开始
正如我们所看到的，以上每个存储库都提供了构建大规模 React 应用程序的独特视角。无论您的经验如何，每个人都可以从研究这些存储库的代码中受益。
开始从存储库学习的一个很好的实用提示是提出一个具体的问题。例如，您可以问类似于“Taxonomy 如何处理 Stripe 订阅？”的问题。然后，通过代码层层深入，找到您问题的答案。
最后一点是，探索开源存储库是提升您的 React 技能的好方法，但这并不是您应该做的唯一事情。同样重要的是将您新获得的知识应用到自己的项目中。这样您就可以巩固新的技能并保留这些信息。
最重要的是享受这个过程，并认识到开源是一个友好的地方，可以发展新的技能，无论您当前的经验水平如何。
翻译 / 润色：ssh
首发于公众号前端从进阶到入院，欢迎关注。
转载自:https://juejin.cn/post/7243352406134095909