React Js Get Data with Fetch API and REST API Tutorial

This blog will help you learn how to use Fetch API in React application, how to get the data and display the data using the REST API in React with React hooks and fetch method.

The fetch() program in JavaScript is used to make a profound and quick request to the server and retrieve the data in the web applications. The fetch method invokes requests using the APIs, which returns the information in JSON or XML format through a promise mechanism.

We will show you how to use the react stateless component to retrieve the data in React.

You will also learn how to use the fetch API with React hooks in functional component from scratch. Retrieving the dynamic data in React is easy, and it doesn’t just limit to fetch(). Instead, you may go for Axios HTTP client as well.

How to Retrieve Data Dynamically with Fetch API in React Js

Here are the bit-by-bit steps that are going to teach you how to use the react image size package in react.

  • Step 1: Install React App
  • Step 2: Create User Component
  • Step 3: Use Fetch API
  • Step 4: Update Component in App Js
  • Step 5: Start Application

Install React App

Begin our short journey with installing a brand new React app, jump on to subsequent step if this process has been done.

npx create-react-app demo

Then, move into to the project directory.

cd demo

Create User Component

There are two types of components in React, class components and functional components. We can use fetch API in both types of components.

Let us create a functional component, in order to do that you have to create components/UsersData.js file and add the given code into the file.

import React from 'react'

export default function UsersData() {
    return (
        <div>
            
        </div>
    )
}

Use Fetch API

We will use the free REST API JSON placeholder with fetch() method to get and display data in the React app.

Here we are using the React hooks, especially useState, to set the initial state of the stateless component.

Also, to mount the component, we are using React’s useEffect hook.

Add code in components/UsersData.js file.

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

export default function UsersData() {
  const [Users, fetchUsers] = useState([])

  const getData = () => {
    fetch('https://jsonplaceholder.typicode.com/users')
      .then((res) => res.json())
      .then((res) => {
        console.log(res)
        fetchUsers(res)
      })
  }

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

  return (
    <>
      <h2>React Fetch API Example</h2>
      <ul>
        {Users.map((item, i) => {
          return <li key={i}>{item.name}</li>
        })}
      </ul>
    </>
  )
}

Update Component in App Js

Open the App.js file and copy the given code and paste it into the main component file.

import React from 'react'

import UsersData from './components/UsersData'

export default function App() {
  return (
    <div>
      <UsersData />
    </div>
  )
}

Start Application

Let us type the given command on the command prompt and hit enter to invoke the react application.

npm start

React Js Get Data with Fetch API and REST API Tutorial

Summary

In this React fetch data from Api example, we learned how to properly use the JavaScrit fetch method and render the data in React component. Additionally, we also learned how to use useState and useEffect hooks in functional components to get the data in React.