Ejercicio de programación con React: Hooks para gestión de estado complejo y contexto

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.

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.