大家好，我是若川。持續組織了近一年的源碼共讀活動，感興趣的可以?加我微信?ruochuan12?參與，每周大家一起學習200行左右的源碼，共同進步。同時極力推薦訂閱我寫的《學習源碼整體架構系列》?包含20余篇源碼文章。歷史面試系列。另外：目前建有江西|湖南|湖北籍前端群，可加我微信進群。
之前有很多小伙伴問過我，通過文檔或者視頻學習 React ?已經有一段時間了，想學習一些好的開源項目來獲得一些實戰經驗。我之前也沒有很好的答案，確實很難找，因為一般企業級應用都是不開源的，Github 上大部分都是很簡單的 DEMO 項目，很難挑選。
今天就給大家梳理了幾個我覺得還不錯的 React 開源項目。
Jira Clone
倉庫：https://github.com/oldboyxx/jira_clone
Github Star：8.6K
這是一個基于 React 開發的模仿 Jira 的項目，前端全部使用 React Hooks 實現 。另外還有一些其他亮點：
后端是基于
TypeScript的TypeORM，和Postgres進行通信在前端使用自定義
Webpack配置基于
Cypress進行端到端測試
作者還使用 styled-components 和全局樣式進行混合開發，使他看起來和 Jira 非常像。
RealWorld aka Conduit
倉庫：https://github.com/gothinkster/react-redux-realworld-example-app
Github Star：5.3K
預覽：https://react-redux.realworld.io/
Thinkster 的 RealWorld 以超過 24 種不同的語言和框架重新實現了一個相同的應用程序（一個名為 Conduit 的仿 Medium.com 程序），這是它的 React/Redux 版本。
它基于 create-react-app 創建，用 react-router 實現路由，用 Redux 實現狀態管理，基于 classNames 編寫樣式，基于 superagent 請求遠程數據。
Real World App
倉庫：https://github.com/cypress-io/cypress-realworld-app
Github Star：3.7K
Real World App 是使用 Cypress 對程序進行端到端測試的一個很好的 DEMO 項目。在 repo 中包含了示例數據，自動化測試和應用程序都可以開箱即用地運行。
它基于 create-react-app 構建，使用 TypeScript 編寫，帶有 Express 后端，使用 Material UI 作為 UI/組件庫，使用 Formik 實現表單，使用 react-router 實現路由。
HospitalRun
倉庫：https://github.com/HospitalRun/hospitalrun-frontend
Github Star：6.5K
HospitalRun 是一個成熟的電子健康記錄系統 (EHR) 和醫院信息系統 (HIS) ?Web 應用。它是一個非常完整的 OSS 解決方案。使用 TypeScript + React 編寫，并使用 SCSS 編寫樣式。大多數組件都存在于 components 包中。
Simorgh
倉庫：https://github.com/bbc/simorgh
Github Star：751
預覽：https://astexplorer.net/
Simorgh 是 BBC（沒錯，就是那個天天抹黑中國的新聞網站） 的 React SPA，目前為全球數百萬生產用戶提供服務。它正在逐步推廣到每個 BBC World Service News 網站。
它使用 PropTypes 進行類型檢查，使用 Jest 和 Enzyme 進行單元測試（覆蓋率已經達到 98% ），使用 Cypress 進行端到端測試，使用 styled-components 編寫樣式，使用 Express 處理服務端渲染。
AST Explorer
倉庫：https://github.com/fkling/astexplorer
Github Star：4.8K
AST Explorer 是一個在線生成抽象語法樹的工具。
作為一個 React 項目很值得一試，因為它是持續開發很多年項目的一個很好的例子。使用 PropTypes 進行類型檢查，使用 Redux 進行狀態管理。
雖然你不會在這里找到像 TypeScript/Flow 這樣的花哨的東西，但它的代碼注釋很完善，也很清楚地指出了很多編碼技巧。另外，它們也逐步在將類組件遷移到 Hooks 上。
Excalidraw
倉庫：https://github.com/excalidraw/excalidraw/
Github Star：31.2K
Excalidraw 是一個在線圖形繪制工具（手繪風格），我一直在用。
它使用 TypeScript + React Hooks 編寫，使用 SCSS 進行樣式處理。
Spectrum
倉庫：https://github.com/withspectrum/spectrum
Github Star：10.6K
Spectrum 是一個社區網站，它的目標是將實時聊天應用程序的功能和論壇的功能結合起來。它自從 2017 年初以來一直在積極開發中，并于 2018 年底被 GitHub 收購。
Spectrum 在早期是非常有趣的，因為它使用 RethinkDB 實時更新查詢、服務器渲染和 GraphQL（在當時看來都是非常先進的技術）。
代碼庫使用 Flow 進行類型檢查，使用 Apollo (GraphQL) 進行數據獲取，使用 Redux 進行狀態管理，使用 Express 服務器進行服務器渲染，并編寫了大量的自定義 React Hooks。
Sentry
倉庫：https://github.com/getsentry/sentry
Github Star：31.5K
Sentry 是一個開源的前端異常監控工具。后端基于 Django 實現，前端基于 TypeScript + React 實現，使用 Emotion 進行樣式管理，基于 react-router 實現路由，使用 Redux 進行狀態管理。
Grafana
倉庫：https://github.com/grafana/grafana
Github Star：50.2K
它是一個正在從 AngularJS 遷移到 React 的項目，基于 TypeScript 編寫，用 Redux 進行狀態管理。
GoAlert
倉庫：https://github.com/target/goalert
Github Star：1.7K
GoAlert 是一個開源的 oncall 調度程序和通知程序（類似于 PagerDuty 或 Opsgenie）。
他的后端是 Go 實現的，使用 Apollo (GraphQL) 進行數據獲取，使用 react-router 實現路由，使用 Redux 進行狀態管理，Cypress 進行端到端測試，使用 Material UI 用于樣式組件，使用原生的 CSS 編寫樣式。
最后
參考鏈接：https://maxrozen.com/examples-of-large-production-grade-open-source-react-apps
我在阿里招前端，我該怎么幫你？（現在還可以加模擬面試群）
如何拿下阿里巴巴 P6 的前端 Offer
如何準備阿里P6/P7前端面試--項目經歷準備篇
大廠面試官常問的亮點，該如何做出？
如何從初級到專家(P4-P7)打破成長瓶頸和有效突破
若川知乎問答：2年前端經驗，做的項目沒什么技術含量，怎么辦？
如何準備20K+的大廠前端面試
·················?若川簡介?·················
你好，我是若川，畢業于江西高校。現在是一名前端開發“工程師”。寫有《學習源碼整體架構系列》20余篇，在知乎、掘金收獲超百萬閱讀。
從2014年起，每年都會寫一篇年度總結，已經堅持寫了8年，點擊查看年度總結。
同時，最近組織了源碼共讀活動，幫助4000+前端人學會看源碼。公眾號愿景：幫助5年內前端人走向前列。
掃碼加我微信 lxchuan12、拉你進源碼共讀群
今日話題
目前建有江西|湖南|湖北?籍 前端群，想進群的可以加我微信 lxchuan12?進群。分享、收藏、點贊、在看我的文章就是對我最大的支持~
)
