(
Translation from Medium:
Top 10 React Libraries on GitHub  The original address)
React, created by Facebook, has become a powerful Javascript framework that makes front-end developers’ lives much easier. If you’ve ever developed with React, you’ll agree that developing React apps needs to work with other libraries for the best development experience.


From experience, using open source projects makes a lot of sense for developers, and Github has plenty of open source libraries related to React JS, which gives us plenty of options when developing React apps. Although there are a large number of libraries available, it would be great for us to sift through the best ones. So, this post is dedicated to introducing the 10 best react-related libraries (ranked by stars on Github). Without further ado, let’s get started.




MATERIAL UI



31194 u
Version 0.20.0


Dependencies 11
Material UI is a library of React UI components implemented based on Google’s Materail design pattern. It makes it easier to develop great single-page Web applications (SAP).


To use the Material-UI for rendering on the server side, the developer must use the same development environment on both the server and client sides.
Install using the NPM command: 

npm install material-uiCopy the code

Demo address: www.material-ui.com/#/component…
For more, check out Github and its official website



ANT-DESIGN



20995 u
Version 3.0.1


Dependencies 42





Ant-design is a React based component library developed by alibaba Ant Financial team. Using it, you can create a vivid and beautiful React application, and the development experience is very pleasant, and the developed application user experience is excellent.

Install using the NPM command: 

npm install antdCopy the code

Demo address: antd-admin.zuiidea.com/login?from=…



Ant-design is a very popular library, so you can find more useful information on Github and its website.





SOTRYBOOK



16559 u
Version 1.0.1
Dependencies 12


Using frameworks like Meteor and Firebase, back-end development is getting easier and easier. React Storybook is a library that provides a similar convenience to the front end.

React Storybook allows you to create and design UI components for your React application outside of the application by providing a standalone UI development environment. This also makes it easier for others on the development team to reuse UI components in their own projects.
Install using the NPM command: 

npm install -g @storybook/cli
cd my-react-appgetstorybookCopy the code

Once installed, run React Storybook using the following command: 

npm run storybookCopy the code

Find out more on Github and its website





GATSBY



15712 u
Version 1.9.130
Dependencies 51


Gatsby is a library for quickly building static websites based on React JS. With Gatsby, you can turn plain text into beautiful websites without spending too much time coding.

There are many examples of static site generators being used to build high quality websites. Websites generated using Gatsby are easier to maintain and expand.
If you’re already familiar with the React framework as a developer, you’ll be better off developing with Gatsby.
Install using the NPM command: 

npm install gatsbyCopy the code

You can also use the command line scaffolding: 

npm install --global gatsby-cliCopy the code

through
github 和
websiteFor more information



ENZYME



11846 u
Version 3.2.0


Dependencies 11




Enzyme is a lightweight test library developed by Airbnb based on React. It can be used as a JavaScript test tool for React. This also makes the task of asserting, manipulating, and traversing the React component’s output very easy.

It mimicking jQuery’s API for DOM manipulation and traversal (e.g., find, emulate, etc.) and provides options for different types of rendering (e.g., shallow, mount, and static).
Other test libraries such as Mocha, Expect, Chai, Jasmine, and Enzyme are used together without conflict.
The Enzyme is very easy to use.
npm install enzyme
Assuming we have two components ToDoItem and ToDoList, we can test them like this:
For details, please refer to:
The sample



Find out more on Github and its website




BLUEPRINT



7762 u

Version 1.34.0

Blueprint is a React based UI component library that is great for building complex Web interfaces and reusable components using good code.


The library is primarily built for PC web, but will support mobile in the future. It is very flexible because it can be used with other JavaScript frameworks such as AngularJS, VueJS, etc
Blueprint can be used with CSS, and TypesScript can be used with JavaScript.
Install using the NPM command: 

npm install blueprintCopy the code

through
github 和
websiteFor more information



SPECTACLE



5693 u
Version 4.0.4


Dependencies 16




Spectacle is a React based library for creating high quality dynamic web presentation slides. You can easily demonstrate this by using the React component.
Creating presentations with this library is particularly easy because it has out-of-the-box components like

and

. This will make creating large UI presentations very enjoyable.

The library is flexible so you can write your build configuration or use the official templates to make your Web presentations look good.
Use the NPM command to install and then configure your demo yourself: 

npm install spectacleCopy the code

Or use a template: 

$ git clone [email protected]:FormidableLabs/spectacle-boilerplate.git my-spectacle-demo$ 
cd my-spectacle-demo$ 
rm -fr .gitCopy the code

For an example, see this article: Presentations With Spectacle — How I Modularize My Deck


through
github 和
websiteFor more information, or view
Demo.



ELEMENTAL UI



3848 u
Version 0.6.1


Dependencies 2




Elemental UI is a very flexible and efficient UI framework for quickly building well-designed Web applications.
This framework is very similar to Materail UI, but Elemental UI is more lightweight. It is a flexible and CSS styled React library. Install using NPM and build into your project via Browserify or Webpack.
Easy installation using NPM: 

npm install elementalCopy the code

Find out more on Github and its website





GROMMET



2621 u
Version 2.0.0 – alpha. 5


Dependencies 8




Grommet is a React library designed to improve the Web user experience. It is, in their own words, “the most advanced user experience framework for enterprise applications.” It is a very flexible library with large components for Dashboards, Login, Search, Meters, and so on. Increase its flexibility by configuring properties.
With the out-of-the-box components that come with Grommet, you can create amazing, reusable user interface elements that give users a great experience when working with Web applications.
The Grommet component features accessibility, cross-browser compatibility, theme customization, and more.
Install using NPM: 

npm install -g grommetCopy the code

Find out more on Github and its website





MOZAIK



2284 u
Version 1.4.4


Dependencies 31




Mozaik is a great library based on Nodejs/React/d3 / stylus for creating lively Dashboards for Web applications.

It offers good customization options, and it can be laid out in a responsive manner. That means it runs on all platforms, whether it’s big screens, PCS or mobile devices.
Mozaik has a number of themes that developers can use to create personalized applications. It allows for grid layout, optimized back-end communication, and the ability to use multiple Dashboards when needed.
through
github 和
websiteFor more information



conclusion

Make your development more efficient by using the above libraries, which can be used to:
  • Excellent user interface design
  • Build an engaging user interaction experience
  • Test the JS and React code
  • Generating static Web pages
These libraries use React features and component features to make your development easier and more efficient.


Original author: Anton Shaleynikov