How To Integrate API Using React

Hello, fellow developers in this blog we are going to talk about what API integration is and how one integrate there API using React JS. There are two methods to integrate  your API with react one is FETCH and second is AXIOS. In this blog we are going to talk about AXIOS.

But First of all what is an API??

API is the Stands for Application Programming Interface, which is a software intermediary that allows two application to talk to each other. Each time you use an app like Facebook, Instagram send an instant message, or check the weather on your phone, you’re using an API.

An application programming interface  is an messenger that process requests and ensures seamless functioning of enterprise systems. API-Integration enables interaction between data, applications, and devices.

First of all create a react app using following command

npx create-react-app my-app

Now for using Axios install Axios to your react application using following command:-

npm install axios

There are different methods for an  API call they are:-

GET,

POST,

DELTE,

PUT,

PATCH,

and many more it changes from api to api.

For this example we are gonna use jsonplaceholder api  with get method.

jsonplaceholder link:-  https://jsonplaceholder.typicode.com/

Now go to your app.js  and import axios and make a api call using it here is a small example :-

import './App.css';
import axios from 'axios';
import { useState } from 'react';
function App() {
  const [array, setArray] = useState([])
  axios.get("https://jsonplaceholder.typicode.com/posts").then((res) => {
    setArray(res.data)
  }
  )
  return (
    <div className='App'>
      {array.map((e)=>{
        return (
          <div key={e.id}>
            <p>{e.id}</p>
            <p>{e.title}</p>
            <p>{e.body}</p>
            </div>
        )
      })}
    </div>
  );
}

export default App;

Output:-