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.
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
- Crea un contexto global para el carrito de compras.
- Implementa un proveedor (
Provider
) para gestionar el estado del carrito. - Utiliza
useContext
en los componentes para acceder y modificar el estado del carrito. - 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
yquantity
. - 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 enProductList
yCart
.
Solución al ejercicio
¡Desbloquea la solución completa!
Completa el examen para acceder a la solución paso a paso, explicaciones detalladas y mejores prácticas.
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