文章详情

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

请输入下面的图形验证码

提交验证

短信预约提醒成功

推荐八个很棒的 React 工具库,强烈建议收藏

2024-12-02 20:22

关注

本文转载自微信公众号「前端Sharing」,作者前端Sharing。转载本文请联系前端Sharing公众号。

俗话说的好 工欲善其事,必先利其器。笔者在开发 React 项目的时候,总结出一些很不错的 React 库,可以提高开发效率,满足业务需求,接下来将一一介绍它们。

UI组件库 Ant Design

要说 React 最受欢迎的 UI 组件库,那么我第一个想到的就是 Ant Design,Ant Design 提供了数十种常用的组件,比如 Button,Menu ,Table 等。

Ant Design不仅功能强大,还配置灵活,深受广大 React 开发者的喜爱。而且在 github 上已经取得 74.6k+ 的 star

富文本编辑器 braft-editor

braft-editor 是一个基于 draftjs 的 Web 富文本编辑器,适用于 React 框架,兼容主流现代浏览器。draft-js 是 facebook 开源的一个富文本编译器,braft-editor 在 draft-js 基础上进行了功能的拓展。

braft-editor 在 github 上得到了 4.2k+ 的 star。

我们看一下 braft-editor 的基本使用。

  1. # Install using yarn 
  2. yarn add braft-editor 
  3. # Install using npm 
  4. npm install braft-editor --save 

BraftEditor 用起来还是很方便的, 支持全屏,拖拽上传 ,代码块 ,引用 等功能。

状态管理工具 Dvajs

Dvajs 是基于 redux , react-redux ,redux-saga 的状态管理工具,

在 dva 中,同步触发的 reducers ,异步触发 effects 和订阅监听的 subscriptions 构成了状态管理组织模型。dvajs 在 github 目前获得 15.8k+ star 。

原理图:

dvajs 上手也是十分简单的。

拖拽库 React dnd

React dnd 是 React 的一个推拽库,用起来还是比较得心应手的。react-dnd 在 github 上得到了 16.4k+ 的 star。

对于上手 react-dnd ,官网已经很详细了,感兴趣的同学,可以尝试一下。

可视化图表 echarts-for-react

echarts-for-react 是使用 React 基于 echarts 封装的图表库,能够满足基本的可视化图表需求。把 echarts 的配置参数通过 React 组件的 props 形式进行传递配置。目前在 github 上获得 3.3k+ star 。

快速上手:

  1. npm install --save echarts-for-react 
  2. import React from 'react'
  3. import ReactECharts from 'echarts-for-react';   
  4. // or var ReactECharts = require('echarts-for-react'); 
  5.  
  6.   option={this.getOption()} 
  7.   notMerge={true
  8.   lazyUpdate={true
  9.   theme={"theme_name"
  10.   onChartReady={this.onChartReadyCallback} 
  11.   onEvents={EventsDict} 
  12.   opts={} 
  13. /> 

markdown 预览器 react-markdown

如果想要让 React 项目展示 md 格式的文档结构,那么 react-markdown 是一个不错的选择。react-markdown 用法非常简单。

我们来看一下 react-markdown ,目前 react-markdown 在 github 上共获得 7.7k+ ??。

使用:

  1. import React from 'react' 
  2. import ReactMarkdown from 'react-markdown' 
  3. import ReactDom from 'react-dom' 
  4. import remarkGfm from 'remark-gfm' 
  5.  
  6. ReactDom.render( 
  7.   false}]]}> 
  8.     This ~is not~ strikethrough, but ~~this is~~! 
  9.   , 
  10.   document.body 

展示效果:

二维码展示 qrcode.react

如果想在 React 项目中,使用链接生成二维码,可以尝试一下 qrcode.react,它在 github 上共获得 2.6k+ 。

上手:

  1. import QRCode from 'qrcode.react' 
  2.  
  3. export default function Index(){ 
  4.     return 
     
  5.           'pink'size={100}  value="https://juejin.cn/user/2418581313687390" /> 
  6.           'blue'size={200} value="https://juejin.cn/user/2418581313687390" /> 
  7.           size={300} value="https://juejin.cn/user/2418581313687390" /> 
  8.     
 
  • 效果:

    缓存页面 React-keepalive-router

    这个插件是笔者开发的,主要是用于一些 React 中需要缓存页面的需求,这里推广一下,目前在 github 上获得 519颗 ??。觉得不错的同学可以赏个小星星 ??。

    该插件基于react 16.8+ ,react-router 4+ 开发的 react 缓存组件,可以用于缓存页面组件,类似 vue 的 keepalive 包裹 vue-router 的效果功能。

    1.  
    2.   
       
    3.      "/a" component={ComponentA}  /> 
    4.      "/b" component={ComponentB}  /> 
    5.      '/detail'} component={ Detail } /> 
    6.   
     
  •  
  • 总结

    今天给大家介绍一些不错的 React 工具库,希望看到的朋友可以尝试着用起来。

     

    来源:前端Sharing内容投诉

    免责声明:

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

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

    软考中级精品资料免费领

    • 2024年上半年信息系统项目管理师第二批次真题及答案解析(完整版)

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

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

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

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

      难度     224人已做
      查看

    相关文章

    发现更多好内容

    猜你喜欢

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