Day-10 ReactJS with API

Retrieving and Displaying Data from External Sources in React JS using APIs.

This article is a part of one month React learning guide . This is the 10th part of the series. You can learn previous articles also to learn from starting

ReactJS is a powerful front-end library that makes it easy to build complex web applications. One of the key features of ReactJS is its ability to interact with APIs and external data sources, allowing developers to retrieve and display data in real time. In this article, we’ll take a closer look at how to use APIs in ReactJS and how to retrieve data from external sources.

Understanding APIs

API stands for Application Programming Interface. It is a set of protocols, routines, and tools for building software and applications. APIs allow different software applications to communicate with each other, sharing data and functionality. An API acts as an intermediary between two different software applications, allowing them to exchange information and perform actions.

There are many different types of APIs, including web APIs, which are designed to be used by web applications. Web APIs use HTTP requests and responses to exchange data between applications. They typically provide data in JSON format, which is easy to parse and work with in JavaScript.

Retrieving Data from an API

To retrieve data from an API in ReactJS, we can use the built-in fetch function. The fetch function makes a request to an external resource and returns a promise that resolves with the response. We can then use this response to update the state of our React component and display the data in our application.

Here’s an example of how to use the fetch function to retrieve data from an API:

import React, { useState, useEffect } from 'react';
function App() {
  const [data, setData] = useState([]);
  useEffect(() => {
    fetch('https://api.example.com/data')
      .then(response => response.json())
      .then(data => setData(data));
  }, []);
  return (
    <div>
      <h1>API Data:</h1>
      <ul>
        {data.map(item => (
          <li key={item.id}>{item.name}</li>
        ))}
      </ul>
    </div>
  );
}
export default App;

In this example, we are using the useEffect hook to make a request to an external API when the component mounts. We are then using the setData function to update the state of our component with the data from the API. Finally, we are displaying the data in our application using a list.

Displaying Data in ReactJS

Once we have retrieved data from an API, we can display it in our ReactJS application. There are many different ways to display data in ReactJS, depending on the type of data and the requirements of our application. Some common ways to display data in ReactJS include:

• Lists and tables
• Forms and input fields
• Charts and graphs
• Maps and location data
• Images and media

Here’s an example of how to display data in a table using ReactJS:

import React, { useState, useEffect } from 'react';
function App() {
  const [data, setData] = useState([]);
  useEffect(() => {
    fetch('https://api.example.com/data')
      .then(response => response.json())
      .then(data => setData(data));
  }, []);
  return (
    <table>
      <thead>
        <tr>
          <th>ID</th>
          <th>Name</th>
          <th>Email</th>
        </tr>
      </thead>
      <tbody>
        {data.map(item => (
          <tr key={item.id}>
            <td>{item.id}</td>
            <td>{item.name}</td>
            <td>{item.email}</td>
          </tr>
        ))}
      </tbody>
    </table>
  );
}
export default App;

In this example, we are displaying data in a table using the map function to iterate over the data and create a table.