What plugins are there for react?

react plug-ins include: 1. Redux, which provides predictable state management; 2. MobX, which makes state management simple and scalable through function reactive programming; 3. Redux Thunk, asynchronous processing of Redux Middleware; 4. Dva, a data flow solution based on redux and redux-saga; 5. Ant design, a React UI component library; 6. react-icons, a rich icon library based on React; 7. Viser, a visualization library .

#The operating environment of this tutorial: Windows7 system, react18 version, Dell G3 computer.

In order to improve the efficiency of developing React projects, here is a summary of some commonly used plug-ins for React projects.

1. State management

• Redux: JavaScript state container, providing predictable state management

• MobX: Making state management simple and scalable through functional reactive programming

• Redux Thunk: Asynchronous processing middleware for Redux

• Redux Saga: Redux middleware, used to manage application Side Effects (side effects, such as asynchronous acquisition of data, access to browser cache, etc.)

• ##Dva: A data flow solution based on redux and redux-saga

2. UI component library

• Ant design: React UI component library based on Ant Design design system, mainly used to develop enterprise-level middle and back-end products

• Ant design mobile: React UI mobile based on Ant Design design system End component library

• MaterialUI: The world’s most popular React UI library based on texture design

• React toolbox: A set of functions using CSS modules React components that implement Google's Material Design specification

• React Virtualized: A React solution that can render large lists and tables

• Fabric UI: A collection of Microsoft's open-source UX frameworks for creating beautiful cross-platform applications that share code, design, and interactive behavior

• #React desktop: A React-based JavaScript library designed to bring this Bringing the desktop experience to the web with many macOS Sierra and Windows 10 components included. react-desktop integrates perfectly with NW.js and Electron.js, but can be used in any JavaScript-driven project

• Zent: Youzan PC-side WebUI specification React implementation, provides A complete set of basic UI components and some commonly used business components

• react-icons: A rich icon library based on React encapsulation

3. Tool class

##react-copy-to-clipboard: React-based copy to clipboard component
qrcode.react: React-based component for generating QR codes
nprogress: Top progress bar component suitable for YouTube, Medium, etc.
react-syntax-highlighter: React-based code highlighting component
react-contextmenu: right-click menu component
emoji -mart: React-based emoticon library
react-highlight-words: React-based keyword highlighting

4. Data Visualization

AntV: includes G2, G6, F2, L7 and a complete set of chart usage and design specifications, providing powerful data visualization needs
G2Plot: An out-of-the-box visual component library based on G2 packaging
recharts: Custom charts built using React and D3 Library
Viser: A visualization library that supports multiple mainstream frameworks

5, animation/motion effects

Halogen: A collection of loading animations using React
react-move: Beautiful, data-driven React animations, just 3.5kb (gzip)
react-spring: An animation library based on spring physics
Ant Motion: Provides single and combined animations , and a complete set of animation solutions
scenejs: Animation library based on JavaScript and CSS timeline
react-text-loop: text carousel Animation

6, dragging/sorting

react-beautiful-dnd：Beautiful , Portability list drag and drop library
react-dnd: helps us build complex drag-and-drop interfaces while keeping components separated
react-moveable: A flexible and powerful drag library that supports free dragging, scaling, and reference lines
react-grid-layout: A powerful grid drag, sort, and zoom library
mixitup: powerful list card sorting animation library

7, image processing

react-image-crop: Powerful image cropping library
react-sparklines: Automatically generate trend lines based on data
dom-to-image: A canvas library that generates images based on DOM
react-img-editor: Image editor

8. Editor related

• braft-editor: Rich text editor

• powerNice：markdown/rich text editor

• GGEditor：Visual diagram editor

• react-codemirror2： Code editor

• jsoneditor：json editor

• h5-dooring：H5 page editor

9. Map related

• google-map-react: Google map plug-in

• react-amap：AMAP plug-in

• @uiw/react-baidu-map：Baidu map

10. Scaffolding

• Create React App: A must-have React fool-proof scaffolding for beginners

• Next.js: Build Server-side rendered React scaffolding

• umi: Enterprise-level front-end application framework

• webpack3_react: Compatible with IE9 and provides a complete React family bucket solution

[Related recommendations: Redis video tutorial]

The above is the detailed content of What plugins are there for react?. For more information, please follow other related articles on the PHP Chinese website!