Como parte esencial de mi formación en React.js a través del curso de Midudev en YouTube (un recurso que ha sido fundamental en mi aprendizaje ⚛️ CURSO DE REACT 2024 – YouTube), desarrollé una prueba técnica centrada en la construcción de un carrito de compras interactivo. Este proyecto fue una inmersión profunda en la gestión de estado a gran escala y la optimización de la lógica de una aplicación.
Contexto del Ejercicio: Un Carrito de Compras Funcional
El objetivo principal de este ejercicio era simular una tienda en línea básica con las siguientes funcionalidades clave:
- Despliegue de Artículos: Mostrar productos con su imagen, nombre y precio de forma clara.
- Añadir al Carrito: Permitir a los usuarios sumar artículos al carrito de compras, actualizando automáticamente el precio total.
- Gestión de Cantidades: Manejar la adición de productos ya existentes en el carrito, duplicando artículos si se añaden de nuevo.
- Eliminar Artículos: Ofrecer la opción de quitar productos del carrito individualmente.
- Vaciar Carrito: Implementar una función para limpiar completamente el carrito de una sola vez.
Gestión de Estado Avanzada con useContext y useReducer
Este proyecto fue crucial para entender cómo manejar el estado global de una aplicación de React de manera eficiente y escalable:
- useContext para Acceso Global: Fue indispensable aplicar useContext para permitir que cualquier componente, en cualquier nivel de la aplicación, pudiera acceder y modificar el estado del carrito de compras sin la necesidad de pasar props manualmente de un componente a otro.
- useReducer: Se introdujo como una herramienta poderosa para gestionar la lógica de estado más compleja y hacer el código más legible y organizado. Siguiendo el ejemplo de Midudev sobre «reducir» una salsa para mejorar su sabor y consistencia, useReducer me permitió concentrar la lógica de las acciones del carrito (añadir, eliminar, vaciar) en un solo lugar, mejorando la claridad y mantenibilidad del código.
- Creación del Carrito: Con useContext y useReducer como pilares, implementé todas las acciones relacionadas con el carrito. Todas las llamadas a estas acciones se distribuyeron por los diferentes niveles de la aplicación donde eran necesarias, permitiendo una interacción fluida con el carrito desde cualquier punto de la interfaz.
Mejoras en la Usabilidad y Optimización
Además de la gestión central del carrito, el proyecto incluyó otras funcionalidades clave:
- useId para Identificadores Únicos: Este Hook genera identificadores únicos de forma automática, eliminando la necesidad de asignar IDs manualmente. Esto es vital para la accesibilidad y la correcta renderización de listas en React.
- Filtrado de Productos: Integré funcionalidades de filtrado de productos por precio y categoría. Esta es una habilidad esencial en cualquier aplicación de e-commerce y fue un punto clave para mi comprensión de cómo manipular y presentar grandes conjuntos de datos de manera eficiente.
Tecnologías Utilizadas
Para este proyecto, me apoyé en las siguientes herramientas:
- Visual Studio Code
- Vite
- Node.js
Conclusión
La construcción de esta tienda y carrito de compras con React.js fue una experiencia de aprendizaje exhaustiva. Me permitió dominar el uso de useContext y useReducer para una gestión de estado robusta y legible. Comprendí la importancia de useId para la generación automática de identificadores y perfeccioné mis habilidades en el filtrado de datos. Este proyecto consolidó mi capacidad para desarrollar aplicaciones React complejas y eficientes, listos para manejar interacciones de usuario detalladas.
