What is Axios in React?

Axios is a JavaScript library used to send HTTP requests from the frontend to the backend and communicate with APIs.

We commonly use Axios to:

1. GET – Fetch data from an API.
2. POST – Send new data to an API.
3. PUT – Update existing data.
4. DELETE – Delete data from an API.
5. How to install Axios :

Open your VS Code terminal:

npm install axios

1. Axios GET example:

Let's fetch user data from an API.

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

function App() {

const [users, setUsers] = useState([]);

useEffect(() => {

    axios.get('https://jsonplaceholder.typicode.com/users')
        .then((response) => {
            setUsers(response.data);
        })
        .catch((error) => {
            console.log(error);
        });

}, []);

return (
    <div>
        <h1>User Details</h1>

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

}

export default App;

Explanation:

• useEffect() – Runs the API request after the component mounts.
• axios.get() – Fetches data from the API.
• then() – Handles successful responses.
• response.data – Contains the API response data.
• catch() – Handles errors.
• setUsers() – Stores the fetched data in state.

1. Four Axios methods:

Method Purpose
GET Read data
POST Create data
PUT Update data
DELETE Delete data