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:-