DEV Community

Cover image for Top 5 Useful Packages That Every React Developer Should Know
Zahab Kakar
Zahab Kakar

Posted on • Edited on • Originally published at zahab.tech

Top 5 Useful Packages That Every React Developer Should Know

React JS is a popular JavaScript framework for building front-end applications, such as user interfaces that let people interact with software. When it comes to developing modern React apps, choosing the right library might be difficult. Therefore in this article, I have compiled the best and useful packages that you need as a React developer.

Axios

Axios makes it simple for us to communicate with APIs in our React projects. Though alternative techniques like Fetch or AJAX may do this, Axios can give extra functionality that goes a long way with React-based apps.

screely-1631452143004.png

Installation

  • Using NPM
npm install axios 
Enter fullscreen mode Exit fullscreen mode
  • Using Yarn
yarn add axios 
Enter fullscreen mode Exit fullscreen mode

Usage

import axios from 'axios'

// Make a request for a user with a given ID
axios.get('/user?ID=12345')
  .then(function (response) {
    // handle success
    console.log(response);
  })
  .catch(function (error) {
    // handle error
    console.log(error);
  })
  .then(function () {
    // always executed
  });
Enter fullscreen mode Exit fullscreen mode

Redux

Redux is a JavaScript library that allows you to manage and centralize your application's state. For creating user interfaces, it is most often used alongside frameworks like React or Angular.

screely-1631458318478.png

Installation

  • Using NPM
npm install redux 
Enter fullscreen mode Exit fullscreen mode
  • Using Yarn
yarn add redux 
Enter fullscreen mode Exit fullscreen mode

Usage

import { createStore } from 'redux'


function counterReducer(state = { value: 0 }, action) {
  switch (action.type) {
    case 'counter/incremented':
      return { value: state.value + 1 }
    case 'counter/decremented':
      return { value: state.value - 1 }
    default:
      return state
  }
}

// Create a Redux store holding the state of your app.
// Its API is { subscribe, dispatch, getState }.
let store = createStore(counterReducer)

// You can use subscribe() to update the UI in response to state changes.

store.subscribe(() => console.log(store.getState()))

// The only way to mutate the internal state is to dispatch an action.
// The actions can be serialized, logged or stored and later replayed.
store.dispatch({ type: 'counter/incremented' })
// {value: 1}
store.dispatch({ type: 'counter/incremented' })
// {value: 2}
store.dispatch({ type: 'counter/decremented' })
// {value: 1}
Enter fullscreen mode Exit fullscreen mode

Formik

Formik is a small group of React components and hooks for building forms. It helps with the three most annoying parts: Getting values in and out of form state. Validation and error messages.

screely-1631458935812.png

Installation

  • Using NPM
 npm install formik --save
Enter fullscreen mode Exit fullscreen mode
  • Using Yarn
yarn add formik
Enter fullscreen mode Exit fullscreen mode

Usage

 import React from 'react';
 import { useFormik } from 'formik';

 const SignupForm = () => {
   // Pass the useFormik() hook initial form values and a submit function that will
   // be called when the form is submitted
   const formik = useFormik({
     initialValues: {
       email: '',
     },
     onSubmit: values => {
       alert(JSON.stringify(values, null, 2));
     },
   });
   return (
     <form onSubmit={formik.handleSubmit}>
       <label htmlFor="email">Email Address</label>
       <input
         id="email"
         name="email"
         type="email"
         onChange={formik.handleChange}
         value={formik.values.email}
       />

       <button type="submit">Submit</button>
     </form>
   );
 };

Enter fullscreen mode Exit fullscreen mode

Styled Components

Styled Components is a CSS tool that makes your React project run more smoothly. This package enables you to construct reusable, tiny components that are crucial to your application's design.

screely-1631461170313.png

Installation

  • Using NPM
npm install --save styled-components
Enter fullscreen mode Exit fullscreen mode
  • Using Yarn
yarn add styled-components
Enter fullscreen mode Exit fullscreen mode

Usage

import styled from "styled-components";

// Styled component named Button
const Button = styled.button`
  background-color: black;
  font-size: 18px;
  color: white;
`;

function MyComponent() {
  return <Button> Sign up </Button>;
}
Enter fullscreen mode Exit fullscreen mode

Chakra UI

Chakra UI is a React component toolkit that seeks to help developers spend less time writing code and more time focusing on providing a great user experience. It provides you with the flexible, accessible, and easy user interface components you'll need to create apps.

screely-1631462322337.png

Installation

-Using NPM

npm i @chakra-ui/react @emotion/react@^11 @emotion/styled@^11 framer-motion@^4
Enter fullscreen mode Exit fullscreen mode

-Using Yarn

yarn add @chakra-ui/react @emotion/react@^11 @emotion/styled@^11 framer-motion@^4
Enter fullscreen mode Exit fullscreen mode

Usage

import React from "react";
import { Button, ButtonGroup } from "@chakra-ui/react";
// Button: The button component with support for custom icons, spinners, etc.
// ButtonGroup: Used to group buttons whose actions are related, with an option to flush them together.

export default function MyComponent() {
  return (
    <div>
      <Button colorScheme="blue">Button</Button>
    </div>
  );
}
Enter fullscreen mode Exit fullscreen mode

Thanks for reading!

Let's connect on Twitter

Top comments (6)

Collapse
 
naiche_young profile image
Naiche Young

Very useful, thanks!

Collapse
 
zahab profile image
Zahab Kakar

Glad you liked it, Naiche

Collapse
 
pauldunz profile image
Paul Dunz

I like the one called AxiosπŸ‘ŒπŸΌ

Collapse
 
zahab profile image
Zahab Kakar

Same here!!

Collapse
 
jorgerepossi profile image
Jorge Repossi

ChakraUi is the Best!

Collapse
 
zahab profile image
Zahab Kakar

πŸ‘