DEV Community

Cover image for Top React JS Frameworks Every Developer Should Know
Aydın Akyol for Refine

Posted on • Updated on • Originally published at

Top React JS Frameworks Every Developer Should Know

Best UI Frameworks for React.js

In this post, I have listed some of the best React frameworks that are most popular and that I believe will be popular in 2022.

What is React?

React is a JavaScript library that was developed by Facebook. It is one of the most popular libraries for building user interfaces.
React has a number of features that make it an attractive option for developers to use when building their next front-end project. React is very easy to learn and can be used in any type of project. It also has a large community, which means you will always find help when you need it.

React has a number of frameworks that are competing to be the best framework in 2022. It is not easy to create a React project from scratch, but with the help of some libraries and frameworks, it can be done in no time.

Table of Contents

  1. Create React App
  2. Material-UI
  3. Ant Design
  4. React Bootstrap
  5. Refine

1. Create React App

Create React App is a comfortable environment for learning React, and is the best way to start building a new single-page application in React.

You don't need to learn and configure many build tools. Instant reloads help you focus on development. When it's time to deploy, your bundles are optimized automatically.

Get started in seconds
Whether you’re using React or another library, Create React App lets you focus on code, not build tools.

To create a project called my-app, run this command:

npx create-react-app my-app
cd my-app
npm start
Enter fullscreen mode Exit fullscreen mode


2. Material UI

First up, Material UI is an excellent React UI framework with multiple pre-built components and templates. Material UI is a great framework for building UI components. It has a large community of developers and is very popular.

MUI provides a robust, customizable, and accessible library of foundational and advanced components, enabling you to build your design system and develop React applications faster.

// with npm
npm install @mui/material @emotion/react @emotion/styled

// with yarn
yarn add @mui/material @emotion/react @emotion/styled
Enter fullscreen mode Exit fullscreen mode




3. Ant Design

Looking for a React admin panel framework that is both attractive and easy to use? Look no further than React Ant Design. This library provides everything you need to get started quickly, including components, layout templates, and powerful routing capabilities. Best of all, it conforms to the popular Ant Design style guide, so your app will look great whether it's running on a desktop or mobile device.

// with npm
npm install antd

// with yarn
yarn add antd
Enter fullscreen mode Exit fullscreen mode



Ant-Design pro

4. React Bootstrap

This UI Kit library provides a React alternative to Bootstrap, giving you more control over the function of each component. With this framework, it's easy for developers who want an online presence without having too much work with coding or design skills! You can find thousands of themes made using these components as well so there will be something in here perfect just what your needs are at any given time.

npm install react-bootstrap bootstrap@5.1.3

Enter fullscreen mode Exit fullscreen mode




5. refine

If you're looking for a framework that will let your data- intensive application run at top speeds with extreme customizability, then look no further than refine. This React based headless system has been designed specifically for speed - allowing users to bring their own UI and update it via refine's powerful interface!

Key features

🔥 Headless : So you can bring your own UI and fuel it with Refine for top speed development.

⚙️ Zero-configuration : One-line setup with superplate. It takes less than a minute to start a project.

📦 Out-of-the-box : Routing, networking, authentication, state management, i18n and UI.

🔌 Backend Agnostic : Connects to any custom backend. Built-in support for REST API, GraphQL, NestJs CRUD, Airtable, Strapi, Strapi v4, Strapi GraphQL, Supabase, Hasura, Appwrite, Firebase and Altogic.

📝 Native Typescript Core : You can always opt out for plain JavaScript.

🐜 Enterprise UI : Works seamlessly with Ant Design System. (Support for multiple UI frameworks is on the Roadmap)

📝 Boilerplate-free Code : Keeps your codebase clean and readable.

There are two ways to add UI elements to refine;

  1. Using a UI Library such as Tailwind, Chakra UI, etc.
  2. Using a complete UI Framework such as Ant Design, Material UI, etc.

The recommended way is using the superplate tool. superplate's CLI wizard will let you create and customize your application in seconds. You can find tutorial from here

npx superplate-cli -p refine-react tutorial
Enter fullscreen mode Exit fullscreen mode






If you enjoyed this article, please hit that little heart button and share with others!
This will help us grow our community so we can all learn more together.

Top comments (11)

singfield profile image
Singfield • Edited

You can add Hydrogen, vite-react, blitz, Next in opposition to create-app.

And tailwindcss, windicss or styled-component, chakraUi and emotion in opposition to the rest

biskuvit profile image
Aydın Akyol

Hi @singfield In the following blog posts, I will continue the discussion on these topics. I didn't want to prolong reading time, so stay tuned!

hacker4world profile image

Here are some more:
-Framer motion for animations
-react icons for icons
-mdb for components

thethirdrace profile image

Framer-Motion is an awesome library for animations.

But it's also the most horrible abomination for your JS bundle size...

If you even remotely care about mobile performance, stay away from it.

biskuvit profile image
Aydın Akyol

Hi @hacker4world , Thank you for sharing your advice. It's really helpful to those who want to learn more about React frameworks.

fadhilradh profile image
Fadhil Radhian

Remix for fast-SSR and nested routes. In some cases it is better than Next.js

sixman9 profile image
Richard Joseph

You beat me to it!, I like the way complex UIs can be composed and nested.

Check out Twin, let's you apply the CSS magic of Tailwind to any Styled-esque component framework, see this post for more info.

tawaliou profile image

Chakra UI

amhernandez profile image
A.M. Hernandez

Very informative, thank you!

adrai profile image
Adriano Raiano

fyi: refine under the hoods uses react-i18next...
I've also written a blog post about react-i18next:

sadokmhiri profile image
Sadok Mhiri

Also, I suggest Mantine UI, it has a powerfull Hooks & UI Components