Home  >  Article  >  Web Front-end  >  What plugins are there for react?

What plugins are there for react?

青灯夜游
青灯夜游Original
2022-07-14 15:11:074691browse

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 .

What plugins are there for react?

#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!

Statement:
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn