Hello guys, Welcome back to the API integration on React App. We will use the fetch function for calling to an API. I hope you guys are already familiar with creating React Apps. We will use a public API to fetch data to our React application. First of all, let me show the basic React structure that I follow for creating React App.
What Is An API?
An API stands for Application Programming Interface. It helps us to get data from the server and vice-versa. For example:- It's like a waiter who takes your order and relays the order to the kitchen and brings your food. Here waiter's role is the same as API's.
What is API Integration?
API Integration is the connection between the Current Application connect with the API and bring data and send data to the API's endpoint. In the easy term, it's communication between our application and the API.
How to test APIs?
Well, before going to integrate Api's we always test the Api's whether all the responses are working correctly or not. After that, we start integrating that into our application.
Software used to test API.
Postman - Postman is the most popular and open source rest API testing software which helps developers to test their APIs easily. Postman has many customizations (environments) which are like the developers.
Insomnia - Same as Postman. Insomnia is also liked by many developers.
REST Client - It's a Visual Studio plugin that also helps developers to test the API without installing any software. And the response is shown in the same Visual Studio Software. And many softwares are available on the internet.
You can install any of the above software or you can also install your preferred software which helps you to test API. It is not required, but it makes our development work easy.
First Step for Integrating API in React Application
Create a directory on the root of the Application as in the below image because we will call an API in a separate file.
We will use public http://jsamplesholder.tpicode.com/users for API integration in React.
Now we will create a file inside the appConnection folder and write fetch function inside it, which will help to call API. And will fetch the response from the API
Now we will create a file in which we will fetch the data of API, and we will show that data in the file.
import React, { useEffect, useState } from 'react'
import { GetAllUsers } from '../../apiConnection/Users'
export default function UserData() {
const [dataFromAPI, SetDataFromAPI] = useState([])
useEffect(() => {
GetAllUsers(getUserCallback)
}, [])
const getUserCallback=(response)=>{
if(response.status === 200){
response.json().then(data => {
console.log('getting response from api', data)
SetDataFromAPI(data)
})
}
}
return (
<>
<h1 className="my-4">Get User Data from API</h1>
{dataFromAPI.map((item)=>
<div className="d-flex" key={item.id}>
<p className="mr-3">{item.name}</p>
<p className="mr-3">{item.email}</p>
<p className="mr-3">{item.phone}</p>
<p className="mr-3">{item.website}</p>
</div>
)}
</>
)
}
In the above code, we have used useEffect first so that when our component is rendered, it will run. And inside useEffect we have called the function which was created in the apiConnection folder's file.
In the callback, we have called response which will give us the status of the response. After that, we checked the status of the response, if the status was true then we have set the response to a state.
After that, the data that was set in the state, we ran through the loop using map function so that all the data of API became visible to us on our page.
It was basic API understanding, I will try to explain it further in my next blog. In which you will learn about POST, PUT, DELETE, methods and you will also know how you can send extra data with the header to API.
