How to integrate API in ReactJS

Whether it is a web or mobile application, it becomes crucial that applications connect to external resources to send and retrieve data. For that, the applications need robust tools to exchange data. This is where APIs come in.

Applications use APIs to interact with external sources and exchange data. As a result, they improve their performance, reduce mundane tasks, avoid data silos, and many more.

In the same way, we can use APIs in ReactJS to connect to external applications and perform the needed tasks. ReactJS is the software with which we can build user interfaces quickly. We use APIs in ReactJS to fetch data, send data to other applications, and so on. Mainly, we can use APIs such as fetch API and Axios to fetch data from data sources.

ReactJS is a tool widely used by developers to create user interfaces in applications. Companies like Walmart, Uber, Atlassian, Salesforce, etc., particularly embrace ReactJS to develop their applications. So, if you groom your skills on ReactJS, getting placed in big mobile and web development companies is not a big deal.

In this blog, we will guide you through how to integrate API in ReactJS and use it to interact with other applications. This quick guide will help you use APIs to send and retrieve data effectively.

Let’s walk through!

Table of Contents

• What is an API
• What is ReactJS
• Prerequisites for the integration
• How to integrate API in ReactJS
• Integrating the REST API in ReactJS
• FAQ

What is an API?

Let’s look at API and why it's so popular now.

We use APIs to communicate between different applications. This communication is usually done as requests and responses. An API typically works based on the client and server model.We can speed up application development with the help of APIs. That’s because we can eliminate the need to write codes for certain features of an application. So, we can quickly deliver applications to clients with multiple features with enhanced performance.

If you want to enrich your career and become a professional in ReactJS, then enroll in "React JS Training and Certification Course". This course will help you to achieve excellence in this domain.

What is ReactJS?

Let’s glance at what ReactJS is and its key features here.

ReactJS is essentially an open-source JavaScript library. We employ ReactJS to create user interfaces for web applications. It is a popular tool that allows the seamless building of robust web and mobile applications. ReactJS is a great tool that better deals with state and state changes.

ReactJS allows developers to break complex user interfaces into many separate pieces. This strategy helps them speed up building intuitive user interfaces. As a result, they can create dynamic applications, increasing web development efficiency. Okay! We hope that you have acquired some basic understanding of APIs and ReactJS. Next, we will move on to get to know the prerequisites for the integration of APIs in ReactJS.

Prerequisites for the integration

Before stepping into the procedure for the integration of APIs in ReactJS, it is essential that we meet the requirements for the integration accurately.

Let’s take a look at the requirements right away:

• Basic understanding of CSS, HTML, and JavaScript
• Knowledge of command-line tools
• Good exposure to APIs and their different types
• Installation of NodeJS software

If you satisfy the above requirements, you can easily sail through the following procedure for integrating APIs in ReactJS.

How to integrate API in ReactJS?

ReactJS is essentially a dynamic tool. So, we can use APIs in ReactJS to fetch data and display it in applications. When it comes to data fetching, we use two APIs in ReactJS. They are the JavaScript fetch API and the Axios library API.

Let’s go through the hassle-free step-by-step procedure to integrate APIs in ReactJS using the Fetch API and Axios in the following.

1. Fetching data in ReactJS using JavaScript-fetch-API

JavaScript-fetch-API is nothing but a new standard and an inbuilt native API. Moreover, the fetch API is a promise-based API with which we can easily make HTTPS requests in JavaScript. This API helps fetch data from a server.

We use React hooks in ReactJS as functional components. The react hooks are useState HookHook as well as useEffect HookHook. Regarding the useState HookHook, we must define the state where data must be stored. The important thing is that we define that before requesting data. Next, we will go over the simple step-by-step procedure to learn how to use the fetch-API to fetch data in ReactJS.

Step 1: Create a ReactJS application

First, you must create a ReactJS application. To do so, you can use the following scaffolding script. You create a new React project in the fetch-app folder by running this command.

npx create-react-app demo

Step 2: Change your project directory

Next, you need to change the project directory. The following code can be used for the same.

cd demo

Step 3: Access the API endpoints

You must access and store the API endpoints in a constant variable. Storing the endpoints this way supports accessing the endpoints at any time.

const url = "https://jsonplaceholder.typicode.com/users";

Step 4: Importing the useState ( ) hook function

You need to use the below command to import the usestate ( ) hook function and use it to hold data.

import React, { useState } from 'react';
const [data, setData] = useState([])

Step 5: Create a fetchinfo ( ) callback function

In this step, you must use the fetchinfo ( ) callback function to fetch and store data. Also, you must apply the useEffect ( ) hook function to make it run whenever the page loads. You can use the fetch ( ) method to get the data from the API.

Step 6: Displaying the output

In the end, the fetched data is displayed in the ReactJS application as output. It is done successfully by the integration of the Fetch API.

const fetchInfo = () => {
return fetch (url)
.then((res) => res.json())
.then((d) => setData (d))
}
useEffect (() => {
}, [])
fetchInfo();

Congrats! You have learned to integrate APIs and fetch data in ReactJS using Axios.

2. Fetching data in ReactJS using the Axios library

Know that the Axios library is an online HTTPS library with which we can request HTTP to a server. The main thing is that Axios works with ReactJS seamlessly. It uses the HTTP module on the server side and XMLhttps requests on the browser side.

With Axios, we can send asynchronous HTTP requests to REST endpoints. The endpoint is the JSONPlaceholder Posts API. We can make GET, DELETE, and POST requests to this endpoint and handle responses effectively. Besides, we can perform CRUD operations such as create, update, read, and delete by using Axios.

Next, we will jump into the easy step-by-step procedure to integrate the Axios library with ReactJS and fetch data.

Let’s get started!

Step 1: Installing Axios

First, you need to install Axios using the below command.

npm install axios

You can install the Axios library in two ways, such as using Yarn and NPM. You can use the below commands to do so.

npm install axios
yarn add axios

Step 2: Importing Axios

Next, you need to install the Axios library in the App.js file. Also, you can use the usestate ( ) hook function to hold the data in a variable.

import React, { useState, useEffect } from 'react';
import axios from 'axios';
function App() {
const [posts, setposts]
= useState([]);
useEffect(() => {
axios.get('https://jsonplaceholder.typicode.com/posts')
.then(response => {
setPosts (response.data);
.catch(error => {
})
console.error(error);
});
}, []);
return (
<ul>
{posts.map(post => (
<li key={post.id}>{post.title}</li>
))}
</ul>
);
}
export default App;

Step 3: Creating a ReactJS application

Now, you can use the following command to create a ReactJS application. Then, you create the application in your desired directory and name it as you wish.

npx create-react-app demo

Step 4: Changing the project directory

Once the project is created, you can change the project directory.

cd demo

Step 5: Accessing the API Endpoints

Now, you can access the API endpoints and store them in a constant variable. It allows you to use the endpoints at any time.

const url="https://jsonplaceholder.typicode.com/users";

Step 6: Fetching and Storing data

In this step, you create a FetchInfo ( ) function to fetch and store data. You will create a callback function to store users' data. Then, you use the useeffect ( ) hook function to make it run every time the page loads.

Step 9: Displaying data

Finally, you can display the data fetched using the Axios library.

Cheers! You have learned about integrating APIs and fetching data in ReactJS using Axios.

Integrating REST API in ReactJS

Know that we can exchange data by integrating REST APIs. For example, we use the REST API to fetch data from a server. The REST API supports many methods that we can use to receive, modify, and delete data.

Following is the outline of the methods and their use.

• GET: This method helps to fetch data from a server.
• DELETE: This method helps to delete data on a server.
• POST: This method helps to post data to a server.
• PUT: This method helps to update data on a server.

1. Making a GET request in ReactJS with Axios

You can use GET requests to specify data, such as headers and URLs. First, you must create an instance using the .create method. You can use the below code to create the instance.

import axios from "axios";
const client = axios.create({
});
baseURL: "https://jsonplaceholder.typicode.com/posts"

You can use the instance to perform the GET request. You must set parameters first and get the response in JSON format. It is done by default. You should use the GET method with the instance and then make the request.

useEffect (() => {
client.get('?_limit=10').then((response) => {
setPosts (response.data);
});
}, []);

2. Making a POST request in ReactJS with Axios

You can apply the POST method to send data to endpoints. In this method, you must hold the data to be sent.

const deletePost = (id) => {
client.delete(^`${id}`);
setPosts (
posts.filter((post) => {
return post.id !== id;
};
);
})

3. Making a DELETE request in ReactJS with Axios:

You can apply the delete method to delete requests. The method gets the identity and deletes the request from the API. Besides, you use the filter method to remove requests from the API.

const deletePost = async (id) => {
await
fetch(https://jsonplaceholder.typicode.com/posts/${id}`, {
method: 'DELETE',
}).then((response) => {
if (response.status === 200) {
setPosts (
);
posts.filter((post) => {
return post.id !== id;
})
} else {
return;
}
});
};

Kudos! You have learned to use REST APIs in ReactJS successfully.

FAQs

1. What is the use of events in reactJS?

It is an act performed by a system or user. The action can be making a mouse click, pressing a key, etc.

2. Name the two components of ReactJS.

Components are the building blocks of a reactJS application. There are two types of components: functional and class components.

3. Which one is the popular API?

The REST API is the popular API. It works excellently between different applications and resources.

4. Differentiate between reactJS and react native. 

ReactJS is a web platform, whereas react native is a mobile platform. Unlike ReactJS Native, React supports HTML and CSS platforms.

5. What do you mean by state in ReactJS?

The state is nothing but an in-built object where you can store data. A state is a variable that can change at any time.

6. List some merits of REST API.

Below are a few merits of REST API.

• HTTP protocol simplifies REST implementation
• The communication between client and server is typically stateless in the REST API
• REST is easy to learn
• REST API comes with a lightweight architecture.

Conclusion

It’s a wrap! We hope this quick guide has helped you learn how to integrate APIs in ReactJS. In this tutorial, you have learned to use fetch API and Axios to fetch data in reactJS. Additionally, you have gone through the procedure to use REST APIs in ReactJS to send and receive data.

Do you know that 91 percent of hiring managers report that they value certifications when hiring candidates?

Well! If you want to explore more about ReactJS and APIs, embark on your learning journey with MindMajix. So you can check out courses in API and ReactJS and achieve certification. It will help you polish your skills and make a magnificent career.