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

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

nanshan 2025-01-04 22:10 13 浏览 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数据可视化等前端知识和实战.

相关推荐

Let’s Encrypt免费搭建HTTPS网站

HTTPS(全称:HyperTextTransferProtocoloverSecureSocketLayer),是以安全为目标的HTTP通道,简单讲是HTTP的安全版。即HTTP下加入...

使用Nginx配置TCP负载均衡(nginx tcp负载)

假设Kubernetes集群已经配置好,我们将基于CentOS为Nginx创建一个虚拟机。以下是实验种设置的详细信息:Nginx(CenOS8Minimal)-192.168.1.50Kube...

Nginx负载均衡及支持HTTPS与申请免费SSL证书

背景有两台minio文件服务器已做好集群配置,一台是192.168.56.41:9000;另一台是192.168.56.42:9000。应用程序通过Nginx负载均衡调用这两台minio服务,减轻单点...

HTTPS配置实战(https配置文件)

原因现在网站使用HTTPS是规范操作之一,前些日子买了腾讯云服务,同时申请了域名http://www.asap2me.top/,目前该域名只支持HTTP,想升级为HTTPS。关于HTTPS的链接过程大...

只有IP地址没有域名实现HTTPS访问方法

一般来说,要实现HTTPS,得有个注册好的域名才行。但有时候呢,咱只有服务器的IP地址,没注册域名,这种特殊情况下,也能照样实现HTTPS安全访问,按下面这些步骤来就行:第一步,先确认公网...

超详解:HTTPS及配置Django+HTTPS开发环境

众所周知HTTP协议是以TCP协议为基石诞生的一个用于传输Web内容的一个网络协议,在“网络分层模型”中属于“应用层协议”的一种。在这里我们并不研究该协议标准本身,而是从安全角度去探究使用该协议传输数...

Godaddy购买SSL之后Nginx配置流程以及各种错误的解决

完整流程:参考地址:https://sg.godaddy.com/zh/help/nginx-generate-csrs-certificate-signing-requests-3601生成NGI...

Nginx从安装到高可用,一篇搞定(nginx安装与配置详解)

一、Nginx安装1、去官网http://nginx.org/下载对应的nginx包,推荐使用稳定版本2、上传nginx到linux系统3、安装依赖环境(1)安装gcc环境yuminstallgc...

阿里云免费证书申请,配置安装,使用tomcat,支持http/https访问

参数说明商品类型默认已选择云盾证书服务(无需修改)。云盾证书服务类型SSL证书服务的类型。默认已选择云盾SSL证书(无需修改),表示付费版SSL证书。如果您需要免费领取或付费扩容DV单域名证书【免费试...

你试过两步实现Nginx的规范配置吗?极速生成Nginx配置小工具

NGINX是一款轻量级的Web服务器,最强大的功能之一是能够有效地提供HTML和媒体文件等静态内容。NGINX使用异步事件驱动模型,在负载下提供可预测的性能。是当下最受欢迎的高性能的Web...

从零开始搭建HTTPS服务(搭建https网站)

搭建HTTPS服务的最初目的是为了开发微信小程序,因为wx.request只允许发起HTTPS请求,并且还必须和指定的域名进行网络通信。要从零开始搭建一个HTTPS的服务需要下面4...

群晖NAS使用官网域名和自己的域名配置SSL实现HTTPS访问

安全第一步,群晖NAS使用官网域名和自己的域名配置SSL实现HTTPS访问【新手导向】NAS本质还是一个可以随时随地访问的个人数据存储中心,我们在外网访问的时候,特别是在公网IP下,其实会面临着很多安...

让网站快速升级HTTPS协议提高安全性

为什么用HTTPS网络安全越来越受到重视,很多互联网服务网站,都已经升级改造为https协议。https协议下数据包是ssl/tcl加密的,而http包是明文传输。如果请求一旦被拦截,数据就会泄露产生...

用Https方式访问Harbor-1.9版本(https访问流程)

我上周在头条号写过一篇原创文章《Docker-Harbor&Docker-kitematic史上最详细双系统配置手册》,这篇算是它的姊妹篇吧。这篇文章也将用到我在头条写的另一篇原创文章的...

如何启用 HTTPS 并配置免费的 SSL 证书

在Linux服务器上启用HTTPS并配置免费的SSL证书(以Let'sEncrypt为例)可以通过以下步骤完成:---###**一、准备工作**1.**确保域名已解析**...

取消回复欢迎 发表评论: