How to fetch data from an API in React.js?



In my previous post, we discussed about all the hooks that are used in React along with some examples. Now, in this post I will show you how to fetch data from an API in React.js via a small project. For our today's project, we will be using the JSONPlaceholder API. In this project we will fetch all the posts from the API endpoint:https://jsonplaceholder.typicode.com/posts  and show them on our React app.


Step by Step guide to create the project:-

1. Create a React app in your desired directory. If you don't know how to create a React app, go to my post on React.js tutorial on how to create a React app Step by Step guide.


2. Navigate to the App.css file and delete all custom CSS code from App.css and copy this code This code provides minimal styling for our app component. You can of course, add more custom CSS or include frameworks like Bootstrap or Tailwind CSS in order to make your project more beautiful.



.display{
  display: flex;
  justify-content: center;
  width: 100%;
}
.display .posts{
  margin-top: 1rem;
  display: flex;
  flex-direction: column;
  gap: 5rem;
  width: 50%;
 
}
.display .posts div{
  padding: 1rem;
  border: 2px solid black;
  border-radius: 0.75rem;
}
.display .posts div:hover{
  transform: scale(1.05);
}


3. Now, navigate to the App.jsx file and replace the existing code with the following code: 


import './App.css';
import { useEffect,useState } from 'react';
function App() {
  const [posts, setPosts] = useState([]);
  useEffect(() => {
    async function fetchData (){
      let url = `https://jsonplaceholder.typicode.com/posts`;
      try {
        let response = await fetch(url);
        let data = await response.json();
        setPosts(data);
        console.log(data);
      }
      catch (err) {
        console.log(err)
      }
    }
    fetchData();
  }, [])

  return (
    <div className='display'>
      <div className="posts">
      {posts.map(post => (
        <div key={post.id}>
          <h2>{post.title}</h2>
          <p>{post.body}</p>
        </div>
      ))}
      </div>
    </div>
  );
}

export default App;


Explanation:-

  1. Import Statements:

    • import './App.css';: This imports the CSS file App.css for styling.
    • import { useEffect, useState } from 'react';: This imports the useEffect and useState hooks from the React library. These hooks are used for managing side effects and state in functional components, respectively.

  2. Functional Component App:

    • function App() { ... }: This defines the App component as a functional component.
    • const [posts, setPosts] = useState([]);: This line initializes a state variable posts using the useState hook. Initially, posts is an empty array, and setPosts is a function used to update the posts state.

  3. useEffect Hook:

    • useEffect(() => { ... }, []);: This useEffect hook runs when the component mounts (due to the empty dependency array []). Inside the hook, an asynchronous function fetchData is defined and immediately invoked.

  4. Fetching Data:

    • async function fetchData() { ... }: This asynchronous function fetchData is defined within the useEffect hook. It's responsible for fetching data from the JSONPlaceholder API.
    • let url = 'https://jsonplaceholder.typicode.com/posts';: This defines the URL from which the data will be fetched.
    • let response = await fetch(url);: This line sends a GET request to the specified URL and awaits the response.
    • let data = await response.json();: This parses the JSON response into JavaScript objects.
    • setPosts(data);: This updates the posts state with the fetched data.
    • console.log(data);: This logs the fetched data to the console for debugging purposes.

  5. Rendering Posts:

    • return ( ... );: This is the JSX returned by the App component.
    • <div className='display'> ... </div>: This wraps the content of the component with a div with the class name display.
    • <div className="posts"> ... </div>: This div holds the rendered posts.
    • {posts.map(post => (...))}: This maps over the posts array and renders each post as a div with its title and body. The key prop is used to uniquely identify each post element.

4. Now, run npm start in your terminal.


5. Your website must look something like this:




You now know how to fetch data from an API in React.











Comments

Post a Comment

Popular posts from this blog

Building a weather app using React.js

Image
In today's digital age, accessing weather information has become an essential part of our daily routine. Building a weather application not only provides valuable real-time data to users but also offers a great opportunity to learn and practice web development skills. In this post, i'll walk through the process of building a weather app using React, a popular JavaScript library for building user interfaces. Setting Up the Project: To start, make sure you have Node.js and npm installed on your system. Create a React app named weather-app. Learn how to create a React app by clicking here . Fetching Weather Data: Our weather app will rely on an external API to fetch weather data. We'll use the OpenWeatherMap API, which provides current weather data, forecasts, and more. async function fetchData ( cityname = 'Kolkata' ) {     if ( cityname === null || cityname == '' )     {       alert ( 'Please select a city!' );     }     else {...
Read more

Different types of hooks in React and their uses.

Image
  I n my last post, I gave a guide on how to to make our first React application. Now that you have created your first React application, it is time to know about the different kinds of hooks in React and when to use them. Before, following this post, you must have a React app set up and must be inside the directory. Different types of hooks and their use:-  1. useState hook:- The useState hook is used to manage the state of a function component. It accepts an initial state and returns two values, namely, the current state and a function to update the state.  In the given example count is the current state and setCount is the function to update the state. The useState hook can be used to store and update any type of data including primitive values, objects, and arrays. const [count, setCount] = useState(0); 2. useEffect hook:- The useEffect hook is used to perform side effects, such as fetching data or setting up subscriptions. It accepts a function that contains the ...
Read more

What are callback functions in JavaScript?

Image
I n my last post I shared information about React Routing. In this post, I shall keep things light and easy. I will be talking about callback functions and their uses. What are callback functions? In JavaScript, functions are more of a first class citizens, meaning they can be treated as values and passed around just like any other data type. Callback functions take advantage of this feature by allowing you to pass a function as an argument to another function. Then the passed function can be executed sometime in future. Why Use Callback Functions? JavaScript is single-threaded and asynchronous by nature, meaning that it can perform multiple operations concurrently without blocking the main execution thread. Callback functions are essential for handling asynchronous tasks such as fetching data from servers, processing user input, and performing animations, without freezing the user interface. How to Define Callback Functions? You can define callback functions inline as anonymous functi...
Read more