Ejercicio de programación con React: Galería de imágenes en React

Proyecto
Práctica
0h 45m

Ejercicios de programación de React, React Router, Vite proyecto real de galería de imágenes con navegación y gestión de estado.

Instrucciones y pasos a seguir para resolver el ejercicio

Inicialización del proyecto:

  • Crear un nuevo proyecto con Vite usando el comando npm create vite@latest y seleccionar la plantilla de React.
  • Instalar las dependencias necesarias: React Router con npm install react-router-dom@6.26.2.

Estructura del proyecto:

  • Crear una carpeta components para almacenar los componentes de la aplicación.
  • Crear una carpeta routes para definir las rutas de la aplicación.

Componentes principales:

  • Galería: Componente que muestra la lista de álbumes.
  • Álbum: Componente que muestra las imágenes de un álbum seleccionado.
  • ImagenDetalle: Componente que muestra una imagen en detalle.

Configuración de rutas:

  • Configurar las rutas utilizando BrowserRouter, Routes y Route de React Router para navegar entre la galería, álbumes e imágenes detalladas.

Gestión del estado:

  • Utilizar el hook useState para gestionar el estado local.
  • Implementar el contexto de React para compartir datos entre componentes, como la lista de álbumes y las imágenes.

Estilos y diseño:

  • Aplicar estilos CSS para hacer la interfaz responsive y visualmente atractiva.

Pruebas y ajustes:

  • Probar la aplicación navegando entre álbumes e imágenes.
  • Realizar ajustes necesarios para mejorar la experiencia de usuario y corregir errores.
Empezar ejercicio de programación

Más ejercicios de programación con React

Evalúa tus conocimientos en React con más ejercicios de programación de tipo Test, Puzzle, Código y Proyecto con VSCode.

Certificados de superación de React

Supera todos los retos de React y obtén certificados de superación para mejorar tu currículum y empleabilidad.

Tecnologías de este ejercicio de programación

Entornos de desarrollo para este ejercicio

Image

Visual Studio Code

Image

GitHub