React30-Project5: Building an Image Gallery App with React.js

Title image

Introduction

In this tutorial, we’ll create an image gallery app using React.js. We’ll make an API request using Axios to fetch a list of images and display them as a scrollable gallery on the page. This project will help us understand how to use the useEffect hook to make API calls in React applications.

App preview:-

Objective:

1. Make API request using axios to below URL to get user feed data API URL for building feed:-
   https://picsum.photos/v2/list
2. Show the data fetched from API as scrollable image gallery in page

Try creating this app once before proceeding with solution further.

Prerequisites

Make sure you have Node.js and npm (Node Package Manager) installed on your system.

Step 1: Set Up a New React App

Open your terminal and run the following command to create a new React app:

npx create-react-app image-gallery-app

This command will set up a new React project with the necessary files and dependencies.

Step 2: Install Axios

Navigate to the project folder in your terminal and run the following command to install Axios, a popular library for making HTTP requests:

npm install axios

Step 3: Create the Gallery App

Navigate to the src folder in your project directory and open the App.js file. Replace its content with the following code:

import React, { useState, useEffect } from 'react';
import axios from 'axios';
import './App.css';

function App() {
  const [photoGalleryArray, updatePhotoGalleryArray] = useState([]);
  useEffect(() => {
    // API call for fetching images 
    axios.get('https://picsum.photos/v2/list')
      .then(function (response) {
        // handle success
        updatePhotoGalleryArray(response.data)
      })
      .catch(function (error) {
        // handle error
        console.log(error);
      })
  }, [])
  return (
    <div className="App">
      <nav className="navbar navbar-dark bg-dark">
      <div className="w-100 text-light">Image Gallery</div>
      </nav>
      <div className="row">
        {
          photoGalleryArray.map((photoGalleryArrayItem, index) => {
            return (
              <div key={index} className="col-lg-4 col-md-4 col-sm-12 p-1">
                <img src={photoGalleryArrayItem.download_url}
                  alt={`image_${photoGalleryArrayItem.id}`}
                  height="300"
                  width="400"
                />
              </div>
            );
          })
        }
      </div>
    </div>
  );
}

export default App;

Explanation

useEffect Hook

• The useEffect hook in React is used to perform side effects in function components.
• In our App component, we use useEffect to make an API call to https://picsum.photos/v2/list when the component mounts.
• When the API call is successful, we update the `photoGalleryArray` state with the received list of images.

Making API Calls with Axios

• We import Axios and use it to make a GET request to the specified URL.
• The response from the API is processed in the .then() block and the list of images is set to the `photoGalleryArray` state using `updatePhotoGalleryArray` method.

Step 4: Styling the app

Add bootstrap stylesheet link in public/index.html file’s head section:

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" integrity="sha384-JcKb8q3iqJ61gNV9KGb8thSsNjpSL0n8PARn9HuZOnIxN0hoP+VmmDGMN5t9UJ0Z" crossorigin="anonymous">

Our app will now look like the one shown in app preview.

Github source code:-
Github Image Gallery App

Codesandbox link:-
Codesandbox Gallery App

Conclusion

You’ve successfully built an image gallery app using React.js! This project demonstrated how to use the useEffect hook to make API calls in React applications. The fetched images are displayed as a scrollable gallery on the page. Feel free to explore and customize the app further to enhance your understanding of React. Have a nice day ahead!

You can check out my Youtube channel for more content:
SaurabhNative-Youtube

Check out part 6 in the series below:-

React30-Part6