Integrating Third-Party APIs with ReactJS: Fetching and Displaying Data

In modern web development, applications often need to fetch data from third-party APIs to display dynamic content. ReactJS, with its component-based architecture and declarative style, makes it easy to integrate and display data from external APIs. In this article, we will walk through the process of fetching data from a third-party API in a React application and rendering it on the user interface.

Why Integrate Third-Party APIs?

Integrating third-party APIs allows you to enhance your application by pulling data or services from external providers. For instance, you might integrate:

• Weather APIs to show real-time weather data
• News APIs to display the latest headlines
• Currency exchange APIs for financial applications
• Social media APIs to display content like tweets or posts

These APIs offer various functionalities and data that can make your application more interactive and dynamic.

Tools and Concepts for Fetching Data in React

React doesn’t come with a built-in method for making HTTP requests, but it works seamlessly with popular APIs like fetch or axios to handle external data.

• fetch: A built-in JavaScript function to make HTTP requests. It’s simple to use and returns a promise that resolves to the response object.
• axios: A third-party library that simplifies HTTP requests and provides features like interceptors, request cancellation, and better error handling.

Step-by-Step Guide to Fetching Data in React

Let’s walk through an example of how to fetch and display data in a React app using the fetch API.

Step 1: Setting Up a React Project

To start, we need to create a React application. If you don’t already have one, you can use the following command to create a new project using Create React App:

npx create-react-app react-api-integration 
cd react-api-integration 
npm start        

This will create a new React project and launch a development server.

Step 2: Fetch Data Using the fetch API

We’ll use the public JSONPlaceholder API, a free API that provides dummy data like posts, users, and comments. We’ll fetch a list of posts and display them on the page.

First, create a new component called PostList.js to fetch and display the posts:

import React, { useState, useEffect } from 'react';
const PostList = () => { 
const [posts, setPosts] = useState([]); // State to store posts 
const [loading, setLoading] = useState(true); // State for loading state 
const [error, setError] = useState(null); // State for error handling
useEffect(() =>{ 
// Fetch posts from the API 
fetch('https://jsonplaceholder.typicode.com/posts') 
.then((response) => {
if (!response.ok) { 
throw new Error('Network response was not ok'); 
} 
return response.json(); 
}) 
.then((data) => { 
setPosts(data); // Set posts in state 
setLoading(false); // Set loading to false 
}) 
.catch((error) => { 
setError(error); // Set error in state 
setLoading(false); 
}); 
}, []); // Empty array means the effect runs only once
if (loading) { 
return <div>Loading...</div>; 
}
if (error) { 
return <div>Error: {error.message}</div>; 
}
return ( 
<div> 
<h1>Post List</h1> 
<ul> 
{posts.map((post) => ( 
<li key={post.id}> 
<h2>{post.title}</h2> 
<p>{post.body}</p> 
</li> 
))} 
</ul> 
</div> 
); 
};
export default PostList;        

Key Concepts in the Above Code:

1. State Management: We use useState to manage the state of our data (posts), the loading state (loading), and any errors (error) that might occur during the API call.
2. useEffect Hook: The useEffect hook allows us to perform side effects (like fetching data) when the component mounts. The empty array [] passed as the second argument ensures that the effect runs only once (similar to componentDidMount in class-based components).
3. Handling Loading and Errors: We conditionally render the loading message, the error message, or the list of posts based on the state values.

Step 3: Rendering the Component

Now that the PostList component is fetching and displaying data, we can render it in our main App.js file:

import React from 'react'; 
import './App.css'; 
import PostList from './PostList';
function App() { 
return ( 
<div className="App"> 
<PostList /> 
</div>
); 
}
export default App;        

Once you run the app, you should see the list of posts fetched from the API displayed on the screen.

This article discusses how to integrate third-party APIs with ReactJS, focusing on techniques for fetching and displaying data. It offers practical guidance for React developers to enhance the functionality of their applications through seamless API integrations.

Read more on the Crest Infotech blog.