大家好，我是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