当前位置: 首页 > 科技观察

做了N+1个企业项目,总结了这几个React必备插件

时间:2023-03-14 22:02:27 科技观察

为了提高React项目的开发效率,笔者结合自己的实际工作经验,总结了以下React项目中常用的插件。1.状态管理ReduxJavaScript状态容器提供可预测的状态管理MobX通过函数响应式编程让状态管理可变简单可扩展的ReduxThunkRedux的异步处理中间件ReduxSagaRedux中间件,用于管理应用SideEffects(副作用,比如异步抓取数据,访问浏览器缓存等)DvaA基于redux和redux-saga的数据流方案2.UI组件库Ant设计基于AntDesign设计系统的ReactUI组件库,主要用于企业级mid的研发-后台产品AntdesignmobileReactUI移动端组件库基于AntDesign设计系统MaterialUI全球最流行的基于纹理设计的ReactUI库React工具箱一套使用CSS模块功能实现GoogleMaterialDesign规范的React组件ReactVirtualized一个React解决方案,可以呈现大型列表和tablesFabricUIMicrosoft的开源UX框架的集合,用于创建一个共享代码、设计和交互性的漂亮的跨平台应用程序。React桌面基于ReactJavaScript库,旨在将本机桌面体验带到Web,具有许多macOSSierra和Windows10组件。react-desktop与NW.js和Electron.js完美结合,但它可以用于任何JavaScript驱动的项目。Zent对PC端WebUI规范的React实现赞不绝口,提供了一套完整的基础UI组件和一些常用的业务组件react-icons基于React封装的丰富图标库3.工具类react-copy-to-clipboardReact基于复制到剪贴板组件qrcode.react基于React的二维码生成组件nprogress适用于YouTube、Medium等顶部进度条组件react-syntax-highlighter基于React的代码高亮组件react-contextmenu右键菜单组件emoji-mart基于React的表情库react-highlight-words基于React的关键字高亮4.数据可视化AntV包含G2,G6,F2,L7以及一套完整的图表使用和设计规范,提供了强大的数据可视化需求。G2Plot是基于G2封装的开箱即用的可视化组件库recharts。Viser是一个使用React和D3构建的自定义图表库,支持多种主流框架。可视化库5.动画/动效Halogen使用React的加载动画合集react-move漂亮,数据驱动的React动画,只有3.5kb(gzip)react-spring一个基于弹簧物理的动画库AntMotion提供单项,组合动画,以及一整套动画解决方案scenejs基于JavaScript和CSS时间轴的动画库react-text-loop文本轮播动画6.拖拽/排序react-beautiful-dnd美观、可移植的列表拖拽库react-dnd可以帮助我们构建复杂的拖放界面,同时保持组件分离。react-moveable是一个灵活而强大的拖放库,支持自由拖动、缩放和参考线。强大的列表卡片排序动画库7.图片处理react-image-crop强大的图片裁剪库react-sparklines基于数据自动生成趋势线dom-to-image基于dom生成图片的canvas库react-img-editor图片编辑8.编辑器相关braft-editor富文本编辑器powerNicemarkdown/富文本编辑器GGEditor可视化图表编辑器react-codemirror2代码编辑器jsoneditorjson编辑器h5-dooringH5页面编辑器9.地图相关google-map-react谷歌地图插件react-amap高德地图插件@uiw/react-baidu-map百度地图10.脚手架创建ReactApp初学者必备React傻瓜式脚手架Next.js搭建服务端渲染的React脚手架umi企业级前端应用框架webpack3_react兼容IE9+,提供完整的React全家桶解决方案