Top 5 Useful Packages That Every React Developer Should Know

npm install axios 

yarn add axios 

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

npm install redux 

yarn add redux 

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}

 npm install formik --save

yarn add formik

 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>   ); };

npm install --save styled-components

yarn add styled-components

import styled from "styled-components";// Styled component named Buttonconst Button = styled.button`  background-color: black;  font-size: 18px;  color: white;`;function MyComponent() {  return <Button> Sign up </Button>;}

npm i @chakra-ui/react @emotion/react@^11 @emotion/styled@^11 framer-motion@^4

yarn add @chakra-ui/react @emotion/react@^11 @emotion/styled@^11 framer-motion@^4

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>  );}