大家好,我是若川。持续组织了近一年的源码共读活动,感兴趣的可以 加我微信 ruochuan12 参与,每周大家一起学习200行左右的源码,共同进步。同时极力推荐订阅我写的《学习源码整体架构系列》 包含20余篇源码文章。历史面试系列。另外:目前建有江西|湖南|湖北
籍前端群,可加我微信进群。
之前有很多小伙伴问过我,通过文档或者视频学习 React
已经有一段时间了,想学习一些好的开源项目来获得一些实战经验。我之前也没有很好的答案,确实很难找,因为一般企业级应用都是不开源的,Github
上大部分都是很简单的 DEMO
项目,很难挑选。
今天就给大家梳理了几个我觉得还不错的 React
开源项目。
Jira Clone
![4840d52d121a8b1088e9116d0dfe17c9.png](https://i-blog.csdnimg.cn/blog_migrate/54e40077b9b0aef3ce0cad6bef177839.png)
仓库: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
![73e85834f1cabe7a5069cb5e7a129c01.png](https://i-blog.csdnimg.cn/blog_migrate/5cbe46d2e6d334ed59e8dd575975a0f9.png)
仓库: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
![125086e441b1451195c1bc66ee83fef1.png](https://i-blog.csdnimg.cn/blog_migrate/ab8f3a1225bee26c0e44debdb92632a7.png)
仓库: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
![53714c4e2f47909429629f69f193e649.png](https://i-blog.csdnimg.cn/blog_migrate/3e79c04967ffceab0ad62090ba77fef2.png)
仓库:https://github.com/HospitalRun/hospitalrun-frontend
Github Star:6.5K
HospitalRun
是一个成熟的电子健康记录系统 (EHR
) 和医院信息系统 (HIS
) Web 应用。它是一个非常完整的 OSS
解决方案。使用 TypeScript + React
编写,并使用 SCSS
编写样式。大多数组件都存在于 components
包中。
Simorgh
![aec21c0614fda36143f1f4c1e39e68d1.png](https://i-blog.csdnimg.cn/blog_migrate/d449b9fa59705bc40778b94f45268613.png)
仓库: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
![1aa4d61144a2740cfb8d788a2ea8ce2a.png](https://i-blog.csdnimg.cn/blog_migrate/23a8ef3b3d72ec63415cbae59f4575a2.png)
仓库:https://github.com/fkling/astexplorer
Github Star:4.8K
AST Explorer
是一个在线生成抽象语法树的工具。
作为一个 React
项目很值得一试,因为它是持续开发很多年项目的一个很好的例子。使用 PropTypes
进行类型检查,使用 Redux
进行状态管理。
虽然你不会在这里找到像 TypeScript/Flow
这样的花哨的东西,但它的代码注释很完善,也很清楚地指出了很多编码技巧。另外,它们也逐步在将类组件迁移到 Hooks 上。
Excalidraw
![db6c233a48cbde01f8fb229b46a88a96.png](https://i-blog.csdnimg.cn/blog_migrate/37de4db1070dc27ae14e0efbbf477397.png)
仓库:https://github.com/excalidraw/excalidraw/
Github Star:31.2K
Excalidraw
是一个在线图形绘制工具(手绘风格),我一直在用。
它使用 TypeScript + React Hooks
编写,使用 SCSS
进行样式处理。
Spectrum
![724371d14f209e985ddc3f7f246b8137.png](https://i-blog.csdnimg.cn/blog_migrate/69cfb708ba05c6a8a6020573bb3bf5b0.png)
仓库:https://github.com/withspectrum/spectrum
Github Star:10.6K
Spectrum
是一个社区网站,它的目标是将实时聊天应用程序的功能和论坛的功能结合起来。它自从 2017
年初以来一直在积极开发中,并于 2018
年底被 GitHub
收购。
Spectrum
在早期是非常有趣的,因为它使用 RethinkDB
实时更新查询、服务器渲染和 GraphQL
(在当时看来都是非常先进的技术)。
代码库使用 Flow
进行类型检查,使用 Apollo (GraphQL)
进行数据获取,使用 Redux
进行状态管理,使用 Express
服务器进行服务器渲染,并编写了大量的自定义 React Hooks
。
Sentry
![fc255a1877e2bcf138b92f4131549c93.png](https://i-blog.csdnimg.cn/blog_migrate/1856a9a94a91784135d458ca47be1112.png)
仓库:https://github.com/getsentry/sentry
Github Star:31.5K
Sentry
是一个开源的前端异常监控工具。后端基于 Django
实现,前端基于 TypeScript + React
实现,使用 Emotion
进行样式管理,基于 react-router
实现路由,使用 Redux
进行状态管理。
Grafana
![63a2b93949bb17f9e0374f21ccae598a.png](https://i-blog.csdnimg.cn/blog_migrate/212e2d30a63d66de6c864752722a00f7.png)
仓库:https://github.com/grafana/grafana
Github Star:50.2K
它是一个正在从 AngularJS
迁移到 React
的项目,基于 TypeScript 编写,用 Redux
进行状态管理。
GoAlert
![45a6346e1a697d83ac31637d308d631a.png](https://i-blog.csdnimg.cn/blog_migrate/f1771df7efe652389dd3b006377464f1.png)
仓库: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年前端经验,做的项目没什么技术含量,怎么办?
················· 若川简介 ·················
你好,我是若川,毕业于江西高校。现在是一名前端开发“工程师”。写有《学习源码整体架构系列》20余篇,在知乎、掘金收获超百万阅读。
从2014年起,每年都会写一篇年度总结,已经坚持写了8年,点击查看年度总结。
同时,最近组织了源码共读活动,帮助4000+前端人学会看源码。公众号愿景:帮助5年内前端人走向前列。
扫码加我微信 lxchuan12、拉你进源码共读群
今日话题
目前建有江西|湖南|湖北 籍 前端群,想进群的可以加我微信 lxchuan12 进群。分享、收藏、点赞、在看我的文章就是对我最大的支持~