60+ 实用 React 工具库,助力你高效开发!(上)

简介: 最近看到一些实用的React工具库,总结了一下分享给大家,避免重复造轮子。希望对你有所帮助~

最近看到一些实用的React工具库,总结了一下分享给大家,避免重复造轮子。希望对你有所帮助~


一、基础


1. React Infinite Scroller

React Infinite Scroller 用于在React项目中无限滚动加载内容。

npm地址:www.npmjs.com/package/rea…


2. react-dnd

React DnD是React和Redux核心作者 Dan Abramov创造的一组React 高阶组件,可以在保持组件分离的前提下帮助构建复杂的拖放接口。主要用于组件的拖放。

npm地址:www.npmjs.com/package/rea…


3. react-beautiful-dnd

react-beautiful-dnd是一款美观且简单易用的 React 列表拖拽库。

npm地址:www.npmjs.com/package/rea…


4. react-icons

使用 react-icons 可以轻松地在 React 项目中包含流行的图标。

npm地址:www.npmjs.com/package/rea…


5. react-share

react-share是一个React 的社交媒体分享按钮和分享次数库。

npm地址:www.npmjs.com/package/rea…


6. create-react-app

Create React App 是一个命令行界面工具,让您无需任何配置即可快速创建和运行 React 应用程序。

npm地址:www.npmjs.com/package/cre…


7. react-intl

React Intl 提供了一个 React 组件和用于国际化 React Web 应用的 Mixin。它提供一个格式化日期、数字、字符串消息的描述方式。

npm地址:www.npmjs.com/package/rea…


8. react-router

react-router 是个用于 React.js 的路由解决方案(routing solution)。它轻松可以同步你的 app 和 URL,同时给嵌套,转换,和服务端渲染一流的支持。

npm地址:www.npmjs.com/package/rea…


9. React Virtualized

react-virtualized是一个以高效渲染大型列表和表格数据的响应式组件,可以用来解决长列表渲染问题。

npm地址:www.npmjs.com/package/rea…


二、状态管理


1. redux

Redux 是 JavaScript 状态容器,提供可预测化的状态管理。可以让你构建一致化的应用,运行于不同的环境(客户端、服务器、原生应用),并且易于测试。

npm地址:www.npmjs.com/package/red…


2. react-redux

Redux 官方提供的 React 绑定库。 具有高效且灵活的特性。

npm地址:www.npmjs.com/package/rea…


3. MobX

MobX是一个经久考验的库,使得状态管理简单而且透明、可伸缩的应用功能反应性编程(TFRP)。

npm地址:www.npmjs.com/package/mob…


4. redux-saga

redux-saga是一个用于管理应用程序 Side Effect(副作用,例如异步获取数据,访问浏览器缓存等)的库,它的目标是让副作用管理更容易,执行更高效,测试更简单,在处理故障时更容易。

npm地址:www.npmjs.com/package/red…


5. redux-thunk

Redux 的 Thunk 中间件。

npm地址:www.npmjs.com/package/red…


三、组件


1. Ant Design

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

官网地址:ant.design/index-cn


2. React Select

React Select 是一个开箱即用的 Select 控件。

官网地址:react-select.com/home


3. React Hot Toast

React Hot Toast 是一个热门的通知库,包含很多通知的样式。

官网地址:react-hot-toast.com/


4. React Content Loader

React Content Loader 可以用于生成列表加载占位组件。

官网地址:skeletonreact.com/


相关文章
|
13天前
|
前端开发 JavaScript UED
React 图标库使用指南
本文详细介绍如何在 React 项目中使用 `react-icons` 等图标库,涵盖环境搭建、基础使用、常见问题与易错点、高级用法等内容,并通过代码案例进行说明。适合初学者和进阶开发者参考。
36 8
|
2月前
|
前端开发 JavaScript API
React开发需要了解的10个库
本文首发于微信公众号“前端徐徐”,介绍了React及其常用库。React是由Meta开发的JavaScript库,用于构建动态用户界面,广泛应用于Facebook、Instagram等知名网站。文章详细讲解了Axios、Formik、React Helmet、React-Redux、React Router DOM、Dotenv、ESLint、Storybook、Framer Motion和React Bootstrap等库的使用方法和应用场景,帮助开发者提升开发效率和代码质量。
125 4
React开发需要了解的10个库
|
2月前
|
前端开发 JavaScript API
探索React Hooks:前端开发的革命性工具
【10月更文挑战第5天】探索React Hooks:前端开发的革命性工具
|
1月前
|
监控 前端开发 JavaScript
React 静态网站生成工具 Next.js 入门指南
【10月更文挑战第20天】Next.js 是一个基于 React 的服务器端渲染框架,由 Vercel 开发。本文从基础概念出发,逐步探讨 Next.js 的常见问题、易错点及解决方法,并通过具体代码示例进行说明,帮助开发者快速构建高性能的 Web 应用。
73 10
|
2月前
|
资源调度 前端开发 JavaScript
React中classnames库使用
【10月更文挑战第7天】
|
2月前
|
前端开发 JavaScript 开发者
React 组件化开发最佳实践
【10月更文挑战第4天】React 组件化开发最佳实践
51 4
|
1月前
|
资源调度 前端开发 JavaScript
React 测试库 React Testing Library
【10月更文挑战第22天】本文介绍了 React Testing Library 的基本概念和使用方法,包括安装、基本用法、常见问题及解决方法。通过代码案例详细解释了如何测试 React 组件,帮助开发者提高应用质量和稳定性。
43 0
|
3月前
|
前端开发
React技术栈-react使用的Ajax请求库实战案例
这篇文章介绍了在React应用中使用Axios和Fetch库进行Ajax请求的实战案例,展示了如何通过这些库发送GET和POST请求,并处理响应和错误。
59 10
React技术栈-react使用的Ajax请求库实战案例
|
3月前
|
前端开发
React技术栈-react使用的Ajax请求库用户搜索案例
这篇文章展示了一个React技术栈中使用Ajax请求库(如axios)进行用户搜索的实战案例,包括React组件的结构、状态管理以及如何通过Ajax请求获取并展示GitHub用户数据。
33 7
React技术栈-react使用的Ajax请求库用户搜索案例
|
3月前
|
XML 移动开发 前端开发
使用duxapp开发 React Native App 事半功倍
对于Taro的壳子,或者原生React Native,都会存在 `android` `ios`这两个文件夹,而在duxapp中,这些文件夹的内容是自动生成的,那么对于需要在这些文件夹中修改的配置内容,例如包名、版本号、新架构开关等,都通过配置文件的方式配置了,而不需要需修改具体的文件