Top 5 Useful Packages That Every React Developer Should Know
Tags: react, javascript, programming, productivity
Published: 2021-09-12 16:43:23

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](https://cdn.hashnode.com/res/hashnode/image/upload/v1631452245161/nMXlVo3f4.png)
### Installation 
- Using NPM

```txt
npm install axios 
```
- Using Yarn

```txt
yarn add axios 
```
### Usage
```jsx
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
  });
```

## 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](https://cdn.hashnode.com/res/hashnode/image/upload/v1631458326292/gAN9Wmq2F.png)
### Installation

- Using NPM

```txt
npm install redux 
```
- Using Yarn

```txt
yarn add redux 
```
### Usage
```jsx
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}
```

### 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](https://cdn.hashnode.com/res/hashnode/image/upload/v1631458951252/875_F_zGK.png)

### Installation 
- Using NPM 

```text
 npm install formik --save
```

- Using Yarn

```text
yarn add formik
```
### Usage

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

```

## 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](https://cdn.hashnode.com/res/hashnode/image/upload/v1631461181785/BsLSRJQmE.png)

### Installation 
- Using NPM

```txt
npm install --save styled-components
```
- Using Yarn

```txt
yarn add styled-components
```

### Usage

```jsx
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>;
}
```


## 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](https://cdn.hashnode.com/res/hashnode/image/upload/v1631462543418/wfhUCfeAC.png)

### Installation 
-Using NPM

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

-Using Yarn

```text
yarn add @chakra-ui/react @emotion/react@^11 @emotion/styled@^11 framer-motion@^4
```
### Usage
```jsx
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>
  );
}
```
Thanks for reading!

Let's connect on [Twitter](https://twitter.com/KakarZahab)