Hooks para gestión de estado complejo y contexto

Código
Avanzado
React
React
25 min
75 XP
Actualizado: 06/10/2024

¡Practica y certifícate!

Retroalimentación
Soluciones
Certificado
Comenzar

Descripción

Crear una aplicación React que gestione un carrito de compras utilizando useContext para compartir el estado global entre componentes. Los usuarios podrán agregar y eliminar productos y ver el total.

Este reto está diseñado para medir tus habilidades en la gestión de estado complejo y la utilización del contexto en aplicaciones React. El objetivo es que desarrolles una aplicación de carrito de compras que haga uso eficiente del hook useContext para compartir y manejar el estado global de la aplicación.

En primer lugar, deberás crear un contexto global para el carrito de compras. A continuación, implementarás un proveedor (Provider) que gestionará el estado del carrito y lo pondrá a disposición de todos los componentes de la aplicación que lo requieran. Los componentes de tu aplicación tendrán que hacer uso de useContext para acceder y modificar este estado global.

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

Entre las funcionalidades clave que deberás implementar se incluyen la adición y eliminación de productos del carrito. El estado del carrito debe ser un array de objetos, donde cada objeto representa un producto con las propiedades id, name y quantity. La lógica para agregar y eliminar productos del carrito se implementará dentro del proveedor del contexto.

Requisitos

  1. Crea un contexto global para el carrito de compras.
  2. Implementa un proveedor (Provider) para gestionar el estado del carrito.
  3. Utiliza useContext en los componentes para acceder y modificar el estado del carrito.
  4. Los componentes deben ser:
    • App: El componente principal que envuelve la aplicación con el proveedor del contexto.
    • ProductList: Un componente que muestra una lista de productos con la opción de agregar al carrito.
    • Cart: Un componente que muestra los productos agregados al carrito y permite eliminarlos, así como el total de productos en el carrito.

Detalles técnicos:

  • El estado del carrito debe ser un array de objetos, donde cada objeto representa un producto con las propiedades id, name y quantity.
  • Implementa funciones para agregar y eliminar productos del carrito dentro del proveedor del contexto.
  • Usa el hook useContext para acceder al estado y las funciones del contexto en ProductList y Cart.

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 );
5
6 // Aplicar técnica de dos punteros
7 let left = 0 , right = sorted . length - 1 ;
8 const result = [];
9
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 }
21
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

Únete a miles de desarrolladores mejorando sus habilidades

⭐⭐⭐⭐⭐
4.9/5 valoración