How To Fetch Data From An API In React App

In This Blog, you are going to learn that how we can fetch data from an API in React App by using Fetch Function JavaScript. The Concept Of an API is very important and plays vital role in every web development scenario.

Objectives

• What is an API ?
• Examples of API.
• Fetch Method.
• Practical Example Of API using Fetch Method.

What Is An API ?

Example Of An API

Some Examples of APIs

Weather Snippets

Log-in Using XYZ

Pay with PayPal

What is an API ?

• API is the acronym for “application programming interface” a software intermediary that allows two applications to talk to each other.
• APIs are an accessible way to extract and share data within and across organizations.
• As per Wikipedia’s Definition of API: In computer programming, (API) is a set of subroutine definitions, protocols, and tools for building software and applications.

What is fetch function?

• The fetch() method in JavaScript is used to request data from a server.
• The request can be of any type of API that return the data in JSON or XML.
• The fetch() method requires one parameter, the URL to request, and returns a promise.

Another Way Of Using API In React JS

We can also use React AXIOS library for working with APIs.

Source Code

FetchAPI.js File Code

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

function FetchAPI() {
    const [posts, setPosts] = useState([]);
    useEffect(() => {
        fetch("http://jsonplaceholder.typicode.com/posts")
            .then((response) => {
                response.json().then((result) => {
                    setPosts(result);
                })
            })
    });
    return (
        <div>
            <ul>
                {
                    posts.map(pst => {
                        return (
                            <>
                                <li>{pst.id}</li>
                                <li>{pst.title}</li>
                            </>
                        )
                    })
                }
            </ul>
        </div>
    )
}

export default FetchAPI

App.js File Code

import logo from './logo.svg';
import './App.css';
import Component1 from './Component1';
import Component2 from './Component2';
import CSSstylesheet from './CSSstylesheet';
import Stylesheet1 from './Stylesheet1';
import CompA from './CompA';
import { createContext } from 'react';
import { useState } from 'react';
import ControlledForm from './ControlledForm';
import ControlledFunction from './ControlledFunction';
import CardsBS from './CardsBS';
import MyNavbar from './MyNavbar';
import MyCarousel from './MyCarousel';
import Reducers from './Reducers';
import FetchAPI from './FetchAPI';


function App() {
    return (
        <div>
         <FetchAPI/>
        </div>
    )
}

export default App

Download Notes Of This Blog From the link given below

https://www.mediafire.com/file/2l30md1b90dfua7/84+-+Fetch+API.pptx/file