這些 Github 項目，藏着 React 最前沿的技術

開源項目很棒，其中之一的原因就是，我們可以從中學習新技能。在本文中，我們將介紹一些在 GitHub 上的最佳開源 React 項目，可以幫助你快速提升 React 編程技能和實踐經驗。

React 教程只能帶你走這麼遠

當你第一次着手開發一個大型應用時，很多開發者會遇到一些問題，比如 “如何高效地管理文件夾結構？” 或者“如何在一個大型應用中傳遞狀態？”。這些都是實際編碼中遇到的問題，而這些問題往往需要團隊合作才能更好地解決。

開源——一個免費的大學

培養這些技能的一種方法是加入這樣的團隊，親眼看看高級開發者是如何處理應用的。但是，尤其是當你剛開始學習，還沒有找到工作時，這樣的機會可能很少。

幸運的是，有一種不需要經驗或面試的免費替代方案。

開源。

開源倉庫讓你能夠立即參與到大型項目中。這幾乎就像是一個祕密通道，作爲開發者加入這些團隊，並通過爲項目做出貢獻獲得其他開發者的反饋。

我們喜愛開源的衆多原因之一

這就是我們喜愛開源的衆多原因之一。它不僅對項目和維護者本身有益（通過獲得社區的貢獻和反饋），而且對整個社區中的所有成員都是一個巨大的互惠。開源爲每個開發者提供了即時獲取信息、反饋和實踐經驗的機會，幫助他們成長和進步。

“Preevy”——一個讓開發者生活更輕鬆的開源工具

這些只是我們對我們的開源工具 “Preevy”https://github.com/livecycle/preevy[1] 發佈感到非常興奮的原因之一。它不僅可以讓開發團隊受益（通過輕鬆創建可共享的預覽環境），而且還是我們與社區中其他對學習和貢獻此類項目感興趣的開發者互動的好方式。

歡迎隨時查看、給我們點贊並做出貢獻 ❤️❤️❤️！

有了這個背景，讓我們放鬆一下，來看一些在 GitHub 上可以幫助你快速提升 React 學習和經驗的最佳開源 React 項目。

可以學習的開源 React 項目

Cal.com

https://github.com/calcom/cal.com[2]

Cal.com 自稱爲 “面向所有人的調度基礎設施”。他們是 Calendly 等預約調度服務的競爭對手。他們提供託管和自託管的兩種解決方案。這是一個基於 Next.js 的全棧應用程序，依賴於 tRPC 實現類型安全的客戶端與服務器通信。該存儲庫採用了相當龐大的 Monorepo 設置（使用 Turborepo），將應用程序拆分爲多個包。在樣式方面，Cal.com 使用了 TailwindCSS 和無頭 Radix 組件。該存儲庫非常活躍，他們積極鼓勵貢獻者。許多問題被標記爲 “good first issue”（適合初次貢獻的問題）和 “help wanted”（需要幫助的問題）。

Taxonomy

https://github.com/shadcn/taxonomy[3]

這個項目與衆不同。它是由一位開發者構建的演示項目，用於探索新的 Next.js 13 App Router 功能。但是不要被它所欺騙。這可能是目前爲止使用新的 App

Router 的最全面的開源應用程序之一。因此，即使是有經驗的 React 開發人員，也可以從中學習如何在實際生產中使用 App Router。

除了前端和後端都使用 Next.js 之外，Taxonomy 還使用 NextAuth 進行身份驗證，Prisma 作爲 ORM，以及 TailwindCSS 和 Radix 進行樣式設計。特別有趣的是 Stripe 訂閱集成。因此，如果您想學習如何將訂閱集成到您的應用程序中，這個存儲庫非常適合您。

Highstorm

https://github.com/chronark/highstorm[4]

Highstorm 是一個新興的服務，用於監控應用程序中發生的事件。您可以通過他們的 API 提交事件，然後這些事件將被傳送到 Highstorm 的儀表板中。同樣，這是一個基於 Next.js 的項目。它使用 Tinybird 作爲分析數據的數據庫，使用 Clerk 進行身份驗證。如果您想學習如何處理大量分析數據並在漂亮的圖表中展示它們，這個項目非常適合您。

Dub.sh

https://github.com/steven-tey/dub[5]

Dub.sh 是大約一年前推出的開源鏈接縮短服務。它是 Bitly 等服務的替代品。它也是基於 Next.js 的，使用了舊版頁面和新版 App Router 的組合。它通常是最早採用新的 Next.js 功能（如元數據 API）的項目之一。

這個存儲庫是學習多租戶 Next.js 應用程序的好地方。多

租戶應用程序是爲不同的用戶在不同的域下提供服務的應用程序。在 Dub.sh 的情況下，用戶可以添加自己的域名來創建縮短鏈接。該應用程序設計得非常漂亮，在整個網站上有很多愉快的動畫效果。使用 Framer Motion 庫可以幫助實現這一點。

Bulletproof React

https://github.com/alan2207/bulletproof-react[6]

與我們迄今爲止介紹的其他項目不同，Bulletproof React 的價值不僅在於其中包含一個完全功能的 React 演示應用程序，而且還在於配套的詳細文檔。這份文檔闡述了設計大規模 React 應用程序的各個方面的最佳實踐。這是一個很好的資源，可以定期參考，以鞏固您對最佳實踐的記憶。

總結和開始

正如我們所看到的，以上每個存儲庫都提供了構建大規模 React 應用程序的獨特視角。無論您的經驗如何，每個人都可以從研究這些存儲庫的代碼中受益。

開始從存儲庫學習的一個很好的實用提示是提出一個具體的問題。例如，您可以問類似於 “Taxonomy 如何處理 Stripe 訂閱？” 的問題。然後，通過代碼層層深入，找到您問題的答案。

最後一點是，探索開源存儲庫是提升您的 React 技能的好方法，但這並不是您應該做的唯一事情。同樣重要的是將您新獲得的知識應用到自己的項目中。這樣您就可以鞏固新的技能並保留這些信息。

最重要的是享受這個過程，並認識到開源是一個友好的地方，可以發展新的技能，無論您當前的經驗水平如何。

翻譯 / 潤色 from：https://dev.to/livecycle/top-github-repositories-to-learn-modern-react-development-5d3h

參考資料

[1]

https://github.com/livecycle/preevy: https://github.com/livecycle/preevy

[2]

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

[3]

https://github.com/shadcn/taxonomy: https://github.com/shadcn/taxonomy

[4]

https://github.com/chronark/highstorm: https://github.com/chronark/highstorm

[5]

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

[6]

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

本文由 Readfog 進行 AMP 轉碼，版權歸原作者所有。
來源：https://mp.weixin.qq.com/s/YJPU03e7bFna2MQcdUgb0g