Introduction To React AXIOS – Axios In React

Pre-Requisites

• React Fundamentals
• Components
• useState
• useEffect
• Arrow Functions
• Destructuring
• Promise
• Async & Await
• Fetch API

React Axios

• In React JS, Axios is a library that serves to create HTTP requests (API) that are present externally.
• In React JS, It is evident from the fact that we may sometimes in React applications need to get data from the external source.
• In React JS, It is quite difficult to fetch such data so that they can be normally shown on the website.
• In React JS, Axios is a HTTP client library that allows you to make requests to a given endpoint.
• In React JS, Many projects on the web need to interface with a REST API at some stage in their development.
• In React JS, Axios is a lightweight HTTP client based on the $http service within Angular js version 1 and is similar to the native JavaScript Fetch API.
• In React JS, Axios is promise-based, which gives you the ability to take advantage of JavaScript’s async and await for more readable asynchronous code.
• In React JS, You can also intercept and cancel requests, and there’s built-in client-side protection against cross-site request forgery (attacks).
• Additionally, react Axios is very easy to modify and is quite lightweight.
• In React JS, AXIOS also works great with many other frameworks present today.
• In React JS, The main purpose of using Axios is to get support for request and response interception, conversion of data into JSON format, and transform it.
• AXIOS also helps you in protecting XSRF forgery by default while you request cross-site access.

Why Use Axios in React ?

Notice that, there are a number of different libraries you can use to make these requests, so why choose Axios?

Here are most important five reasons why you should use Axios as your client to make HTTP requests:

1. AXIOS has good defaults to work with JSON data. Unlike alternatives such as the Fetch API, you often don’t need to set your headers. Or perform tedious tasks like converting your request body to a JSON string.
2. React Axios has function names that match any HTTP methods. To perform a GET request, you use the .get() method.
3. React Axios does more with less code. Unlike the Fetch API, you only need one .then() callback to access your requested JSON data.
4. React Axios has better error handling. Axios throws 400 and 500 range errors for you. Unlike the Fetch API, where you have to check the status code and throw the error yourself.
5. React Axios can be used on the server as well as the client. If you are writing a Node.js application, be aware that Axios can also be used in an environment separate from the browser.

How to Install & Setup Axios with React

Using Axios with React is a very simple process. You just need three things:

1. An existing or new React application
2. To install Axios with npm/yarn
3. An API URL for making requests

If you have an existing React project, you just need to install Axios with npm (or any other package manager):

npm install axios

API

We will use the JSON Placeholder API to get and change post data.

http://jsonplaceholder.typicode.com/posts

Using AXIOS, Here is a list of all the different routes you can make requests to, along with the appropriate HTTP method for each.

How to Make a GET Request In AXIOS

• By using Axios you can fetch data or retrieve it, make a GET request.
• In React Axios, first, you’re going to make a request for individual posts. If you look at the endpoint, you are getting the first post from the /posts API

API

https://jsonplaceholder.typicode.com/posts/1
https://jsonplaceholder.typicode.com/posts

Source Code

GetAxios.js File Code

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

const baseURL = 'https://jsonplaceholder.typicode.com/posts';

function GetAxios() {

    const [my_data, setData] = useState([]);

    useEffect(() => {
        Axios.get(baseURL).then((response) => {
            setData(response.data);
        })
    },[]);

  return (
    <>
    {
      my_data.map((item) => {
        const {id, title, body} = item;
        return (
          <div className='data' key={id}>
          <h1>{id}</h1>
          <h2>{title.slice(0,10)}</h2>
          <h3>{body.slice(0,50).toUpperCase()}</h3>
          </div>
        )
      })
    }
        {/* <h1>{my_data.id}</h1>
        <h2>{my_data.title}</h2>
        <h3>{my_data.body}</h3> */}
    </>
  )
}

export default GetAxios

App.js File Code

import logo from './logo.svg';
import './App.css';
import GetAxios from './GetAxios';

function App() {
  return (
    <div className="App">
      <GetAxios/>
    </div>
  );
}

export default App;

App.css File Code

.App {
  text-align: center;
}

.App-logo {
  height: 40vmin;
  pointer-events: none;
}

@media (prefers-reduced-motion: no-preference) {
  .App-logo {
    animation: App-logo-spin infinite 20s linear;
  }
}

.data
{
  border:3px red ridge;
  width:500px;
  background-color: aqua;
}

.App-header {
  background-color: #282c34;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  font-size: calc(10px + 2vmin);
  color: white;
}

.App-link {
  color: #61dafb;
}

@keyframes App-logo-spin {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

Package.json File Code

{
  "name": "axios-app",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "@testing-library/jest-dom": "^5.16.5",
    "@testing-library/react": "^13.4.0",
    "@testing-library/user-event": "^13.5.0",
    "axios": "^1.2.1",
    "react": "^18.2.0",
    "react-dom": "^18.2.0",
    "react-scripts": "5.0.1",
    "web-vitals": "^2.1.4"
  },
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
  },
  "eslintConfig": {
    "extends": [
      "react-app",
      "react-app/jest"
    ]
  },
  "browserslist": {
    "production": [
      ">0.2%",
      "not dead",
      "not op_mini all"
    ],
    "development": [
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version"
    ]
  }
}

Download Notes Of This Blog From the link given below

https://www.mediafire.com/file/79ou6stay891urh/AXIOS+React+JS+1.rar/file