Hola, te doy la bienvenida a este curso práctico de React.
Mi nombre es Stefania Aguilar, soy Senior Frontend Developer en La House
y también soy profe aquí en Platzi.
Y te voy a estar acompañando a lo largo de este curso
en donde vamos a hacer un e-commerce.
Vamos a poner en práctica muchísimos conocimientos en React.
¿Como cuáles? Como hooks, vamos a poner en práctica el estado,
tanto local como global con context.
También vamos a trabajar con props y con un montón de funcionalidades
que ya tiene JavaScript para poder hacer funcionar todo nuestro e-commerce.
Pero antes de comenzar, quiero mostrarte cuál es el resultado final,
eso que vamos a obtener a lo largo de este curso,
para que nos ilusionemos muchísimo y para que entendamos también
qué es lo que vamos a hacer clase tras clase.
Te presento Shopee, este va a ser nuestro e-commerce
que vamos a realizar en todo este curso.
Y aquí vamos a ver que tenemos un montón de productos.
Estos productos vienen de una API que es pública de Platzi.
Y una vez los tengamos acá, podemos hacer varias cosas.
Uno, filtrarlo por el título, por ejemplo, si colocamos la letra A,
él nos va a traer todas las coincidencias con esas letras
que vayamos colocando en este input.
Adicional, podemos también filtrar por categoría.
Entonces, si le damos clic aquí en Clothes,
vamos a ver inmediatamente cómo todos estos productos se muestran,
pero únicamente los que coinciden con Clothes.
Aquí, por ejemplo, todos los que coinciden con Electronics,
así sucesivamente.
También vamos a poder filtrar por categoría y también por título.
Entonces, por ejemplo, coloquemos la letra L, la letra A,
y mira que tiene que coincidir con este título
y también tiene que coincidir con la categoría.
Súper bien hasta ahí.
También en nuestro e-commerce podemos hacer lo siguiente,
podemos agregar a nuestro carrito,
y en este carrito podemos agregar más ítems,
uno, dos, tres, cuatro, cuando nosotros agregamos
este elemento de acá, cliqueable, va a cambiar
y ya no nos va a permitir agregar más de uno de esos elementos
al carrito.
También podemos hacer Checkout,
y en este Checkout nos va a salir toda la parte de My Order,
todo ese resumen de la última compra que hicimos,
y en la parte de atrás vamos a poder ver
todas las órdenes que hemos hecho en este e-commerce.
Por ejemplo, si le damos clic acá, nos debe mostrar nuevamente
esa compra que acabamos de hacer.
También tenemos un carrito de compras a este lado.
Si vamos, por ejemplo, a Shopping,
le damos clic a una de estas Cards,
nos va a mostrar también el detalle.
Entonces, esto es muy bueno porque aquí podemos revisar
el precio y un poco más de información sobre estos productos.
Aquí podemos hacer otro experimento
en donde podemos agregar estos elementos,
le vamos a dar Checkout,
vemos que en nuestro carrito de compras
se nos están incrementando el número
dependiendo de todos los productos que tengamos acá,
le vamos a dar en Checkout,
el total del precio va a ser cero,
y acá también este carrito de compras se pone en cero.
Tenemos nuevamente esta orden,
y mira que aquí nos va a mostrar debidamente
todo el resumen de esas órdenes que ya hemos hecho.
Entonces, esto es en resumen
todo lo que vamos a hacer en este curso,
y ahora veamos cuáles son los requisitos
para poder construir todo este e-commerce en este curso.
Los requisitos para poder hacer este e-commerce son los siguientes.
Primero, HTML y CSS para que podamos construir toda la UI.
También necesitamos JavaScript
para poder generar toda la parte de la lógica,
y adicional necesitamos tener ciertos conocimientos previos en React.
¿Esto es por qué?
Porque aquí vamos a hablar de hooks, vamos a hablar del contexto,
vamos a hablar de un montón de cosas.
Si todavía no tienes experiencia
o todavía no te sientes muy familiarizado o familiarizada con React,
recuerda que aquí en la cajita de recursos
te dejamos cursos para que puedas tomar previamente a este curso práctico.
También vamos a ver en este curso Tailwind CSS.
Así que también tenemos cursos aquí en Platzi sobre Tailwind,
aún así es una herramienta muy sencilla
para poder manejar estilos de forma muy rápida y fácil,
así que, por favor, también en la cajita de recursos
podrás encontrar toda esta información.
No siendo más, comencemos con la elaboración de este proyecto
que me emociona muchísimo,
así que nos vemos en la siguiente clase
en donde ya vamos a comenzar con toda la preparación de nuestro entorno
para poder crear este e-commerce.
Así que nos vemos en la siguiente clase.
Adicionalmente, te cuento que para obtener el certificado de este curso
puedes o presentar el examen
o también puedes mandarnos la URL de todo tu proyecto.
Yo te recomiendo muchísimo más esta última,
no solo para obtener el certificado,
sino porque, por supuesto, vas a poner en práctica todos los conocimientos
y adicionalmente puedes poner este proyecto en tu portafolio.
Así que, no siendo más, nos vemos en la siguiente clase
en donde vamos a comenzar con todo este tema de la instalación con Bit.