In order to improve the efficiency of React project development, the author summarizes common plug-ins for React project based on his practical work experience as follows.

1. Status management

  • Redux JavaScriptState containers provide predictable state management
  • MobX makes state management simple and extensible through functional responsive programming
  • Redux Thunk ReduxAsynchronous processing middleware
  • Redux Saga ReduxMiddleware for managing applicationsSide Effect(Side effects, such as asynchronously fetching data, accessing browser cache, etc.)
  • DvaBased on aredux 和 redux-sagaData flow scheme

2. UI component library

  • Ant designBased on theAnt Designdesign-systemReact UIComponent library, mainly used for the development of enterprise-level background products
  • Ant design mobileBased on theAnt Designdesign-systemReact UIMobile component library
  • MaterialUIThe world’s most popular texture-based designReact UIlibrary
  • React toolboxA set of useCSSModule function realizationGoogletheMaterial DesignSpecification of theReactcomponent
  • React VirtualizedOne that can render large lists and tablesReactThe solution
  • Fabric UIMicrosoft open sourceUXA collection of frameworks for creating beautiful cross-platform applications that share code, design, and interactive behavior
  • React desktopBased on theReacttheJavaScriptLibraries, designed to bring the native desktop experience to the web, contain manymacOS SierraandWindows 10Components.react-desktopwithNW.jsandElectron.jsPerfect combination, but can be in anyJavaScriptUsed in the drive project
  • ZentHave a PCWebUISpecification of theReactImplementation, which provides a set of basic UI components as well as some common business components
  • react-iconsBased on theReactEncapsulated rich icon library

3. The tools

  • react-copy-to-clipboardBased on theReactTo the clipboard component
  • Qrcode. react A component that generates qr codes based on react
  • nprogressApply toYouTube.MediumThe top progress bar component of
  • react-syntax-highlighterBased on theReactThe code highlights components
  • React-contextmenu Right-click menu component
  • emoji-martBased on theReactThe expression of library
  • react-highlight-wordsBased on theReactThe keyword is highlighted

4. Data visualization

  • AntVcontainsG2,G6,F2,L7And a complete set of chart usage and design specifications to provide powerful data visualization requirements
  • G2PlotBased on theG2Packaged visual component libraries out of the box
  • rechartsuseReactandD3Build a custom chart library
  • Viser supports visualization libraries for a variety of major frameworks

5. Animation/motion effects

  • HalogenuseReactA collection of loading animations
  • react-moveBeautiful, data-drivenReactAnimation, only 3.5KB (gzip)
  • React-spring is an animation library based on spring physics
  • Ant Motion provides single, composite, and complete animation solutions
  • scenejsBased on theJavaScriptandCSSTimeline animation library
  • React-text-loop Text rotation animation

6. Drag/sort

  • React-beautiful-dnd beautiful, portable list drag-and-drop library
  • React-dnd helps us build complex drag-and-drop interfaces while keeping components separate
  • React-moveable support free drag, zoom, guide line flexible and powerful drag library
  • React-grid-layout powerful grid drag sorting zoom library
  • Mixitup’s powerful list card sorting animation library

7. Image processing

  • React-image-crop powerful image crop library
  • React – Sparklines automatically generates trend lines based on data
  • dom-to-imageBased on thedomimage-generatingcanvaslibrary
  • React-img-editor Is an 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 relevance

  • Google-map-react 插件 图 片
  • React-amap plugin for Amap
  • @uiw/react-baidu-map

Scaffold for 10.

  • Create React AppBeginner’s essentialsReactDumb scaffold
  • Next.jsBuild server-side renderReactThe scaffold
  • Umi enterprise level front-end application framework
  • webpack3_reactCompatible withIE9+And provide completeReactWhole family bucket solution

The last

The author has synchronized the document to Github, and the address is as follows:

  • React Development path
  • Front-end efficient development of the necessary JS library comb

The h5-Dooring visual editor has also been successfully updated with development and deployment documentation for those who are interested.