Ejercicios React, React Router, Vite proyecto galería

Descripción

Desarrolla una aplicación de galería de imágenes en React con navegación entre álbumes usando React Router y gestión de estado local y de contexto.

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:

Guarda tu progreso

Inicia sesión para no perder tu progreso y accede a miles de tutoriales, ejercicios prácticos y nuestro asistente de IA.

Progreso guardado

Asistente IA

Ejercicios

Iniciar sesión gratis

Más de 25.000 desarrolladores ya confían en CertiDevs

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.

Solución al ejercicio

Contenido bloqueado

¡Desbloquea la solución completa!

Completa el examen para acceder a la solución paso a paso, explicaciones detalladas y mejores prácticas.

solution.js

JavaScript

1 function solveChallenge ( input ) {

2 // Algoritmo optimizado O(n log n)

3 const data = parseInput ( input );

4 const sorted = data . sort (( a , b ) => a - b );

6 // Aplicar técnica de dos punteros

7 let left = 0 , right = sorted . length - 1 ;

8 const result = [];

10 while ( left < right ) {

11 const sum = sorted [ left ] + sorted [ right ];

12 if ( sum === target ) {

13 result . push ([ sorted [ left ], sorted [ right ]]);

14 left ++; right --;

15 } else if ( sum < target ) {

16 left ++;

17 } else {

18 right --;

19 }

20 }

22 return result ;

23 }

Código completo

Explicaciones

Mejores prácticas

+1.200 developers han resuelto este ejercicio de programación

Practica con exámenes de React

Mejora tus habilidades con cientos de exámenes de práctica, recibe retroalimentación instantánea y obtén tu certificación cuando estés listo.

Retroalimentación

Aprende de tus errores

Progreso

Mide tu avance

Certificación

Valida tus habilidades

Comenzar a practicar

Únete a miles de desarrolladores mejorando sus habilidades

⭐⭐⭐⭐⭐

4.9/5 valoración