"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
- Project preparation and environment construction
- Gallery configuration and components
- Implementing thumbnail display
- Modal zoom function
- Reference for public institution design
- Common errors and solutions
- Completed code summary
- Summary: First step to learning UI basics
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 displayThumbnail.js
: ThumbnailModal.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 => ( <img key= "{img.id}" src= "{img.src}" alt= "{img.alt}" onclick= "{()" > openModal(img)} /> ))} </div> |
Modal zoom function
State Management and Conditional Drawing
1 2 3 4 5 | const [selectedImage, setSelectedImage] = useState( null ); {selectedImage && ( <div classname= "modal" onclick= "{()" > setSelectedImage( null )}> <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 "react"; import "./App.css"; const images = [ { id: 1, src: "/img/photo1.jpg", alt: "Dish 1" }, { id: 2, src: "/img/photo2.jpg", alt: "Dish 2" }, { id: 3, src: "/img/photo3.jpg", alt: "Dish 3" }, ]; function App() { const [selectedImage, setSelectedImage] = useState( null ); return ( <div classname= "App" > <h1>Image gallery</h1> <div classname= "gallery" > {images.map((img) => ( <img key= "{img.id}" src= "{img.src}" alt= "{img.alt}" onclick= "{()" > setSelectedImage(img)} className="thumb" /> ))} </div> {selectedImage && ( <div classname= "modal" onclick= "{()" > setSelectedImage( null )}> <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.