What's the reason that you're using React to build your apps' UIs? I mean the “real” reason why you chose it over other equally “tempting”, powerful JavaScript component libraries? Is it its virtual DOM? Or is it because it empowers you to model the state of the user interface and to declaratively describe it? Or is it its... components actually? Speaking of which: here are the 5 most popular React libraries — open source component libraries — that you should be following on GitHub.
Note: it's the number of stars on their various repositories that I've used as the main criteria for selecting these 5 best libraries! The one which “dictated” the here-below hierarchy structure:
But First: A Few Words about React Components
Let me start by attempting to briefly, yet thoroughly, define React components:
Independent, reusable pieces, that you can just mix and match in order to put together the “puzzle” UI for your app: the “composable” user interface!
They're the main (yet, not the only) “culprits” of this JavaScript library's spiking popularity and of the overall enjoyable developer experience, as well.
1. Material UI
A “can't live/develop without” type of library — a set of React components, in fact, that you can use to implement Google's material design.
Therefore, expect it to:
- ease your developer experience as you're building amazing UIs for your apps
- turn into an essential tool to have in your own “SPA building toolkit”
Note: keep in mind to use the same environment for the server and the client whenever you're using Material UI with server rendering.
As for its installing, it's as simple as running this command:
npm install material-ui
2. Ant Design, One of the Most Popular React Libraries
This UI library comes at hand whenever you need to add stunning designs to your React applications.
Following the Ant Design specification, and coming “packed” with a full set of components and demos for you to tap into, this React-based library makes the “Swiss knife” type of tool for designing your desktop applications with.
And speaking of the built-in components that you get right out of the box — aimed at making the developer experience “particularly” enjoyable — let me list them for you here:
- NPM
- dva front-end development workflow
- webpack
And it goes without saying that its installation calls for one simple command:
npm install antd
3. Storybook
No wonder that it has made it to top 3 most popular React libraries on GitHub:
Take Storybook as the equivalent of Firebase and Meteor, but for front-end developers instead. It eases their work and it significantly improves their development experience.
“How?” By enabling you to build your UI components outside your React application!
And this aspect becomes particularly convenient if you're part of a whole team who's working on the same React project. This way, each of you can work on the UI components in your own projects.
You're not constrained to be designing them in the React app itself since Storybook provides you with its own UI development environment.
Install this React-based library by simply running this npm command:
npm i -g @storybook/cli
cd my-react-app
getstorybooknpm run storybook
4. Gatsby
This static site generator's 2 main features, which “propelled” it straight to the top — that of the most popular React libraries on GitHub?
- it enables you to turn plain text into an awesome website nice and easy, without having to get yourself tangled up in code
- it makes maintaining the website thus generated conveniently easy: you're free to scale it up, later on, to easily enhance its web functionalities
Moreover, installing it calls for just one simple command:
npm install gatsby
Note: Gatsby will also provide you with a command line that you can install running this npm command:
npm install --global gatsby-cli
5. Enzyme
My list of the most popular React libraries that you, too, should be using, has so far included:
- design-oriented libraries
- libraries geared at making web development a whole lot easier and more accessible
… so how about testing?
And this is but one of Enzyme's key roles; the library's also geared at:
- manipulating
- asserting
- traversing your component's output
… conveniently easy.
And it manages to streamline all these tasks by imitating jQuery's API for DOM manipulation and transversal (simulate, find and so on).
Also, this lightweight testing library comes up with an option for various types of rendering: static, shallow, mount... Should I also mention that it “gets along” with other libraries — Chai, Mocha, Jasmine, Expect — conveniently well?
Feel free to install it using the following npm command:
npm install enzymeIn other words: make your developer experience enjoyable and it will only bubble up to the user experience!