Carrito de compras BÁSICO con React | Práctica

Подписаться 5 тыс.

Просмотров 30 тыс.

50% 1

En este vídeo te enseñare como crear un carrito de compras con React de una manera fácil y rápida utilizando useState y tendremos algunas funcionalidades como:
✅ Borrar productos individuales del carrito
✅ Vaciar todo el carrito
✅ Añadir producto al carrito
✅ Total a pagar
✅ Total de productos añadidos al carrito
📍 Repositorio de Github:
github.com/roberto-aq/Carrito...
_________________________
00:00 Introducción + demo
01:28 Configuración del proyecto
08:48 Configuración de componentes Header y ProductList
22:50 Añadir un Producto al Carrito
38:06 Eliminar un Producto del Carrito
42:37 Vaciar Carrito
_________________________
Links usados:
📌 Código HTML y CSS
github.com/roberto-aq/carrito...
📣 Si tienes alguna duda, pregunta o comentario y necesitas contactarme directo puedes escribirme aquí 💯:
t.me/roberto_anq

Наука

Опубликовано:

22 июн 2024

Ссылка:

Скачать:

Готовим ссылку...

Добавить в:

Мой плейлист

Посмотреть позже

Комментарии : 50

@alanperez4639 Год назад

Dios mio, llevaba 3 días intentando hacer que no se repitan los components y que solo se aumente la cantidad y tú me haz salvado. Muchas graciaaaas

@alanbalvin7731 Год назад

Empecé contigo mis primeros tutoriales y después de casi tres meses de tomar muchos tutoriales con mucha gente, regreso al mismo carrito de compras contigo porque creo que es ideal para empezar a poner en práctica React. El otro tutorial del carrito de compras se me dificultó más, en parte por algunos errores que nos comentaste al final pero también porque iba comenzando, ahora regreso contigo y me siento muy bien con este tutorial, muchas gracias

@plf6418 Месяц назад

Hice un bootcamp, con el stack MERN y este video me esta ayudando mucho, por que habia cosas que no entendia bien, muchas gracias 🙏 😊

@ahuaracab Год назад

Gracias por el contenido, me iluminó en lo que estaba atascado! Yo puse todos los useState en un Context para tenerlo disponible en todos mis componentes

@Deus-lo-Vuilt Год назад

Justo esperaba este mismo ejemplo con React , gracias bro 💜

@facusaavedrx Год назад

Muchas gracias por compartirnos las practicas y ganar conocimiento 💟

@mariangeldiazvillanueva283 Год назад

De verdad muchisimas gracias, me sirvió un monton el video!!

@JesusGarcia-cy1lu Год назад

Demasiado bueno y simple, me sirvio un monton🎉

@MonkeyBeatss 5 месяцев назад

gracias, muy buena base para empezar mi ecommerce!

@santiagocantor2072 Год назад

Buenísimo, me ayudaste un montón. Sos crack👍

@ivanmolina7280 Год назад

Muy buen contenido, me ayudaste un monton

@luiss.becerra4011 Год назад

Claro, preciso y rápido, de 10, este proyecto muchas gracias por tomarte tu tiempo, espero en un futuro cercano la versión con redux o usecontent y tal vez haciendo peticiones a un backend

@programacionparaelmundo Год назад

Muchas gracias por el comentario. Espero hacer un carrito de compras más robusto utilizando redux toolkit próximamente. Saludos

@fulcrum8221 11 месяцев назад

Muy buen video!

@tucprogram 8 месяцев назад

Excelente. Muy bien explicado. Saludos. Nuevo subs.

@valentinrodriguez7716 Год назад

Me salvaste la vida

@ministroloco5550 8 дней назад

Gran tutorial, me encantó! gracias, una pequeña duda, cuando el usuario selecciona 3 productos del mismo y elimina, te elimina los 3, no hay forma de borrar solo 1? y ya si el usuario da clic 2 veces, borra 2 productos y si da clic 3 veces, borra los 3 productos

@mr.fabian8471 Год назад

Gracias

@simonkdsz6164 9 месяцев назад

el array allProducts que usas en 21:44 , en que momento lo llenas con valores o productos para nuestro caso??

@melotomoenplazos 2 месяца назад

Te debo mi curso ❤

@simonkdsz6164 9 месяцев назад

Hola como hicste en 11:00 para escribir .item y que luego se ponga en un div con un enter ??

@ManuGarciaM Год назад

Hola me sirvió mucho tu video, como se podria implementar el guardado de los productos del carrito con sesiones ? para que una vez iniciado o cerrado sesion se quede aguardado los productos del carrito , espero y me puedas orientar , gracias!

@programacionparaelmundo Год назад

Hola, lo que se me ocurre es guardar el array del carrito en un objeto que sea de la información de la sesión del usuario. Se podría probar con el localStorage o una base de datos. Pero a mi parecer esa podría ser la lógica

@simonkdsz6164 9 месяцев назад

en 29:30 es posible q se cumpla condicion de: find(item => item.id === product.id) y luego no se cumpla la segunda : map(item => item.id === product.id... ???

@TheEstebansanto Год назад

Muchas gracias!! muy bueno..pregunta........ y como seria la funcion para: en lugar de sacar toda la cantidad de cierto item , ir sacando de a una unidad?

@programacionparaelmundo Год назад

Hola, si quieres ayuda en alguna función específica puedes escribirme a Telegram y pasarme tu código para ayudarte

@diegohernandez-ct7qt Год назад

hola amigo me gusta el diseño y la forma como explicas muy bien el carrito de compras pero tengo varios errores no se si sera error mio me gustaría ver si me puede ayudar un poco gracias !

@programacionparaelmundo Год назад

Saludos, puedes escribirme a Telegram para ayudarte a profundidad. Está en la descripción

@jimmyroserovallejo Год назад

bueno una vez agregado al carrito, uno le daria comprar, como harias tu para guardarlos en una base de datos la compra con todos sus productos del carrito en el backend para que se guarde la orden de compra?

@programacionparaelmundo Год назад

Una alternativa fácil sería firebase pero sino se puede implementar un backend y una base de datos. Una buena opción sería el stack MERN

@jimmyroserovallejo Год назад

@@programacionparaelmundo si bro, efectivamente me puse a buscar y ya tengo una idea como hacerla, gracias por responder.

@jonathanromero3034 Год назад

en cuanto a las imagenes las puedo ingresar manualmente mediante la carpeta assets

@programacionparaelmundo Год назад

Si, se puede insertar otras imágenes manualmente. Solo hay que asegurarse de importarla correctamente y utilizarla

@Deus-lo-Vuilt Год назад

bro una consulta ,para entrar al producto para poder ver sus caracteristicas y asi del producto habria que hacerlo con react router?

@programacionparaelmundo Год назад

Así es. Un link dentro del carrito

@Deus-lo-Vuilt Год назад

@@programacionparaelmundo pero me refiero para visualizar el producto , tipo donde te lleva a la pagina independiente del producto para ver sus caracteristicas , un tipico slider y asi , tendria que usar la libreria entonces , he estado pensando como hacerlo

@matturibb1675 Год назад

@@Deus-lo-Vuilt Lo puedes hacer mas bien con un modal que recibe como parametros el objeto(producto) completo

@Deus-lo-Vuilt Год назад

@@matturibb1675 si algo así pensé , vale bro

@EstereoOutsider Год назад

6:33

@agustingiovine9676 2 месяца назад

no me deja crear el mismo archivo que el tuyo (al comienzo en powershell elegiste react react y a mi me aparece react y luego solo puedo selecionar typescript variantes y javascipt y sus variantes ) ¿como soluciono el problema ? voy atratar de hacerlo con typescript no se si es lo mismo. gracias

@programacionparaelmundo 2 месяца назад

Me imagino que te refieres a vite. Al iniciador. Puedes escoger javascript. Realmente eso no es muy relevante

@agustingiovine9676 2 месяца назад

@@programacionparaelmundo muchas gracias no lo sabia me había vuelto loco buscando soluciones!!