[Introduction to React] A complete guide to creating an image gallery | Learn how to build a UI with thumbnail and modal support

programming

"I want to create a practical app with React, but I don't know what to do..."
For those people, we recommendImage Gallery Appis.
In this app,Display thumbnails, expand in modal, and manage stateYou can learn the main skills of React all at once through these courses.

How to create an image gallery in React

Conclusion: Learn UI basics and state management

An image gallery is a great way to learn how to manage state, handle events, and render lists in React.

Project preparation and environment construction

Tools and Techniques Used

  • React (create-react-app)
  • CSS Modules or styled-components
  • Image data can be local or external URL
1
npx create-react-app image-gallery cd image-gallery

Gallery configuration and components

Page structure

  • Top page (list of images)
  • Enlarged Image Modal

Component Design

  • Gallery.js: Full display
  • Thumbnail.js: Thumbnail
  • Modal.js: Enlarged image display

Implementing thumbnail display

Map images from arrays

1
const images = [ { id: 1, src: "/img/photo1.jpg", alt: "dish 1" }, { id: 2, src: "/img/photo2.jpg", alt: "dish 2" }, ... ];
1
2
3
4
<div classname="gallery">
  {images.map(img =&gt; (
    <img key="{img.id}" src="{img.src}" alt="{img.alt}" onclick="{()" > openModal(img)} /&gt; ))}
</div>

Modal zoom function

State Management and Conditional Drawing

1
2
3
4
5
const [selectedImage, setSelectedImage] = useState(null); {selectedImage &amp;&amp; (
  <div classname="modal" onclick="{()" > setSelectedImage(null)}&gt;
    <img src="{selectedImage.src}" alt="{selectedImage.alt}" />
  </div>
)}

Reference for public institution design

  • Digital Agency "UI/UX Guidelines": https://www.digital.go.jp/policies/design/
  • METI "Design that leaves no one behind": https://www.meti.go.jp/policy/mono_info_service/mono/design/

Common errors and solutions

If the image doesn't appear

  • The relative path or file name is incorrect
  • Be careful about image placement in the public folder

Modal won't close

  • Forgetting to block event propagation (e.stopPropagation()Utilizing

Completed code summary

The final code looks like this:

App.js

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
import React, { useState } from &quot;react&quot;; import &quot;./App.css&quot;; const images = [ { id: 1, src: &quot;/img/photo1.jpg&quot;, alt: &quot;Dish 1&quot; }, { id: 2, src: &quot;/img/photo2.jpg&quot;, alt: &quot;Dish 2&quot; }, { id: 3, src: &quot;/img/photo3.jpg&quot;, alt: &quot;Dish 3&quot; }, ]; function App() { const [selectedImage, setSelectedImage] = useState(null); return (
    <div classname="App">
      <h1>Image gallery</h1>
      <div classname="gallery">
        {images.map((img) =&gt; (
          <img
            key="{img.id}"            src="{img.src}"            alt="{img.alt}"            onclick="{()" > setSelectedImage(img)} className=&quot;thumb&quot; /&gt; ))}
      </div>
      {selectedImage &amp;&amp; (
        <div classname="modal" onclick="{()" > setSelectedImage(null)}&gt;
          <img src="{selectedImage.src}" alt="{selectedImage.alt}" />
        </div>
      )}
    </div>
  ); } export default App;

Summary: First step to learning UI basics

The image gallery app is built using React.Basic component design, event handling, and state managementIt is a subject that includes all of the above.
Through implementation,Gain confidence in UI construction and develop application skillsI guess so.

Copied title and URL