20 Essential Libraries To Know if You Work with React

React has become the go-to library for building user interfaces, thanks to its flexibility, simplicity, and massive ecosystem of libraries. However, if you want to get the most out of React and enhance your development speed, there are several essential libraries you should integrate into your workflow. Whether you're focusing on state management, routing, or form validation, these libraries will make your life as a React developer much easier.

In this article, we’ll cover 20 key libraries that can supercharge your React applications, complete with code samples and examples.

1. React Router

Navigating between different pages in a React app is seamless with React Router. It allows you to build single-page applications with dynamic routing.

npm install react-router-dom

Example:

import { BrowserRouter as Router, Route, Switch } from 'react-router-dom';

function App() {
  return (
    <Router>
      <Switch>
        <Route path="/" exact component={Home} />
        <Route path="/about" component={About} />
      </Switch>
    </Router>
  );
}

2. Axios

For making HTTP requests, Axios provides an easy-to-use API and supports features like interceptors, request cancelation, and transforming request/response data.

npm install axios

Example:

import axios from 'axios';
import { useEffect, useState } from 'react';

function FetchData() {
  const [data, setData] = useState([]);

  useEffect(() => {
    axios.get('https://api.example.com/data').then(response => {
      setData(response.data);
    });
  }, []);

  return <div>{data.map(item => <p key={item.id}>{item.name}</p>)}</div>;
}

3. React Hook Form

Forms can get complicated, but React Hook Form simplifies form handling in React. It integrates with native HTML forms, providing better performance and reduced re-renders.

npm install react-hook-form

Example:

import { useForm } from 'react-hook-form';

function MyForm() {
  const { register, handleSubmit } = useForm();

  const onSubmit = data => console.log(data);

  return (
    <form onSubmit={handleSubmit(onSubmit)}>
      <input {...register("firstName")} placeholder="First Name" />
      <input {...register("lastName")} placeholder="Last Name" />
      <button type="submit">Submit</button>
    </form>
  );
}

4. Styled Components

If you love writing CSS but want to manage it within your React components, Styled Components lets you do just that. You can write actual CSS syntax while keeping styles scoped to components.

npm install styled-components

Example:

import styled from 'styled-components';

const Button = styled.button`
  background: palevioletred;
  color: white;
  font-size: 1em;
  padding: 0.25em 1em;
`;

function App() {
  return <Button>Click Me!</Button>;
}

5. React Query

For managing server-side data, React Query is an excellent choice. It simplifies data fetching, caching, and syncing without all the boilerplate.

npm install react-query

Example:

import { useQuery } from 'react-query';
import axios from 'axios';

function App() {
  const { data, error, isLoading } = useQuery('users', () =>
    axios.get('/api/users').then(res => res.data)
  );

  if (isLoading) return <p>Loading...</p>;
  if (error) return <p>Error loading data</p>;

  return (
    <div>
      {data.map(user => (
        <p key={user.id}>{user.name}</p>
      ))}
    </div>
  );
}

6. Recoil

Recoil is an experimental state management library for React that simplifies state management by leveraging React’s hooks.

npm install recoil

Example:

import { atom, useRecoilState } from 'recoil';

const textState = atom({
  key: 'textState',
  default: '',
});

function TextInput() {
  const [text, setText] = useRecoilState(textState);

  return (
    <input type="text" value={text} onChange={(e) => setText(e.target.value)} />
  );
}

7. Framer Motion

For animations, Framer Motion is an amazing library that provides powerful animations while keeping them declarative and easy to use.

npm install framer-motion

Example:

import { motion } from 'framer-motion';

function Box() {
  return (
    <motion.div
      animate={{ rotate: 360 }}
      transition={{ duration: 2 }}
      style={{ width: 100, height: 100, background: 'red' }}
    />
  );
}

8. Emotion

Like Styled Components, Emotion is a powerful library for styling components in React. It allows writing CSS with JavaScript without any additional setup.

npm install @emotion/react @emotion/styled

Example:

/** @jsxImportSource @emotion/react */
import { css } from '@emotion/react';

const style = css`
  background-color: lightblue;
  font-size: 24px;
`;

function App() {
  return <div css={style}>Hello, World!</div>;
}

9. React Bootstrap

React Bootstrap is a React wrapper for the Bootstrap framework, allowing you to use Bootstrap components without relying on jQuery.

npm install react-bootstrap bootstrap

Example:

import { Button } from 'react-bootstrap';
import 'bootstrap/dist/css/bootstrap.min.css';

function App() {
  return <Button variant="primary">Primary Button</Button>;
}

10. Formik

Another great form handling library is Formik, which simplifies forms in React by handling form state, validation, and submission.

npm install formik

Example:

import { Formik, Field, Form } from 'formik';

function MyForm() {
  return (
    <Formik
      initialValues={{ name: '' }}
      onSubmit={(values) => console.log(values)}
    >
      <Form>
        <Field name="name" placeholder="Enter your name" />
        <button type="submit">Submit</button>
      </Form>
    </Formik>
  );
}

SQL Enthusiasts, Don’t Miss Out

If you're also working with databases and need a handy reference for SQL, check out my SQL Cheatsheet on GitHub. This cheatsheet covers both basic and advanced SQL queries, perfect for leveling up your database skills. Fork, clone, and star the repo to keep it available as your go-to SQL reference.

I'll continue the list in a follow-up article to avoid overwhelming this one, but these 10 libraries are a great start for building more efficient and powerful React applications.

Be sure to experiment with these libraries, as each provides unique capabilities that can save you time and effort. Keep coding, and happy React-ing!

Blog

20 Essential Libraries To Know if You Work with React

Olaniyi Olabode

1. React Router

2. Axios

3. React Hook Form

4. Styled Components

5. React Query

6. Recoil

7. Framer Motion

8. Emotion

9. React Bootstrap

10. Formik

SQL Enthusiasts, Don’t Miss Out

Join Our Newsletter. No Spam, Only the good stuff.

Related