DEV Community

Cover image for 7 Essential React Libraries for Front-End Web Development
Suraj Vishwakarma
Suraj Vishwakarma

Posted on • Updated on • Originally published at surajondev.com

 

7 Essential React Libraries for Front-End Web Development

Introduction

There is no doubt that React is the most popular frontend framework. New web applications are made using React or its frameworks such as NextJS and Gatsby. The success of any framework is not entirely dependent on its performance but also on the libraries of others.

There are tons of JavaScript and React libraries. They support npm, yarn, and pnpm package managers. I have been using React and NextJS for a long time. Right now, I have some sets of libraries that I installed along with installing React.

Today, I am going to list down some of the libraries that I installed along with React. Now, let's get started.

React Router

React Router

It is one of the most installed libraries for React. There are around 8 million installs every week. This library provides a routing facility for React. It has now become a core for React.

It is quite easy to use the React router. You can dynamically render different components per route.


Redux

Redux

Redux is a popular open-source JavaScript library that is used for managing the state of web applications. It is a predictable state container for JavaScript apps. This helps to manage the state of an application in a more organized and centralized way, making it easier to debug and maintain.

I have not used it that much but sure it is one such library to you must install with any React project for managing state. It has support for other frameworks too.


Chakra UI

Chakra UI

Chakra UI is my goto library for getting customizable react components. It uses a flexible theme system based on the Styled System library, which allows you to create consistent and reusable styles for your components.

Few features that I like

  • Easy to use
  • Many Components
  • Easily Customizable as per UI
  • Can help build frontend in much less time

It also has excellent documentation and an active community, which makes it easy to get started and find help when you need it.


Axios

Axios

Axios is a popular JavaScript library that is used to make HTTP requests from web browsers or Node.js. This library is not restricted to the frontend but extends its reach to my backend too. Requesting either backend or external API is quite easy with Axios. By default, we have to fetch but Axios feels more simple and more reliable in my sense.

With Axios, you can easily set headers, query parameters, and request data. It also supports various authentication mechanisms such as basic authentication, token authentication, and OAuth2.


React Helmet

React Helmet

React Helmet is a popular open-source library for React that provides a simple way to manage the head of your web pages. SEO is a crucial part of a website apart from web development. Adding relevant information to it will increase SEO ranking.

With React Helmet you can dynamically change the content of the head, including the title, meta tags, stylesheets, and scripts.


React Testing Library

React Testing Library

React Testing Library is an open-source testing library for React applications that focuses on testing user behavior rather than implementation details. It is designed to encourage developers to write tests that are more readable, maintainable, and resilient to changes.

React Testing Library is a powerful and flexible library that can help you write more effective and maintainable tests for your React applications. Its focus on testing user behavior rather than implementation details, coupled with its accessibility testing tools and testing guidelines, make it a popular choice for developers who want to improve the quality and reliability of their code.


Framer Motion

Framer Motion

When it comes to adding animation to my React components then Framer motion is my first choice. It helps to create stunning and fluid animations for your web applications. It gives a lot of control to animation.

One of the key features of Framer Motion is its support for variants. Variants are reusable animation states that define a set of properties and values for a component.

Connect With Me

Conclusion

React is a popular and powerful JavaScript library for building dynamic and interactive user interfaces. However, to take your React-based front-end web development to the next level, it's essential to utilize other libraries that enhance React's functionality and simplify common tasks. The above articles highlight such libraries that give more power to react.

I hope the article has helped in knowing some libraries of React. This is just 7 but there are others too that are equally important. If you got any other library then mention it in the discussion section. Thanks for reading the article.

Top comments (31)

Collapse
 
kashanahmad profile image
Kashan Ahmad • Edited

And how are these libraries essential? What's the basis? Not to mention that Redux is outdated and suggests Redux/Toolkit by itself.

Collapse
 
leob profile image
leob

Yep if you need Redux then what you really want is Redux Toolkit, unless you really love writing boiler plate!

Collapse
 
surajondev profile image
Suraj Vishwakarma

As this provide more functionality such as routing, testing and components building.

Collapse
 
joelbonetr profile image
JoelBonetR πŸ₯‡

What you want is called Next JS sir 😁

Thread Thread
 
surajondev profile image
Suraj Vishwakarma

Definetly a good choice instead of CRA but still you will need libraries to make it evern more powerful.

Thread Thread
 
joelbonetr profile image
JoelBonetR πŸ₯‡ • Edited

You don't need a "powerful" environment. You need an environment that can cover your needs while being dynamic enough so you can add building blocks into it whenever necessary.

With something like that you're good to go for a full E2E project as starter:

dependencies: {
  next,
  styled-components (or any other of your preference),
  sequelize (+ the DB driver you use),
  joi (or any other schema validator of your preference)
}
devDependencies: {
  typescript,
  prettier,
  eslint,
  eslint-config-next,
  ts-jest,
  sequelize-cli,
  testing-library/react,
  "@types/whatever"
}
Enter fullscreen mode Exit fullscreen mode


*Swap sequelize by Mongoose if you use Mongo DB.

Thread Thread
 
kuvambhardwaj profile image
Kuvam Bhardwaj

I go with Prisma when starting any new projects instead of sequelize, Have you heard about it?

Has a pretty developer experience imo

Thread Thread
 
joelbonetr profile image
JoelBonetR πŸ₯‡ • Edited

I've sure heard of it!

I've recently checked the details on both Prisma and TypeORM and I decided to go for Prisma on my next side-project to test it on my own 😁

Did you use Sequelize before? Or Mongoose?

I saw that Prisma can handle both SQL and Mongo (among others) but i don't really know the pros and cons of using it vs Sequelize/Mongoose yet (tech details, performance...).

Any advice/tip that you can provide would be much appreciated πŸ˜€

Thread Thread
 
kuvambhardwaj profile image
Kuvam Bhardwaj

For some reason I didn't like the Developer Experience with Sequelize or even Mongoose so I prefer Prisma for everything,

I love their simple language they use in the schema file, makes it really simple to define relationships.

I dont know much about the performance & benchmarks compared to other ORMs but I haven't ran into any such bottle necks yet, so I keep using it πŸ˜„

Thread Thread
 
joelbonetr profile image
JoelBonetR πŸ₯‡ • Edited

Well, using Sequelize you just throw the CLI command and it does everything for you, you don't need to write schemas manually πŸ˜…

e.g.

npx sequelize-cli model:generate --name User --attributes firstName:string,lastName:string,email:string
Enter fullscreen mode Exit fullscreen mode

Can't you do that with Prisma? 😱

Thread Thread
 
kuvambhardwaj profile image
Kuvam Bhardwaj

No, you can't do that in Prisma, seems interesting though

Thread Thread
 
joelbonetr profile image
JoelBonetR πŸ₯‡

πŸ₯² disappointing, I've been interacting with ORMs this way for 10 years in different languages/platforms...

Collapse
 
stianhave profile image
Stian HΓ₯ve

In my opninion toolkit is king compared to Redux, however i prefer zustand over all of the above.

Collapse
 
thethirdrace profile image
TheThirdRace

I think these are all great librairies. They all solved something that we needed with React.

I personally used all of them, but the only ones I'd only ChakraUI and React Testing Library nowadays. And I'm only including ChakraUI because of their roadmap for V3. If it doesn't fulfil their promises, I'll most likely remove it from my toolbelt.

The huge problem with all these librairies is that once you install them all, you already bust the recommended JS bundle size of 130 to 170 KB. Just for a "hello world" page...

React Router is nice, but the migrations over the years are making it a very risky move. I prefer using NextJS, but if I had to use a router, I'd probably go with the one from Tanner Linsley (aka the Tan stack).

I still haven't found a good use for Redux or Redux Toolkit. React Query will definitely do better with a smaller JS footprint. The problem with Redux is that it's a very big for the small amount of global state you should use. Server state, local state and url state should cover pretty much all your needs, what's left is very few outliers and you're definitely paying a huge price if you're going for Redux in these cases...

Chakra is awesome, I love it. But I also hate the 100 KB of gzip JS just so you get a button displayed on the screen. The V3 roadmap could really help lower the bundle size, but until then I'd look at ZagJS which was created by ChakraUI creators to tackle the JS bundle size problem among other problems.

Axios is perfectly fine, but I usually don't have 11KB to burn on my JS bundle size. Especially now that fetch is supported in all browsers, NodeJS and Cloudflare workers...

React Helmet is a must if you're not using a framework that manages it for you. Fortunately, I use NextJS so I never had to use it.

React Testing Library is awesome. I have absolutely nothing negative to say about it.

Framer-Motion is a great animation library. Unfortunately, it's a pile of poo when looking at the JS bundle size and it's not tree-shakeable (technically it is, but you'll tree-shake 5KB at most, which is a drop in the ocean at this point). It's almost as costly as the whole React-Dom package, it makes no sense whatsoever to use it. Especially since most animations could be done with 2 CSS classes and less than 5 lines of JS.

Again, all these libraries are great. They work well and are usually a blast to develop with. The only problem is the cost the clients need to pay is simply too big to be performant. There's a reason the new generation of JS frameworks are all looking into reducing their bundle size as much as possible...

Collapse
 
leob profile image
leob

Great reality check :)

Collapse
 
banonotit profile image
BANO.notIT

Where chakra ui roadmap is located? Can you give a link?

Collapse
 
thethirdrace profile image
TheThirdRace

Here you go: Chakra UI V3 roadmap

Collapse
 
joelbonetr profile image
JoelBonetR πŸ₯‡

Completely agree.
If you think it in depth, developments that put 15-20 libs to begin with are not so different than picking a Wordpress and just push plug-ins into it and in this situation probably the second's way faster to GTD πŸ˜…

Collapse
 
prems5 profile image
PREM KUMAR

someone coming up with what is react , angular post after seeing this

Collapse
 
surajondev profile image
Suraj Vishwakarma

What you install with React when setting up project?

Collapse
 
joelbonetr profile image
JoelBonetR πŸ₯‡ • Edited

I install zero dependencies (aside from react, react-dom and testing libs) and just add things when I really need them.

Adding libs for simple tasks that can be accomplished easily without them is a very bad practice that pays off later on.
You'll need to handle the versions of each one and solve compatibility issues and it's definitely better to do so with 4 dependencies than doing it when you've like 20.

Collapse
 
surajondev profile image
Suraj Vishwakarma

Yes, that a good thing. Having low library will definetly improve performance.

Thread Thread
 
joelbonetr profile image
JoelBonetR πŸ₯‡

I don't even use CRA whenever I need to use React.

npm i -D parcel-bundler
npm i react react-dom

Create an index.js file in your root directory like that:

import React from "react"
import ReactDOM from "react-dom"

ReactDOM.render(<h1>Hello world!</h1>, document.getElementById("root"))
Enter fullscreen mode Exit fullscreen mode

Create an index.html file in your root directory:
index.html

Add this inside the <body> tag:

<body>
    <div id="root"></div>
    <script src="./index.js"></script>
</body>
Enter fullscreen mode Exit fullscreen mode

add the start command in your package.json:
"start": "parcel index.html --open"

and you're good to go 😁

Collapse
 
ebuka1anthony profile image
ebuka anthony

Nice Article Suraj, Newbies like us will definitely get value from this

Collapse
 
surajondev profile image
Suraj Vishwakarma

Glad that you like it!

Collapse
 
lukeecart profile image
Luke Cartwright

Thank you for sharing these,
The link to the react testing library is showing a 404. Please could you update the link

Collapse
 
surajondev profile image
Suraj Vishwakarma

It has been fixed. Thanks for repoting it.

Collapse
 
johnatandias profile image
Johnatan Dias

It's worth putting MSW on this list.

Collapse
 
joelbonetr profile image
JoelBonetR πŸ₯‡

I don't even know what MSW is, that's what google point me where searching for it:
magicseaweed.com/ and now I'm more confused than before πŸ˜…

Collapse
 
tomeq34 profile image
Tomeq34

I miss CoreUI React Library like here: coreui.io/react/

Collapse
 
andrewwebcoder profile image
Andrew-web-coder

Well, for me Fancyapps UI components are also essential, but it definitely depends on the project.