react frameworks | Massive Pixel Creation

Thankfully, React’s popularity ensures a wide range of tools to choose from.

Which is actually an understatement.

The range is gigantic. The community is active and talented, constantly working towards improving the development experience. Therefore, the number of available tools can be a bit overwhelming. But don’t worry — we’ll bring your attention to the best of the best.

Top 10 MPC’s Favorites

The first list will focus on libraries and frameworks that are particularly favored and recommended by our own Massive Pixel Creation’s React developers.

Gatsby

Gatsby is a little hard to nail down. It’s most commonly defined as a “React static–site generator with GraphQL and Webpack on the side”. It’s a gross simplification called out by Gatsby’s creator himself, Kyle Mathews. It’s rather a full–fledged framework for both web and mobile apps that works a bit like a compiler, but also as an ETL tool (Extract, Transform and Load). So what’s with all that ruckus with static–site generation?

It’s a simple case of miscommunication. Gatsby indeed does produce static files that can be deployed on a CDN (Content Delivery Network) without the need of a running server, but it doesn’t stop just there. Gatsby is more than capable to create dynamic, scalable React websites and apps just like any other popular framework. To quote straight from the source — “Statis is fast. Static now scales” followed by “Generate it statically. Generate it dynamically. Or, somewhere in between.”

Gatsby is most beneficial to use for building static websites and progressive web apps. It’s also a good choice for any React project that demands high performance, high level of security, SEO–friendliness, and the need to handle a massive amount of plugins.

Gatsby is currently being used by companies such as Snapchat, Tinder, and Revolut, and has 51.4k Github stars.

Next.js

Next.js is an open–source JavaScript framework that enhances the React development experience by introducing features that go beyond the view layer, which React is restricted to. Guillermo Rauch, Next.js’ creator, wanted to include features like server–side–rendering, static site generation, and incremental static regeneration — so that all the content data can be found in one place.

Additionally, Next.js eliminates the need to use a bundler or a compiler. It also helps with production and SEO optimization, as well as reduces the amount of code needed to connect your React app to the data store on the server–side to the bare minimum.

Also, Next.js’ scalability is insane. You can create both single–page applications and large enterprise projects that consist of multiple dynamic and interactive pages. This makes Next.js both universal and flexible — especially since it can run on the client–side just as well as on the server.

Next.js is perfect for building hybrid applications that have server-rendered pages and statically generated ones at the same time. It’s also a great choice for big eCommerce websites, web portals, and sites with a large base of users. And of course, for single– and multiple–page applications.

Next.js is currently being used by companies such as Hulu, Twitch, and TikTok, and has 73.7k Github stars.

React Router

React Router is a routing library consisting of navigational components which are used for rendering multiple views. That is, it eliminates the need for refreshing the page each time a user navigates through the site. It’s mainly used for Single Page Applications like Facebook or Twitter — even though users might think they’re being redirected to different pages, they actually stay on a single one, but with different content displayed.

React Router uses dynamic routing, which happens during the rendering of your app and not before, as in the case of Angular or Rails. While static routing still has some uses, dynamic routing introduces three main benefits:

Almost everything becomes a component, reflecting React’s main philosophy,
Configuring nested components becomes easier,
It’s possible to render the components conditionally.

React Router was created by Ryan Florence and Michael Jackson, and is currently being maintained by React Training. On Github, React Router has 44.1k stars.

React Redux

Redux is a predictable state management library for JavaScript applications. It creates one source of truth for the entire state of an app and it eliminates the need for passing data through all the nested components. Moreover, it’s independent enough to be used with different libraries and frameworks — like Angular, Vue, Ember, or Vanilla JavaScript. But most commonly it’s used with React, and it quickly gained fame as a necessary part of React development experience.

So if you’re also using both React and Redux, then you’re going to need a UI binding library to keep them together. Most probably, you’re going to use the official library, simply called React Redux.

Why use this one, you may ask:

It’s an official library developed and maintained by the Redux team. Because of that, you don’t have to fear any discrepancies between React Redux and Redux,
It was developed with React in mind, so the design principles stay the same. You can’t get any more personalized experience than that,
It implements internal performance optimizations to control the re-rendering of the components.

When it comes to popularity, React Redux can boast about its 21.4k stars on Github.

Redux–Saga

While we’re on the topic of Redux, let’s take a closer look at Redux–Saga.

Redux–Saga is a middleware library that manages side effects, such as network requests, modifying global variables, DOM manipulation — in short, everything that happens beyond the executed function that’s outside of your control. Side effects are a given when dealing with impure functions, that is those that don’t always return the same result when the same arguments are passed. The opposite of impure functions is pure functions.

Redux–Saga easily separates components from side effects, making the latter easy to manage and keep track of, even easier to test, and better handle failures. It also lets you run parallel tasks at the same time due to its fork model. Overall, Redux–Saga gives you more control over the code.

Another big benefit of using Redux–Saga is that it prevents callback hell, which happens while using asynchronous functions that delay the returning of results.

Redux–Saga currently has 21.9k stars on Github.

Redux–Observable

If Redux–Saga didn’t manage to steal your heart but you’re looking for something similar for dealing with side–effects, check out Redux–Observable.

Redux–Observable is a middleware for Redux based on RxJS, a library that handles asynchronous and event–based programs. So of course, Redux–Observable should be a good choice for those who already know RxJS. And those unfamiliar with RxJS will need more time to get a hang of it.

When to choose Redux–Saga and Redux–Observable? They both do an amazing job with complex asynchronous workflows, but the former is better for those who like working with observables and pipeline–based sequences of data transformations, while the latter is a better choice for those who prefer imperative and sequential programming.

Redux–Observable was created by Ben Lesh and Jay Phelps, and has 7.7k stars on Github.

Styled–Components

Did you know you can style your React components using CSS inside your JavaScript code? Well, now you do.

Styled–components make that possible thanks to tagged template literals and the power of CSS. Each time you define styles, you actually create reusable React components with attached styles. You can also build your own custom pre–styled components for a more flexible development experience, and use props and variables as values in your styles.

Also, managing styles is easier — you can effortlessly keep track of all the stylings involved — and you don’t have to worry about class name bugs. Styled–components generate unique classes, thanks to which you can avoid any duplicates or misspellings.

The killing feature of styled–components is how easy it is to use, even for those who are inexperienced with either front–end styling or CSS.

Styled–components was created by Max Stoiber and currently has 35.3k stars on Github.

Chakra UI

Chakra UI is a simple, yet powerful component–based React library that helps you create user interfaces in a quick and swift manner, significantly saving time and boosting productivity. Although this library doesn’t have a giant number of ready–to–use components, it has everything a modern developer might need — animations, forms, layouts, drawers, modals, and so on.

It also allows you to create your own components and customize the existing ones in an easy and intuitive way. Everything else — hooks, portals, wrappers, context providers — follow the best React practices.

What sets apart Chakra UI from its main competitor, Tailwind CSS, is the accessibility. Chakra UI takes care of semantic HTML structure, keyboard navigation, and most importantly — WAI–ARIA requirements.

Chakra UI was created by Segun Adebayo and at the moment it has 21k stars on Github.

MUI

MUI, formerly known as Material–UI, is a massive library of ready–for–production components that aim to increase accessibility and reduce the entry barrier of UI design.

The most important thing to know is that Material UI implements Google’s Material Design and strictly follows its guidelines. Therefore, it’s very opinionated and doesn’t allow much customization. Although to combat that, MUI recently introduced unstyled components, which are wholly devoid of any styles whatsoever. Unfortunately, this feature is still a work in progress.

Until it’s ready, overriding styles is the only way to go, with four available methodologies to choose from: using StylesProvider, ThemeProvider, withStyles, or useStyles.

But working with a very opinionated library doesn’t have to be a bad thing. It leads to extremely quick results and ensures a cohesive design throughout the whole project. You can also integrate it with Figma, Sketch, and Adobe XD for an even smoother experience.

Another point in favor of MUI is its documentation — it’s clear, well–organized, and easily navigable. Finding help isn’t difficult as well, what with this technology’s popularity. On Github, it has 72k stars.

React Testing Library with Jest

React Testing Library, built on top of DOM Testing Library, enables you to test React components in a way that closely reflects real–life use. It’s possible due to the tests being performed directly on the DOM, which helps you check all the components’ look and behavior. This is more important to the user than the implementation itself. This user–centric approach follows the best practices, which only proves that React Testing Library is indeed worthy of being added to your stack.

Additionally, React Testing Library facilitates refactoring, encourages best practices when it comes to accessibility, and keeps your tests easy to maintain in the long run. And it’s really lightweight, too.

It also works with any framework, but Jest is a particularly recommended option.

Jest is a simple JavaScript Testing Framework that can be used with not only React, but also with Angular, Vue, Node, and Babel, among others. It doesn’t require any configuration and is both quick and easy to set up. Its main advantage though is speed — because it runs tests in parallel and prioritizes the slowest ones, it can significantly reduce test runtime.

Moreover, it has great mocking modules and timers, supports TypeScript, and doesn’t require any additional tools. No wonder then that it’s even used and maintained by Facebook.

React Testing Library was created by Kent C. Dodds and has 15.3k stars on Github, while Jest was created by Christoph Nakazawa and has 36.7k stars on Github.

9 Honorable Mentions

While these tools weren’t mentioned by our developers, they’re popular enough to warrant their own list. So here it is, the next 8 React libraries and frameworks that can save your project!

Redux

This might seem a bit redundant, but it deserves to be listed — Redux became such an important part of React experience that it’s not even mentioned anymore, for it’s taken as a given. But, as you have noticed, we did already mention supporting tools for Redux, like React Redux or Redux–Saga. So let’s delve into Redux itself a little bit more.

Redux is a predictable JavaScript State Manager that contains the whole state of an app in one location only — also called a “Store” — that becomes one source of truth. It also enables every element of an app to access it directly, without the need to send props or call back data. Also, in the case of your app growing in size, you won’t have to get new additional stores, but split the root reducer instead. All the new parts can be combined later on.

Main benefits of Redux are: the never–changing predictability of state, easy debugging, testing, and maintenance, reusable code, and strong community support, among others.

Redux was created by Dan Abramov and Andrew Clark. Currently, it has 56.8k stars on Github.

React Bootstrap

Citing straight from the source — React Bootstrap is “the most popular front-end framework Rebuilt for React” that’s a substitute for Bootstrap. Essentially, there was one big issue that made Bootstrap so unsuitable for React: its dependency on jQuery, which manipulates DOM directly, going against React principles in result. React Bootstrap eliminates that dependency entirely while saving what people loved about the original Bootstrap the most. And all that while ensuring super smooth integration with React that gives it an almost native feel.

Using React–Bootstrap ensures much more cleaner and readable code, as well as more control over each component’s form and function. Additionally, each component becomes an actual React component when inserted into the Virtual DOM.

Most importantly, React–Bootstrap is wholly compatible with Bootstrap itself: so all the themes you might already have at your disposal will be applicable.

React–Bootstrap is currently maintained by a team of developers on Github and it has 20k stars.

React–Helmet

React–Helmet serves one purpose and one purpose only: to manage the document head. With its help, you can dynamically set the page title, language, and metadata, all while avoiding duplication. So it’s particularly useful when dealing with multiple components in a <head> tags tree, and also in cases with multiple <meta> tags with identical attributes and/or values. It’s also beneficial while working with Gatsby, which by default prevents directly changing the <head>.

Also, since React–Helmet is a no–brainer, it’s considered to be beginner–friendly.

For asynchronous work done on the server, it’s better to use React Helmet Async, which encapsulates data on a per–request basis. React–Helmet unfortunately isn’t exactly thread–safe.

On Github, React–Helmet has 15.6k stars.

Ant Design

Ant Design is “the world’s second most popular React UI framework”, as cited directly from their website. With its high–quality components you can easily create dynamic, interactive user interfaces best suited for enterprise-level products. It also offers thorough theme customization and contains plentiful design resources and development tools as well. Its enormous ecosystem is actually one of its most well–known features.

Ant Design is completely written in TypeScript and supports server–side–rendering. It also follows the Material Design principles of Google to ensure high–quality experience for the users.

As a bonus, Ant Design supports dozens of langua g es, although ironically, there are some language barrier issues as well — Ant Design is immensely popular in China, so you can expect to stumble into Chinese discussions or even documentation from time to time. But in general, Ant Design’s documentation is well–written and beginner–friendly. Additionally, due to its popularity, it’s easy to find help or battle–tested solutions.

Ant Design was created by Chinese contributors and has 74.8k stars on Github.

Semantic UI

Semantic UI is a user interface framework based on natural language principles. With it, you can quickly build responsive layouts for a lightweight user experience. Besides delivering a broad spectrum for customization and relative design freedom, it’s also easy to use and surprisingly intuitive. The reason for this lies in human–friendly HTML with simple syntax and JavaScript’s equally easy semantics.

Additionally, Semantic UI comes with very helpful, detailed documentation.

With Semantic UI you don’t have to worry about the cohesiveness of your design. Moreover, the wide variety of possibilities ensure that your websites won’t look the same, or even similar — which is an accusation often made to Bootstrap.

Most importantly, you can reuse your designs and apply the same code to many different projects. This can speed up your development process.

Many libraries and frameworks can be integrated with Semantic UI: React, Angular, Ember, Meteor, and many others.

Semantic UI was created by Jack Lukic and has 49.6k stars on Github.

React Motion

React Motion is a great choice for those who like incorporating realistic animations that seem to follow the laws of physics into their designs. There are two variables that are responsible for that: stiffness and damping. The former describes the force of the object being pulled, while the latter describes the friction an object will encounter while being pulled. Thanks to that, hardcoded easing curves and animations are avoided without the loss of smooth transitions. In result, all the animations gain a natural feel that makes using the application a real joy for the users.

With the help of just those two variables, you can create a surprising amount of different animations that will enhance your website or app.

Also, React Motion comes with a simplified API, so it’s easy and quick to use.

React Motion was created by Cheng Lou and currently has 20.2k stars on Github.

Rebass

Out of all React component libraries, this one is definitely the tiniest one. With just eight components and the corresponding weight of 4KBs, it offers all you might need to jumpstart your project. It might be particularly useful for those who want to create their own UI components or even a whole custom user interface from the ground up. It also enables you to create a personalized design system.

All eight components are primitive and unopinionated, their styles isolated, while the library itself is minimal, flexible, and consistent. It also doesn’t have any themes, but it’s fully compatible with Theme UI. So if you do want to add a theme, you can do so via ThemeProvider.

Rebass makes writing any custom CSS redundant, which speeds up the development process. Also, all the components are rendered to the canvas instead of to the DOM, increasing the performance. Additionally, Rebass comes with a flexbox layout and flexible variants API. And since it was built with Styled System, Emotion, and Styled–Components, all the objects created with those technologies should work with Rebass.

Rebass was created by Brent Jackson and currently has 7.5k stars on Github.

Create React APP

Create React App is a Command–Line Interface tool that lets you quickly create and run a React app without any configuration whatsoever. It’s officially called the best possible way to build Single–Page Applications in React, and it also makes a fantastic environment to begin your learning journey. With just one command line, you’re ready to go.

Create React APP comes with a file bundler (webpack), a development server (webpack dev server), a transpiler (babel), a linter (ESLint), and several polyfills. The best news — you don’t have to know any of them. Everything will be preconfigured, optimized, and hidden. This will let you put your focus exclusively on the code, especially with instant reloads set in place. You don’t even have to worry about the maintenance — updates can be triggered with a single command.

Also, Create React APP doesn’t touch on the back–end logic at all, so you’re free to choose your own preferred back–end.

Create React APP was created by Facebooks’ React Team and currently has 90.8k stars on Github.

React Hook Form

React Hook Form, another example of tiny React libraries, offers an excellent web developer experience by reducing the amount of code needed while aiming for high performance. With its help, you can create flexible and extensible forms with consistent and easy–to–use validation, which follows HTML standards. Most importantly, it isolates components from unnecessary re–renders triggered by user actions. The whole idea behind React Hook Form supports just that — managing uncontrolled components through Hooks for improved user experience. And performance, naturally.

React Hook Form also ensures faster mounting, which is possible due to the many components being uncontrolled (meaning that the form data is managed by the DOM instead of a React component) and having less overhead.

Moreover, React Hook Form has no dependencies and can be easily integrated with UI libraries. As a bonus, it also works well with React Native.

React Hook Form was created by Bill and currently has 23.6k stars on Github.

The Dangers of Overengineering

Excited, much?

Did you find some new libraries or frameworks to use as soon as possible? Or did we remind you of some cool stuff you were meant to test but ultimately forgot to?

Well, hold your virtual horses.

While it’s true that there’s plenty of useful tools and they all look convenient and fun, beware of adding too much to your tech stack. If you’re not sure whether you need something, you most probably don’t. So don’t go overboard with tools just because they’re within your reach.