React Axios Make HTTP GET Requests Example

React axios get request example. In this tutorial, i will show you step by step guide on how to make HTTP GET request in react app using axios.

If you are working in React App and you have to fetch data from API in React App. So for that you can use axios get request.

A GET request can be made with Axios to “get” data from a server. The HTTP get request is performed by calling axios.get(). The get() method requires two parameters to be supplied to it. First, it needs the URI of the service endpoint. Second, it should be passed an object that contains the properties we want to send to our server.

Axios HTTP GET request in react app example, I will create a simple list as well as fetch the data using axios http get request and display it in the list.

React + Axios – HTTP GET Request Examples

• Step 1 – Create React App
• Step 2 – Install Bootstrap 4
• Step 3 – Create Axios GET Request Component
• Step 4 – Include Component in App.js

Step 1 – Create React App

Open your terminal and execute the following command on your terminal to create a new react app:

npx create-react-app demo-react

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 Bootstrap 4

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 3 – Create Axios GET Request Component

Visit /src/ directory of install react app 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 4 – Include Component in App.js

Include component in app.js file, So, you need to visit src/App.js file and add userList.js component in it:

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

How to make axios get http request in React js app, you have learned how to use axios get http request in react js app. And display users list in your react js app.

Recommended React Tutorials