Tienda y Carrito con React + Estado Global con useContext + Manejo de estado con useReducer

⚛️ CURSO DE REACT 2024

¡Aprende a usar useContext, useReducer y useId en tus aplicaciones de React! 👀 Todas las clases: https://www.youtube.com/watch?v=7iobxzd_2wY&list=PLUofhDIg_38q4D0xNWp7FEHOTcZhjWJ29 👨‍💻 Repositorio de código: https://github.com/midudev/aprendiendo-react 💬 ¿Dudas de React? Pregunta aquí: https://discord.gg/midudev 🔴 No te pierdas más directos en: https://www.twitch.tv/midudev useContext. Este hook nos permite crear un estado global de nuestra aplicación sin necesidad de pasar datos a través de múltiples componentes. Al crear un contexto, podemos almacenar datos en él y luego acceder a ellos desde cualquier componente que consuma ese contexto. useReducer: Hook nos permite manejar estados complejos y es una alternativa a useState. Nos permite definir acciones que cambian el estado de forma más controlada. Al utilizar useReducer, definimos una función reducer que toma un estado actual y una acción y devuelve un nuevo estado. SEGMENTOS 00:00 - Introducción, iniciar proyecto e instalación dependencias 02:40 - Limpiar el código que viene por defecto 03:25 - Copia de iconos 03:55 - Listar Productos de la tienda 10:40 - Añadir filtros de la tienda 19:12 - Estilando los filtros 20:54 - Mejorando filtro rango 22:15 - Hacer que los filtros funcionen 29:46 - Prop Drilling 32:30 - useId, para crear identificadores 37:50 - useContext, crear contextos en React y para qué sirve 55:42 - ¿Cuándo usar useContext? 57:15 - Evitar prop drilling con useContext 01:00:10 - Dos fuentes de la verdad. ¿Qué es y cómo arreglarlo? 01:09:41 - Creación de un carrito desde cero 01:12:50 - Crear menú flotante con CSS 01:16:50 - Crear Contexto para el Carrito de la Tienda 01:27:21 - Mostrar visualmente que el producto está añadido al carrito 01:34:34 - Mostrar la info del carrito 01:38:55 - ¿Qué es el método bind y para qué sirve? 01:40:11 - useReducer, manejando estados más complejos

About the course