首页 web前端 前端问答 react有哪些插件

react有哪些插件

Jul 14, 2022 pm 03:11 PM
react

react插件有:1、Redux,提供可预测化的状态管理;2、MobX,通过函数响应式编程使得状态管理变得简单和可扩展;3、Redux Thunk,Redux的异步处理中间件;4、Dva,一个基于redux和redux-saga的数据流方案;5、Ant design,React UI组件库;6、react-icons,基于React的丰富的图标库;7、Viser,一个可视化库。

react有哪些插件

本教程操作环境:Windows7系统、react18版、Dell G3电脑。

为了提高大家开发 React 项目的效率,下面汇总了一些React项目常用插件。

1、状态管理

  • Redux:JavaScript 状态容器,提供可预测化的状态管理

  • MobX:通过函数响应式编程使得状态管理变得简单和可扩展

  • Redux Thunk:Redux的异步处理中间件

  • Redux Saga:Redux中间件,用于管理应用程序 Side Effect(副作用,例如异步获取数据,访问浏览器缓存等)

  • Dva:一个基于redux和redux-saga的数据流方案

2、UI组件库

  • Ant design:基于 Ant Design 设计体系的 React UI 组件库,主要用于研发企业级中后台产品

  • Ant design mobile:基于 Ant Design 设计体系的 React UI 移动端组件库

  • MaterialUI:世界最受欢迎的基于质感设计的React UI库

  • React toolbox:一套使用CSS模块功能实现Google的Material Design规范的React组件

  • React Virtualized:一个能渲染大型列表和表格的React解决方案

  • Fabric UI:微软开源的UX框架的集合,用于创建共享代码,设计和交互行为的精美的跨平台应用程序

  • React desktop:基于React的JavaScript库,旨在将本机桌面体验带入网络,其中包含许多macOS Sierra和Windows 10组件。react-desktop与NW.js和Electron.js完美结合,但是可以在任何JavaScript驱动的项目中使用

  • Zent:有赞 PC 端 WebUI 规范的 React 实现,提供了一整套基础的 UI 组件以及一些常用的业务组件

  • react-icons:基于React封装的丰富的图标库

3、工具类

  • react-copy-to-clipboard:基于React的复制到剪切板组件

  • 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:使用React和D3构建的自定义的图表库

  • Viser:支持多种主流框架的可视化库

5、动画/动效果

  • Halogen:使用React的加载动画集合

  • react-move:漂亮的,数据驱动的React动画,只需3.5kb(gzip)

  • react-spring:一个基于弹簧物理学的动画库

  • Ant Motion:提供了单项,组合动画,以及整套动画解决方案

  • scenejs:基于JavaScript和CSS时间轴的动画库

  • 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全家桶解决方案

【相关推荐:Redis视频教程

以上是react有哪些插件的详细内容。更多信息请关注PHP中文网其他相关文章!

本站声明
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn

热AI工具

Undresser.AI Undress

Undresser.AI Undress

人工智能驱动的应用程序,用于创建逼真的裸体照片

AI Clothes Remover

AI Clothes Remover

用于从照片中去除衣服的在线人工智能工具。

Undress AI Tool

Undress AI Tool

免费脱衣服图片

Clothoff.io

Clothoff.io

AI脱衣机

AI Hentai Generator

AI Hentai Generator

免费生成ai无尽的。

热门文章

R.E.P.O.能量晶体解释及其做什么(黄色晶体)
1 个月前 By 尊渡假赌尊渡假赌尊渡假赌
R.E.P.O.最佳图形设置
1 个月前 By 尊渡假赌尊渡假赌尊渡假赌
R.E.P.O.如果您听不到任何人,如何修复音频
1 个月前 By 尊渡假赌尊渡假赌尊渡假赌
R.E.P.O.聊天命令以及如何使用它们
1 个月前 By 尊渡假赌尊渡假赌尊渡假赌

热工具

记事本++7.3.1

记事本++7.3.1

好用且免费的代码编辑器

SublimeText3汉化版

SublimeText3汉化版

中文版,非常好用

禅工作室 13.0.1

禅工作室 13.0.1

功能强大的PHP集成开发环境

Dreamweaver CS6

Dreamweaver CS6

视觉化网页开发工具

SublimeText3 Mac版

SublimeText3 Mac版

神级代码编辑软件(SublimeText3)

如何利用React和WebSocket构建实时聊天应用 如何利用React和WebSocket构建实时聊天应用 Sep 26, 2023 pm 07:46 PM

如何利用React和WebSocket构建实时聊天应用引言:随着互联网的快速发展,实时通讯越来越受到人们的关注。实时聊天应用已经成为现代社交和工作生活中不可或缺的一部分。本文将介绍如何利用React和WebSocket构建一个简单的实时聊天应用,并提供具体的代码示例。一、技术准备在开始构建实时聊天应用之前,我们需要准备以下技术和工具:React:一个用于构建

React前后端分离指南:如何实现前后端的解耦和独立部署 React前后端分离指南:如何实现前后端的解耦和独立部署 Sep 28, 2023 am 10:48 AM

React前后端分离指南:如何实现前后端的解耦和独立部署,需要具体代码示例在当今的Web开发环境中,前后端分离已经成为一种趋势。通过将前端和后端代码分开,可以使得开发工作更加灵活、高效,并且方便进行团队协作。本文将介绍如何使用React实现前后端分离,从而实现解耦和独立部署的目标。首先,我们需要理解什么是前后端分离。传统的Web开发模式中,前端和后端是耦合在

如何利用React和Flask构建简单易用的网络应用 如何利用React和Flask构建简单易用的网络应用 Sep 27, 2023 am 11:09 AM

如何利用React和Flask构建简单易用的网络应用引言:随着互联网的发展,网络应用的需求也越来越多样化和复杂化。为了满足用户对于易用性和性能的要求,使用现代化的技术栈来构建网络应用变得越来越重要。React和Flask是两种在前端和后端开发中非常受欢迎的框架,它们可以很好的结合在一起,用来构建简单易用的网络应用。本文将详细介绍如何利用React和Flask

如何利用React和RabbitMQ构建可靠的消息传递应用 如何利用React和RabbitMQ构建可靠的消息传递应用 Sep 28, 2023 pm 08:24 PM

如何利用React和RabbitMQ构建可靠的消息传递应用引言:现代化的应用程序需要支持可靠的消息传递,以实现实时更新和数据同步等功能。React是一种流行的JavaScript库,用于构建用户界面,而RabbitMQ是一种可靠的消息传递中间件。本文将介绍如何结合React和RabbitMQ构建可靠的消息传递应用,并提供具体的代码示例。RabbitMQ概述:

React响应式设计指南:如何实现自适应的前端布局效果 React响应式设计指南:如何实现自适应的前端布局效果 Sep 26, 2023 am 11:34 AM

React响应式设计指南:如何实现自适应的前端布局效果随着移动设备的普及和用户对多屏幕体验的需求增加,响应式设计成为了现代前端开发的重要考量之一。而React作为目前最流行的前端框架之一,提供了丰富的工具和组件,能够帮助开发人员实现自适应的布局效果。本文将分享一些关于使用React实现响应式设计的指南和技巧,并提供具体的代码示例供参考。使用React的Fle

React代码调试指南:如何快速定位和解决前端bug React代码调试指南:如何快速定位和解决前端bug Sep 26, 2023 pm 02:25 PM

React代码调试指南:如何快速定位和解决前端bug引言:在开发React应用程序时,经常会遇到各种各样的bug,这些bug可能使应用程序崩溃或导致不正确的行为。因此,掌握调试技巧是每个React开发者必备的能力。本文将介绍一些定位和解决前端bug的实用技巧,并提供具体的代码示例,帮助读者快速定位和解决React应用程序中的bug。一、调试工具的选择:在Re

React Router使用指南:如何实现前端路由控制 React Router使用指南:如何实现前端路由控制 Sep 29, 2023 pm 05:45 PM

ReactRouter使用指南:如何实现前端路由控制随着单页应用的流行,前端路由成为了一个不可忽视的重要部分。ReactRouter作为React生态系统中最受欢迎的路由库,提供了丰富的功能和易用的API,使得前端路由的实现变得非常简单和灵活。本文将介绍ReactRouter的使用方法,并提供一些具体的代码示例。安装ReactRouter首先,我们需

如何利用React和Google BigQuery构建快速的数据分析应用 如何利用React和Google BigQuery构建快速的数据分析应用 Sep 26, 2023 pm 06:12 PM

如何利用React和GoogleBigQuery构建快速的数据分析应用引言:在当今信息爆炸的时代,数据分析已经成为了各个行业中不可或缺的环节。而其中,构建快速、高效的数据分析应用则成为了许多企业和个人追求的目标。本文将介绍如何利用React和GoogleBigQuery结合起来构建快速的数据分析应用,并提供详细的代码示例。一、概述React是一个用于构建

See all articles