百度360必应搜狗淘宝本站头条
当前位置:网站首页 > 技术文章 > 正文

做了N+1个企业项目之后,我总结了这些React必备插件

ccwgpt 2025-06-12 11:18 4 浏览 0 评论

为了提高大家开发 React 项目的效率, 笔者结合自己的实际工作经验, 汇总如下React项目常用插件.

1. 状态管理



  • ReduxJavaScript 状态容器,提供可预测化的状态管理
  • MobX 通过函数响应式编程使得状态管理变得简单和可扩展
  • Redux ThunkRedux的异步处理中间件
  • Redux SagaRedux中间件,用于管理应用程序 Side Effect(副作用,例如异步获取数据,访问浏览器缓存等)
  • Dva 一个基于 reduxredux-saga 的数据流方案

2. UI组件库



  • Ant design 基于 Ant Design 设计体系的 React UI 组件库,主要用于研发企业级中后台产品
  • Ant design mobile 基于 Ant Design 设计体系的 React UI 移动端组件库
  • MaterialUI 世界最受欢迎的基于质感设计的React UI
  • React toolbox 一套使用CSS模块功能实现GoogleMaterial Design规范的React组件
  • React Virtualized 一个能渲染大型列表和表格的React解决方案
  • Fabric UI 微软开源的UX框架的集合,用于创建共享代码,设计和交互行为的精美的跨平台应用程序
  • React desktop 基于ReactJavaScript库,旨在将本机桌面体验带入网络,其中包含许多macOS SierraWindows 10组件。react-desktopNW.jsElectron.js完美结合,但是可以在任何JavaScript驱动的项目中使用
  • Zent 有赞 PC 端 WebUI 规范的 React 实现,提供了一整套基础的 UI 组件以及一些常用的业务组件
  • react-icons 基于React封装的丰富的图标库

3. 工具类



  • react-copy-to-clipboard 基于React的复制到剪切板组件
  • qrcode.react 基于React的生成二维码的组件
  • nprogress 适用于YouTubeMedium等的顶部进度条组件
  • react-syntax-highlighter 基于React的代码高亮组件
  • react-contextmenu 右键菜单组件
  • emoji-mart 基于React的表情库
  • react-highlight-words 基于React的关键字高亮

4. 数据可视化



  • AntV 包含 G2G6F2L7 以及一套完整的图表使用和设计规范, 提供强大的数据可视化需求
  • G2Plot 基于G2封装的开箱即用的可视化组件库
  • recharts 使用ReactD3构建的自定义的图表库
  • Viser 支持多种主流框架的可视化库

5. 动画/动效果



  • Halogen 使用React的加载动画集合
  • react-move 漂亮的,数据驱动的React动画,只需3.5kb(gzip)
  • react-spring 一个基于弹簧物理学的动画库
  • Ant Motion 提供了单项,组合动画,以及整套动画解决方案
  • scenejs 基于JavaScriptCSS时间轴的动画库
  • react-text-loop 文字轮播动画

6. 拖拽/排序



  • react-beautiful-dnd 漂亮,可移植性 列表拖拽库
  • react-dnd 可帮助我们构建复杂的拖放界面,同时保持组件的分离
  • react-moveable 支持自由拖拽, 缩放, 参考线的灵活强大的拖拽库
  • react-grid-layout 强大的网格拖拽排序缩放库
  • mixitup 强大的列表卡片排序动画库

7. 图像处理



  • react-image-crop 强大的图片裁切库
  • react-sparklines 基于数据自动生成趋势线
  • dom-to-image 基于dom生成图片的canvas
  • react-img-editor 图片编辑器

8. 编辑器相关



  • braft-editor 富文本编辑器
  • powerNice markdown/富文本编辑器
  • GGEditor 可视化图编辑器
  • react-codemirror2 代码编辑器
  • jsoneditor json编辑器
  • h5-dooring H5页面编辑器

9. 地图相关



  • google-map-react 谷歌地图插件
  • react-amap 高德地图插件
  • @uiw/react-baidu-map 百度地图

10. 脚手架



  • Create React App 初学者必备React傻瓜式脚手架
  • Next.js 构建服务端渲染的React脚手架
  • umi 企业级前端应用框架
  • webpack3_react 兼容IE9+且提供完整的React全家桶解决方案

最后

觉得有用 ?喜欢就收藏,顺便点个赞吧,你的支持是我最大的鼓励!搜索 “趣谈前端”,发现更多有趣的H5游戏, webpack,node,gulp,css3,javascript,nodeJS,canvas数据可视化等前端知识和实战.

相关推荐

火电厂智能管控新基建:全场景人员定位系统架构解析

在能源生产领域,火电厂以庞大的厂区规模、复杂的作业环境和密集的人机交互著称。从高温高压的锅炉房到精密复杂的电气设备间,从露天煤场到灰渣处理区,传统管理模式下的人员定位盲区,正成为制约安全生产与高效运营...

安全仪表系统(SIS)全生命周期管理:从设计到运维的深度解析

以下是一篇关于安全仪表系统(SIS)的技术解析与实践方法,涵盖系统架构、设计标准、实施流程及行业应用。安全仪表系统(SIS)是工业过程安全的最后一道防线,通过独立于基础控制系统的硬件和逻辑,在工艺失控...

数字化转型架构下的数据安全治理方案

这份PPT文件内容围绕数字化转型架构下的数据安全治理方案展开,主要探讨了数据质量治理、安全治理、全生命周期治理以及治理考核等方面的内容。更多参考及文档获取详见公众号:优享智库数据治理概述定义与目标:数...

安全完整性等级(SIL)分析报告编制与认证实践方法

以下是一篇关于安全完整性等级(SIL)分析报告的文章,涵盖SIL定级方法、验证流程、计算模型及工程实践。安全完整性等级(SIL)是量化安全仪表系统(SIS)性能的核心指标,由IEC61508/615...

项目管理体系框架(项目的管理体系)

Pokemon go下载教程 口袋妖怪Go下载解锁方法

#p#安卓下载#e#Pokemongo怎么下载?口袋妖怪go下载教程讲解。虽然锁区了但是大家还是有办法的,首先是口袋妖怪Go下载问题,很多口袋妖怪go的安卓玩家不知道怎么下载游戏,小编给大家详细解答...

抛弃Windows吧!谷歌推免费Chrome系统,一个U盘就搞定

在目前的个人电脑上,最主流的系统当然是Windows,不过除了Windows之外,我们也可以选择购买苹果的电脑,使用苹果的MacOS系统。不过除了苹果和微软的系统之外,实际上谷歌也有自己用于个人电脑...

谷歌误发ARM版Chrome安装包,致英特尔 /AMD用户无法安装

IT之家3月26日消息,科技媒体WindowsLatest昨日(3月25日)发布博文,报道称由于谷歌误发适用于ARM架构的安装包,导致用户从谷歌官网下载的ChromeSetu...

【Google Gemini极简教程】使用Flask和Gemini API构建一个AI BaaS

BaaS(BackendasaService,后端即服务)BaaS是一种云服务模型,它为开发者提供了一种便捷的方式来构建和管理应用程序的后端服务。BaaS提供了一系列的后端功能,如数据库管理...

第一资讯Windows 10 Mobile已成功安装谷歌Play Store

虽然微软并未正式推出WP可安装APK的功能,但近期有不少玩机爱好者已经在Windows10Mobile平台上用上了Android应用,而且随后还在需要谷歌服务框架(GoogleServices)...

宝可梦TCG Pocket谷歌账号登录,给你提供指南

《宝可梦TCGPocket》作为一款备受欢迎的卡牌对战游戏,为了给玩家提供更加便捷和安全的登录方式,支持使用谷歌账号进行登录。通过谷歌账号登录,您不仅可以快速进入游戏,还能享受账号数据同步、跨设备游...

秒变万能家庭服务器!斐讯N1 armbian安装指南

一直以来,我都想配置一台小型服务器放在家里玩一玩,但是x86架构的主机体积大功耗高,价格也不低。而树莓派的话,价格便宜一点,性能对于轻度使用也基本够用。可是树莓派仍然要两三百块钱,感觉还是有点贵。于是...

如何自己开发一个Google浏览器插件?

相信很多人都好奇,谷歌浏览器那么多的插件是如何开发的,我们如何开发一个自定义的Google浏览器插件,下面我们就来详细的给出一个开发Google浏览器插件的流程。准备环境首先需要有一个文本编辑器工具如...

我的世界手机版谷歌商店安装教程(我的世界谷歌下载)

在我的世界手机版升级到0.11.0版本后,很多玩家发现正式版需要有谷歌商店的验证也就是必须安装Googleplay才能玩。这次搞趣网小编就为大家带来我的世界手机版谷歌商店安装教程。有些手机自带Goo...

部落冲突安卓版谷歌怎么绑定 有无root都可以

部落冲突安卓版谷歌怎么绑定?下面小编为大家带来部落冲突安卓版谷歌绑定攻略详解,希望这篇攻略详解能够对大家有所帮助。首先准备这些东西(必须在网上自己下载,不要相信google应用)还需要下载"谷歌服务框...

取消回复欢迎 发表评论: