Tools - Do you know the best Packages and Libraries to use with React?

Last updated by Chloe Lin [SSW] 7 months ago.See history

The whole React ecosystem improves every month. Tons of additional tools, libraries and components are released to simplify the developer’s job and minimize the required effort. 

Starter kits

Developers still struggle on making a decision on how to setup their React project when joining the React community. There are thousands of boilerplate projects to choose from and every boilerplate project attempts to fulfil different needs. They vary in a range of minimalistic to almost bloated projects. Here are 4 great Starter kits for React developers.

  • Vite - A modern tool for quicker development and building, compatible with different front-end frameworks, including React
  • Create React App - A popular and easy way to start React projects with minimal setup
  • Next.js - A flexible React framework that's great for making websites. It helps pages load fast and is user-friendly for developers while also providing SEO capabilities
  • Gatsby - A powerful React framework for static websites and blogs with robust static site generation capabilities and SEO optimization

See more at Start a New React Project.

Utility Libraries for React

JavaScript ES6 and beyond gives you plenty of built-in functionalities dealing with arrays, objects, numbers, objects and strings. One of the most used JavaScript built-in functionalities in React is the built-in map() Array.

  • Lodash is the most widespread utility library in JavaScript. Lodash comes with a powerful set of functions to access, manipulate and compose
  • Ramda is also great utility library when leaning towards functional programming (FP) in JavaScript

Asynchronous Requests in React

  • native fetch API - Nowadays, recent browsers implement the fetch API to conduct asynchronous requests. It uses promises under the hood
  • axios - It can be used instead of the native fetch API when your application grows in size. Another alternative is called superagent

State Management Helpers

  • Reselect - Creates a selector where the first functions passed in compute props for a final function. If none of those props have changed, then that function is not run and the result from the previous invocation is returned. This keeps the state from needlessly causing components to re-render

Global Serverless Deployments

  • Vercel - Makes serverless application deployment easy

Testing

  • Jest - Testing suite that provides a click-and-check API for automated in-browser smoke tests
We open source. Powered by GitHub