Objective: Build a grid of photos fetched from an API.

Description: In this project, you will create a photo gallery that displays a grid of photos fetched from an external API. This project will help you practice rendering lists, using keys, and fetching data in React.

Instructions:

Step 1: Setup Your Project

• Create a new React project using Vite.
• Set up your project structure with a main <strong>App</strong> component and a <strong>PhotoGallery</strong> component.

Step 2: Fetch Photos from an API

Use the <strong>useState</strong> and <strong>useEffect</strong> hooks to fetch photos from an API and store them in a state variable.

Hint: Use the <strong>https://jsonplaceholder.typicode.com/photos</strong> endpoint to fetch sample photos.

import React, { useState, useEffect } from 'react';

function PhotoGallery() {
  const [photos, setPhotos] = useState([]);

  useEffect(() => {
    fetch('<https://jsonplaceholder.typicode.com/photos>')
      .then(response => response.json())
      .then(data => setPhotos(data.slice(0, 20))); // Limit to 20 photos for now
  }, []);

  return (
    <div>
      {/* Render photos here */}
    </div>
  );
}

export default PhotoGallery;

Step 3: Render Photos in a Grid

Use the <strong>map</strong> method to render the photos in a grid. Each photo should be displayed as an image with a unique <strong>key</strong> prop.

Hint: Use the <strong>url</strong> and <strong>title</strong> properties from the fetched data to display the photos and their titles.

return (
  <div className="photo-gallery">
    {photos.map(photo => (
      <div key={photo.id} className="photo-item">
        <img src={photo.thumbnailUrl} alt={photo.title} />
        <p>{photo.title}</p>
      </div>
    ))}
  </div>
);

Step 4: Style the Photo Gallery

Add some CSS to style the photo gallery grid. Make the photos display nicely in a grid layout.

Hint: Use CSS grid or flexbox to create a responsive grid layout.

/* Add to your PhotoGallery.css file */
.photo-gallery {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: 10px;
  padding: 20px;
}

.photo-item {
  background-color: #f8f8f8;
  padding: 10px;
  border: 1px solid #ddd;
  border-radius: 4px;
  text-align: center;
}

.photo-item img {
  max-width: 100%;
  height: auto;
  border-radius: 4px;
}

.photo-item p {
  margin-top: 10px;
  font-size: 14px;
  color: #333;
}

Complete Code Example:

Here's how your complete <strong>PhotoGallery</strong> component might look: