Ejercicio de programación con React: Galería de imágenes en React
Proyecto
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
yRoute
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.
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.
Props y manejo de datos entre componentes
Puzzle
Definición y manejo de rutas
Puzzle
Conocimiento general de React
Test
Eventos en React
Código
Gestor de tareas con React
Proyecto
Custom Hooks para servicios compartidos
Test
Nuevos métodos create de React Router
Código
Solicitudes HTTP con Fetch API
Test
Instalar React y crear nuevo proyecto
Puzzle
Renderizado condicional
Código
Introducción a JSX
Código
Manejo de clases y estilos
Puzzle
Introducción a React Router
Test
Solicitudes HTTP con Axios
Puzzle
Estado local con useState y useReducer
Código
Estado global con Redux Toolkit
Código
Estado y ciclo de vida de los componentes
Código
Hooks para gestión de estado complejo y contexto
Código
Componentes funcionales
Código
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
Visual Studio Code
GitHub