How to call a REST API in React

In modern web development, integrating REST APIs into our React applications is a common requirement. REST APIs enable us to fetch data from a server, send data, and perform various operations. In this tutorial, we will explore how to call a REST API in a React application, step by step, with practical examples.


To follow along with this tutorial, you should have a basic understanding of React and JavaScript. You will also need a text editor and a working React development environment set up on your machine.

Step 1: Set Up a New React Project

If you already have a React project, you can skip this step. Otherwise, open your terminal and run the following command to create a new React project using Create React App:

npx create-react-app react-rest-api-call

Step 2: Create a Component to Make the API Call

Now, let’s create a new component where we will make the API call. Open the generated src folder in your project, create a new components folder, and inside the components folder create a new file called UserComponent.js. In this file, add the following code:

import React, { useEffect, useState } from 'react';
import './UserComponent.css';

const UserComponent = () => {
    const [data, setData] = useState(null);

    useEffect(() => {
    }, []);

    const fetchData = async () => {
        try {
            const USER_API = '';
            const response = await fetch(USER_API);
            const jsonData = await response.json();
        } catch (error) {
            console.log('Error:', error);

    return (
            {data ? (
                    { => (

                        <tr key={}>



            ) : (

export default UserComponent;


  • Here, we imported the necessary React hooks: useEffect and useState.
  • Inside the component, we define a state variable data using the useState hook. Initially, it’s set to null.
  • We use the useEffect hook to call the fetchData function when the component mounts.
  • In the fetchData function, we use the fetch function to make the API call to the specified endpoint.
  • If the API call is successful, we parse the response data using response.json() and update the data state with the received JSON data.
  • In the component’s return statement, we render a loading message if the data is null, and once the data is available, we render a list of items.

Add some CSS styling to the table:

table {
    font-family: arial, sans-serif;
    border-collapse: collapse;
    width: 50%;

td,th {
    border: 1px solid #dddddd;
    text-align: left;
    padding: 8px;

tr:nth-child(even) {
    background-color: #dddddd;

Step 3: Use the User Component in Your App

Open the src/App.js file in your project and modify it as follows:

import React from 'react';
import UserComponent from './components/UserComponent';

const App = () => {
  return (
      <h1>React- REST API Call Example</h1>
      <UserComponent />

export default App;


  • We import the UserComponent we created in the previous step.
  • Inside the App component, we render the UserComponent component, which will make the API call and display the data.

Step 4: Start the Development Server

To see the result, go back to your terminal and run the following command inside your project folder:

npm start

This command starts the development server, and you should be able to view your React application in your browser at http://localhost:3000. The page will display the title “React- REST API Call Example” and the data fetched from the API.

How to call a REST API in React: A Step-by-Step Guide with Examples

Similar Post: How to consume REST APIs in React using Axios


  1. React- Getting Started
  2. React- Introducing Hooks

Similar Posts

About the Author

Atul Rai
I love sharing my experiments and ideas with everyone by writing articles on the latest technological trends. Read all published posts by Atul Rai.