Tienda y Carrito con React + Estado Global con useContext + Manejo de estado con useReducer
En este artículo vamos a hablar sobre cómo crear una tienda en línea y un carrito de compras utilizando React, estado global con useContext y el manejo de estado con useReducer. Estas son herramientas poderosas que nos permiten gestionar el estado de nuestra aplicación de una manera más eficiente y organizada.
React
React es una biblioteca de JavaScript para construir interfaces de usuario. Es una de las herramientas más populares para el desarrollo web y es ampliamente utilizada en la creación de aplicaciones modernas. Con React, podemos construir componentes reutilizables que nos permiten organizar y gestionar mejor nuestro código.
Estado Global con useContext
El hook useContext de React nos permite acceder al estado global de nuestra aplicación. Esto significa que podemos compartir datos entre diferentes componentes sin tener que pasar props manualmente. Con useContext, podemos crear un contexto que contiene el estado global y luego acceder a él en cualquier componente que necesite esa información.
Manejo de Estado con useReducer
El hook useReducer de React es otra herramienta poderosa para gestionar el estado de nuestra aplicación. Permite gestionar el estado de una manera más compleja y estructurada, lo que resulta útil para aplicaciones más grandes y con lógica más compleja. Con useReducer, podemos definir acciones que modifican el estado y un reducer que procesa esas acciones y actualiza el estado en consecuencia.
Tienda y Carrito de Compras
Utilizando las herramientas mencionadas anteriormente, podemos construir una tienda en línea con un carrito de compras que permite a los usuarios agregar productos, gestionar el carrito y realizar compras. Con el estado global y el manejo de estado, podemos controlar de manera efectiva los productos disponibles, el contenido del carrito y el proceso de compra.
Conclusion
En resumen, React ofrece una serie de herramientas poderosas para construir aplicaciones web modernas. Con el uso de useContext para el estado global y useReducer para el manejo del estado, podemos crear una tienda en línea y un carrito de compras eficientes y bien estructurados. Estas herramientas nos permiten gestionar la lógica de nuestra aplicación de una manera más clara y organizada, lo que resulta en un código más mantenible y escalable.
me lo comi el video entero , aunque estuve un poco abrumado al final cuando empezaste a refactorizar bastante rapido. pero me encanto , gracias Midu
Muchas Gracias Midu, estoy siguiendo tu curso me quede en una empresa mucho tiempo y siento que me quede estancado, ahora que quiero salir no encuentro trabajo y mi oportunidad es aprender react y salir como Junior a otro empleo, Muchas gracias por transmitirnos tu conocimiento, tengo una pequeña pregunta, cual es la extension de vs code que usar para los emojis y tus configuraciones de terminal Muchas gracias de nuevo. Abrazo.
¿Qué formateador de código utilizas? Tengo un problema con el linter al momento de formatear me quita el espacio entre el nombre de la función y los paréntesis. ¿Cómo podría solucionarlo?
Puse pausa en el 1:14:00 para venir a dar una opinion que nadie pidió. En ese momento sea menciona que esta prueba es de JR. De ser así, me siento muy orgulloso de decir que AUN no soy ni JR. Pero Midu, vos Inspiras, ayudas… me das ganas de seguir. GRACIAS!! Te mando un abrazo grande desde Argentina y espero poder sacarme una foto con vos en NERDEARLA! (la voy a presumir como vos presumiste tu foto con rivers)
Maestro, usted es un grande. Si me permites dar un pequeño granito de arena. Cuando ocupas un proyecto NextJs ya no tenemos un archivo main.jsx donde poder usar el <FiltersProvider> y alojar toda la app dentro del Provider. Mi recomendación es usar el archivo layout.jsx (o layout.js, yo usé el jsx) que está dentro de la carpeta app, y hacer que el <FiltersProvider> encierre el body. Ahí cumple el mismo efecto.
Gracias por todo.
Hola Midu! Estoy siguiendo el curso desde hace poco ya que no sabía utilizar React sólo Angular y la verdad que está increíble!
Pero, hay una cosa que no entiendo y veo que lo utilizas muchísimo y es el uso de const. Se supone que una variable const es si no va a cambiar su valor, pero a veces si que cambia y lo usas no? Es mejor en cuanto a algo como let o var utilizar const?
Gracias!!
Grande midu, super bien explicado!
¿Por qué no te levantas de la silla, aprendes psicología educativa y te sales de git-hub?
He leído que la gente tiene un grupo privado para meterse contigo y te llaman miduliveflipper, guapo, que eres un bebé…
yo me lo pensaría dos veces…
yo de tí, estudiaba.
¡suerte!
<3
Gracias midu. Excelente video.
Que nivel de detalle en la explicación, excelente video!
Midu, te hago una pregunta, tenia entendido que no se debía utilizar localStorage dentro del reducer… por que por ejemplo en la linea 27 cuando llamas al updateLocalStorage(newState) puede fallar esa función por x motivo y ya no devolvería un estado. Esto es así? Muchas gracias por tu contenido Midu, un abrazo.
PD: si alguien me puede responder a esto, lo adradezco, tmb. Saludos a toda la comunidad!!
ese final Dx, lo se papi midu hay que mover las manitas pero no me grite :c
midu haz uno enseñando a usar Redux. No vendria mal 😉
1:31:58 Pero no siempre es necesario testear todo no??
Hola midu, hice todo el proyecto y ahora le quería poner la API y estuve buscando las API de producto parecidas, le puse un carrusel de fotos con el array de images. Pero ahora quería saber si tienes la API a mano o si alguien sabe que API es para añadirla.
Gracias
Saludos.
y como hago para q en lugar de q queden centados de dos en dos los productos salgan los q alcancen segun el tamaño de la imagen o el recuadro del producto
Midu! Hermoso video como siempre! Como haces para que cuando pones los dos puntos, te aparezca el desplegable de los simbolos? Juro que busque bastante si habia una extension y ni chatgpt me supo ayudar xD
Extraordinario
Hola Midu, lo que hice para no repetir la función de guardar el state en el localStorage, fue que se ejecute la funcion cuando se cambia el state con un useEffect({….},[state]), ¿ crees que es mejor esta forma ?