React Axios Send Asynchronous HTTP GET Request Example

React is a popular JavaScript library for building user interfaces. When building web applications with React, it is common to need to retrieve data from a server. Axios is a popular HTTP client library that can be used with React to make asynchronous HTTP requests. In this tutorial, you will learn how to use Axios to send asynchronous HTTP GET requests in a React application.

This tutorial will make the API calls for axios get request in react js app. And display the users list on your react js app. And as well as, this tutorial will guide you from scratch on how to make axios get request in react js app.

How to Make Axios Get Request in React JS App

Just follow the following steps and make axios get request in react js app:

• Step 1 – Create React App
• Step 2 – Install Axios
• Step 3 – Set up Bootstrap 4
• Step 4 – Create GET Request Component
• Step 5 – Add Component in App.js

Step 1 – Create React App

In this step, open your terminal and execute the following command on your terminal to create a new react app:

npx create-react-app react-axios-tutorial

To run the React app, execute the following command on your terminal:

npm start

Check out your React app on this URL: localhost:3000

Step 2 – Install Axios

Axios is a promise-based HTTP client that can be used in both the browser and Node.js. It provides an easy-to-use API to make HTTP requests and supports a wide range of options, including request and response interceptors, automatic transformation of JSON data, and error handling. To use Axios in a React application, you need to install it first.

You can install Axios using npm:

npm install axios

Step 3 – Set up Bootstrap 4

In this step, execute the following command to install boostrap 4 library into your react app:

npm install bootstrap --save

Add bootstrap.min.css file in src/App.js file:

import React from 'react';
import '../node_modules/bootstrap/dist/css/bootstrap.min.css';

function App() {
  return (
    <div>
      <h2>React Axios Get Request Example</h2>
    </div>
  );
}

export default App;

Step 4 – Create GET Request Component

In this step, /src/ directory and create a component, which name UsersList.js. Then add the following code into it:

import React from 'react'
import axios from 'axios';

class UsersList extends React.Component{

    constructor(){
        state = {
            users: []
         }
    }

      componentDidMount() {
        axios.get(`https://jsonplaceholder.typicode.com/users`)
          .then(res => {
            const users = res.data;
            this.setState({ users });
          })
      } 

    render(){
        return(
            <div>
                <div class="row">
                    <div class="col-md-6 offset-md-3">
                        <br /><br />
                        <h3>Users List</h3><br />
                        <table class="table table-bordered">
                            <tr>
                                <th>No</th>
                                <th>Name</th>
                                <th>Email</th>
                                <th>City</th>
                            </tr>
                        {
                            this.state.users ?
                                
                                    this.state.users.map((user,i)=>
                                        <tr>
                                            <td>{++i}</td>
                                            <td>{user.name}</td>
                                            <td>{user.email}</td>
                                            <td>{user.address.city}</td>
                                        </tr>
                                    )
                            :
                            null
                        }
                        </table>
                    </div>
                </div>
            </div>
        )  
    }
}

export default UsersList;

Step 5 – Add Component in App.js

In this step, you need to add usersList.js file in src/App.js file:

import React from 'react';
import '../node_modules/bootstrap/dist/css/bootstrap.min.css';
import './App.css';
import UsersList from './UsersList';

function App() {
  return (
    <div>
      
        <UsersList />

    </div>
  );
}

export default App;

Conclusion

Sending asynchronous HTTP requests is a common requirement in modern web development. Axios is a powerful library that simplifies the process of making HTTP requests in a React application. In this tutorial, you have learned how to use Axios to send an HTTP GET request and handle the response data. With this knowledge, you can now start building dynamic, real-time web applications with React and Axios.

Recommended Posts