文章详情

短信预约-IT技能 免费直播动态提醒

请输入下面的图形验证码

提交验证

短信预约提醒成功

有哪些值得学习的大型 React 开源项目?

2024-12-01 17:39

关注

之前有很多小伙伴问过我,通过文档或者视频学习 React 已经有一段时间了,想学习一些好的开源项目来获得一些实战经验。我之前也没有很好的答案,确实很难找,因为一般企业级应用都是不开源的, Github 上大部分都是很简单的 DEMO 项目,很难挑选。

今天就给大家梳理了几个我觉得还不错的 React 开源项目。

Jira Clone

仓库:https://github.com/oldboyxx/jira_clone

Github Star:8.6K

这是一个基于 React 开发的模仿 Jira 的项目,前端全部使用 React Hooks 实现 。另外还有一些其他亮点:

TypeScript
TypeORM
Postgres

作者还使用 styled-components 和全局样式进行混合开发,使他看起来和 Jira 非常像。

RealWorld aka Conduit

Thinkster 的 RealWorld 以超过 24 种不同的语言和框架重新实现了一个相同的应用程序(一个名为 Conduit 的仿 Medium.com 程序),这是它的 React/Redux 版本。

它基于 create-react-app 创建,用 react-router 实现路由,用 Redux 实现状态管理,基于 classNames 编写样式,基于 superagent 请求远程数据。

Real World App

Real World App 是使用 Cypress 对程序进行端到端测试的一个很好的 DEMO 项目。在 repo 中包含了示例数据,自动化测试和应用程序都可以开箱即用地运行。

它基于 create-react-app 构建,使用 TypeScript 编写,带有 Express 后端,使用 Material UI 作为 UI/组件库,使用 Formik 实现表单,使用 react-router 实现路由。

HospitalRun

HospitalRun 是一个成熟的电子健康记录系统 ( EHR ) 和医院信息系统 ( HIS )  Web 应用。它是一个非常完整的 OSS 解决方案。使用 TypeScript + React 编写,并使用 SCSS 编写样式。大多数组件都存在于 components 包中。

Simorgh

Simorgh 是 BBC (没错,就是那个天天抹黑中国的新闻网站) 的 React SPA ,目前为全球数百万生产用户提供服务。它正在逐步推广到每个 BBC World Service News 网站。

它使用 PropTypes 进行类型检查,使用 Jest 和 Enzyme 进行单元测试(覆盖率已经达到 98% ),使用 Cypress 进行端到端测试,使用 styled-components 编写样式,使用 Express 处理服务端渲染。

AST Explorer

AST Explorer 是一个在线生成抽象语法树的工具。

作为一个 React 项目很值得一试,因为它是持续开发很多年项目的一个很好的例子。使用 PropTypes 进行类型检查,使用 Redux 进行状态管理。

虽然你不会在这里找到像 TypeScript/Flow 这样的花哨的东西,但它的代码注释很完善,也很清楚地指出了很多编码技巧。另外,它们也逐步在将类组件迁移到 Hooks 上。

Excalidraw

Excalidraw 是一个在线图形绘制工具(手绘风格),我一直在用。

它使用 TypeScript + React Hooks 编写,使用 SCSS 进行样式处理。

Spectrum

Spectrum 是一个社区网站,它的目标是将实时聊天应用程序的功能和论坛的功能结合起来。它自从 2017 年初以来一直在积极开发中,并于 2018 年底被 GitHub 收购。

Spectrum 在早期是非常有趣的,因为它使用 RethinkDB 实时更新查询、服务器渲染和 GraphQL (在当时看来都是非常先进的技术)。

代码库使用 Flow 进行类型检查,使用 Apollo (GraphQL) 进行数据获取,使用 Redux 进行状态管理,使用 Express 服务器进行服务器渲染,并编写了大量的自定义 React Hooks 。

Sentry

Sentry 是一个开源的前端异常监控工具。后端基于 Django 实现,前端基于 TypeScript + React 实现,使用 Emotion 进行样式管理,基于 react-router 实现路由,使用 Redux 进行状态管理。

Grafana

它是一个正在从 AngularJS 迁移到 React 的项目,基于 TypeScript 编写,用 Redux 进行状态管理。

GoAlert

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

来源:code秘密花园内容投诉

免责声明:

① 本站未注明“稿件来源”的信息均来自网络整理。其文字、图片和音视频稿件的所属权归原作者所有。本站收集整理出于非商业性的教育和科研之目的,并不意味着本站赞同其观点或证实其内容的真实性。仅作为临时的测试数据,供内部测试之用。本站并未授权任何人以任何方式主动获取本站任何信息。

② 本站未注明“稿件来源”的临时测试数据将在测试完成后最终做删除处理。有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341

软考中级精品资料免费领

  • 历年真题答案解析
  • 备考技巧名师总结
  • 高频考点精准押题
  • 2024年上半年信息系统项目管理师第二批次真题及答案解析(完整版)

    难度     813人已做
    查看
  • 【考后总结】2024年5月26日信息系统项目管理师第2批次考情分析

    难度     354人已做
    查看
  • 【考后总结】2024年5月25日信息系统项目管理师第1批次考情分析

    难度     318人已做
    查看
  • 2024年上半年软考高项第一、二批次真题考点汇总(完整版)

    难度     435人已做
    查看
  • 2024年上半年系统架构设计师考试综合知识真题

    难度     224人已做
    查看

相关文章

发现更多好内容

猜你喜欢

AI推送时光机
位置:首页-资讯-后端开发
咦!没有更多了?去看看其它编程学习网 内容吧
首页课程
资料下载
问答资讯