7 React Libraries Every Developer Should Know About

Last Updated on May 6, 2018 by Aram

So you have been learning React lately, and you wanted to build a fully fledged website having all the features that make your website a modern web app, which should provide the users with all the modern features such as fast performance ( less than 2 seconds to load) , fully responsive design ( that works great on mobile, tablet, laptop, desktop or any size of screen), provides an intuitive user-experience that doesn’t keep doing server requests with full page reload and many more.

With React, you can easily build such a website and include even more features, such as making the site work almost normally offline or under a flaky network, receive push notifications on mobile, make it ask the user to add a home screen icon. In fact, these are some of the requirements to make your web app, a Progressive Web App.

Now, you might have heard the debate over the internet whether React is considered a framework or a library.

In fact, React is a library, it focuses only on the View part of your web application. View part means anything with regards the user interface design, and the interactions happening there. If you want to build a fully-fledged website you will definitely require additional React libraries.

In this article, I will tell you about 7 React libraries that you as a developer should know and learn about. If you are serious about React, whether being part of project at your company, or a freelance website or even if you are just interested in learning it. These React libraries will let you build a great flawless properly tested website that runs amazingly on any sized devices with a blazing fast performance and easily maintained code and flexible enough for more expansion in the website’s functionalities.

Let’s get started with our 7 React Libraries.

 

Create-React-App

This is not an actual library, but it is the simplest and easiest way to get started with React. A Github project created by Facebook to help developers to start writing React apps easily without the hassle of preparing configurations.

Just npm install it and you should be up-and-running with a basic running React app on your local machine.

The GitHub page of create-react-app provides getting started instructions and a comprehensive guide to start writing applications in React based on create-react-app project.

 

React-Bootstrap

If you have ever worked with the plain Bootstrap framework, you would know how powerful and easy it is to convert your fixed layout non-responsive design into a fluid responsive mobile-first one.

In fact, Bootstrap is the most popular front-end framework (According to Alexa Traffic Rank).

In order to blend bootstrap into your react app, you can reference the plain bootstrap files and work with it. But this is not the best way to do it, therefore, bootstrap has integrated with react, creating bootstrap-based components that allows the user to perfectly blend the bootstrap design elements within the react app.

To start using react-bootstrap, use npm to add it into your project:

React-bootstrap official website provides documentation to learn about this great library.

The aforementioned official website of react-bootstrap is currently supporting the bootstrap version 3.xx

If you insist on using the latest version of react-based bootstrap components, then you should check the library Reactstrap.  It is simple react library for React components built on top of Bootstrap 4. This is not part of the official react-bootstrap project, but was done to fulfill the needs of developers who have to use Bootstrap 4 but in its component-based structure to fit with React.

 

React-Router

React router is the library that will let you build a whole website using React, with exact URL routing (redirecting), and properly structuring the navigation that will allow the users to bookmark the URLs of your website to come back later and open the same bookmarked URL

With react router library, your React app becomes the so called ‘SPA’ Single Page Application, which is well-known architectural concept that other popular frameworks offer out-of-the-box with their routing mechanisms.

To get started with react-router, you simple need to install it:

Then you can follow the guide on React Router’s official website

If you think the documentation are not clear enough, you can check the medium article: A Simple React Router v4 Tutorial by Paul Sherman. It is a very nicely written tutorial that explains the React-Router library really well.

 

React-Redux

This is by far the best implementation for a robust state management architecture, that blends perfectly with React.

Redux is the improved form of Flux, the well known state management architecture. You can consider Redux as the library implementation of Flux architecture but in an enhanced structure that addresses the complexity and limitation of flux. You can learn more about flux and the difference between flux and redux here

In summary Redux is composed of the following: store, reducers, actions with the below definitions:

• The state data is saved inside a single store object.
• A store is only accessible via reducers (pure functions with known input, and known output),
• Reducers are functions that have 2 parameters, the current state and an action, and the result is a new state object.
• An action is a string constant that represents the type of action to be done.

To install Redux into your React project, you need to add it using npm as below:

then you will need to add the react-redux and redux-devtools:

To get started with redux, first check its Github page

Then to learn more about it, the official website of Redux provides plenty of online resources to read and learn more about Redux itself as a JavaScript library, and the integration with React. It also covers more advanced topics.

One of the best learning resources on the web to learn React-Redux is React Redux Tutorial for Beginners: The Definitive Guide (2018) created by Valentino Gagliardi. It provides an absolutely amazing and comprehensive guide to learn Redux and how to integrate it into React.

One important thing to note is that you can integrate Redux with frameworks or libraries like Angular or Vue.js , Redux is not strictly specific to React.

 

Enzyme

This is unit testing library for the React Components by Airbnb. It provides simple functionalities to help the developer do the needed assertions and traversals on React components output. Unit testing the components can result in a robust error-prone React web app.

To use Enzyme for React, you need to first install Enzyme library and then you should import an adapter that corresponds with the React version you are using:

Then to run the Enzyme tests, you should use any of the test runners available. There are many popular test runners out there that properly blend with Enzyme tests, such as Mocha, Chai, Jest and many others.

Go take a look at Enzyme’s official website to learn more about it.

Jack Franklin wrote a great article explaining how to write tests for React 16 using Enzyme 3.

 

React-Intl

Stands for React Internationalization, and based on format.js library, React-intl helps internationalize your React app, with an easy API to format numbers, currencies and pluralize strings while supporting translations for over 150+ languages.

This library is built and supported by Yahoo and the community. It is one of the best libraries out there to improve your app’s international formatting, and make it ready to be localized whenever needed.

On a side note, internationalization is usually referred and written as i18n, where there are 18 letters between i and n.

The npm command to add React-int to your project:

Head to React-Intl’s Github page to learn more about this wonderful library.

Also check this medium article that explains the i18n pretty well, Internationalization in React by Preethi Kasireddy.

Gatsby

A static site generator for React. It leverages the GraphQL technology to pull your website’s data content from numerous of sources such as CMS, databases, APIs and many others.

The generated site is a static Progressive Web App, that relies on the app shell model to load the main components of your site (html, css, javascript), this will let your users browse the website in a super fast manner.

To start using Gatsby, you need to install its command line tool (CLI)

And then follow the instructions in Gatsby’s official docs page . You can learn about Gatsby in its official site, and by visiting its Github page

Check also this tutorial: Zero to Deploy: A Practical Guide to Static Sites with Gatsby.js by William Imoh.

Conclusion

Of course there are not the only great React libraries on the web that helps with building full scale modern web apps. In this article I wanted to cover few of these libraries, and brought a library that represents an important aspect for building the app. I covered the UI part with React-Bootstrap, the state management with React-Redux, Routing and navigation with React-Router, Testing components with Enzyme, supporting i18n with React-intl and a great tool for generating static websites with React using Gatsby.

If you think this article added value to your current knowledge in React or motivated you to start learning React, then feel free to share it with your network.

Let me know if you have comments or notes.

To get notified about new posts, make sure to subscribe with your email.

Bonus

My wonderful reader, enjoy this piano masterpiece by Chopin: Nocturne op. 9 no. 1 in B flat minor played by Rubenstein