有哪些值得學習的大型 React 開源項目？
大家好，我是ConardLi。
之前有很多小伙伴問過我，通過文檔或者視頻學習 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
