Best tools/libraries in the react eco-system

Best tools/libraries in the react eco-system

React is one of the or the best frontend frameworks out there. It's popularity tells it all. It is one of the top 10 libraries in npm.

Since react is not a full blown framework, it requires some other libraries which are supported to get your job done depending upon the project.

So today I'll be sharing my top 5 react libraries which I've been using since an year or so.

1.React Router

This is a no brainer one. Almost all of the react dev's prefer react-router-dom in order to achieve routing in there applications. In fact the people in the react team developed this library.

It's a very simple to use library with rich features such as dynamic routing, nested routing and so on.

It's very easy to pick up for new dev's and the documentation is on point too.

2.React Redux

Okay even this library is a no brainer. But in the year 2022 this particular library arises a question on whether I need this in my react project. react-redux cannot be used alone, it needs the redux library too or the new redux-toolkit.

People say there was a phase where all the react apps had redux in it. But after react introduced context API , everything took a turn. People loved context for its simplicity and easier syntax.

Personally, I use redux when it is a large sized application. For small to medium scaled applications context API is my go-to way.

3.React icons

Icons play a very vital role in a web application these days. It conveys a lot to the user and also looks every good if used it effectively.

React icons is a club of icons from different icon providers such as font awesome icons, material design icons and many more.

It's very easy to use and it has nice web app to search in different icons for your different use cases.

4.React Toastify

react-toastify allows to add beautiful notifications which slide in to the screen.

Again a very widely used library and an easy one too. It has loads of customization options such as changing the color, the position, programmatical controls and many more.

We just need to import the CSS and the toast container from the library for a basic use case.

5.React Markdown

react-markdown provides a component to render markdown.

The main reason to use this library is that this library does not rely on dangerouslySetInnerHTML. react-markdown uses a syntax tree to build the virtual DOM which allows for updating only the changing DOM instead of completely overwriting. react-markdown has plugins to support other syntax extensions like GFM too.

This library is made for beginners so that they can quickly jump in and render markdown in there react applications in an easier way.