Hello All, In the last topic we had discussed How to generate windows build using electron. Now, In this Ionic react tutorial, We will discuss How to call REST API in the Ionic 5 React application with example.
How to Create Ionic React Project?
Before creating a new project, Install the latest Ionic CLI using the following command
npm install -g ionic/cli
Now, Its time to create a new Ionic react project
ionic start ionicReact blank --type=react
Now, using ionic serve command we can able to run our new Ionic react application in the browser.
How to call a REST API In Ionic React application using Axios
Now, We need to add axios dependency before proceeding.
Install axios using the following command
npm install axios --save
import following things in HomePage.tsx
import {
IonContent, IonHeader, IonTitle,IonToolbar, IonItem, IonAvatar, IonImg, IonLabel, IonList, IonPage
} from '@ionic/react';
import React from 'react';
import { useState } from 'react';
import axios from 'axios';
Now, take a constant for listItems as follows
const [ listItems, setListItems ] = useState<any>([]);
It’s time to create a new function that communicates with the server.
const sendRequest = () => {
return axios
.get('https://dummyapi.io/data/v1/user',{
headers:{
'app-id':'<YOUR_APP_ID>',
'Content-Type' : 'application/json'
},
})
.then((response) => {
console.log(response);
return response.data;
})
};
Now, We will call sendRequest() function as follows
React.useEffect(() => {
sendRequest().then(data => {
setListItems(data.data)
});
}, []);
We got the response, Will show this data in list format as follows.
return (
<IonPage>
<IonHeader>
<IonToolbar color="primary">
<IonTitle> List </IonTitle>
</IonToolbar>
</IonHeader>
<IonContent>
<IonList color="primary">
{
listItems.map((item :any) => {
return (
<IonItem key={ item['id'] }>
<IonAvatar slot="start">
<IonImg src={ item['picture'] } </IonImg>
</IonAvatar>
<IonLabel>
<h3> { item['firstName'] } { item['lastName'] } </h3>
</IonLabel>
</IonItem>
);
})
}
</IonList>
</IonContent>
</IonPage>
);
Full Source Code :
import {
IonContent, IonHeader, IonTitle,IonToolbar, IonItem, IonAvatar, IonImg, IonLabel, IonList, IonPage
} from '@ionic/react';
import React from 'react';
import { useState } from 'react';
import axios from 'axios';
const HomePage: React.FC = () => {
const [ listItems, setListItems ] = useState<any>([]);
React.useEffect(() => {
sendRequest().then(data => {
setListItems(data.data)
});
}, []);
const sendRequest = () => {
return axios
.get('https://dummyapi.io/data/v1/user',{
headers:{
'app-id':'<YOUR_APP_ID>',
'Content-Type' : 'application/json'
},
})
.then((response) => {
console.log(response);
return response.data;
})
};
return (
<IonPage>
<IonHeader>
<IonToolbar color="primary">
<IonTitle> List </IonTitle>
</IonToolbar>
</IonHeader>
<IonContent>
<IonList color="primary">
{
listItems.map((item :any) => {
return (
<IonItem key={ item['id'] }>
<IonAvatar slot="start">
<IonImg src={ item['picture'] } </IonImg>
</IonAvatar>
<IonLabel>
<h3> { item['firstName'] } { item['lastName'] } </h3>
</IonLabel>
</IonItem>
);
})
}
</IonList>
</IonContent>
</IonPage>
);
}
export default HomePage;
This is how we can able to call the REST API in the Ionic React application.