Desafio1: Crear la APP utilizando el CLI

Consigna:

Crea una aplicación utilizando el CLI con el nombre de tu tienda, y ejecuta los comandos necesarios para instalar React, configurarlo y visualizarlo en tu navegador.

Aspectos a incluir en el entregable:

• Link al repositorio de github
• Dentro del repositorio, deberían encontrarse las carpetas y los archivos src, README.md y package.json, entre otros

Material de referencia:

Clase 2: INSTALACIÓN Y CONFIGURACIÓN DEL ENTORNO

Resumen:

• Se crea el repositorio del proyecto
• Se crea el branch feature/Desafio-01
• Se instala node.js - v16.13.0
• Se crea el proyecto de React utilizando create-react-app

Desafio2: Menú e-commerce

Consigna:

En el directorio de tu proyecto, crea una carpeta dentro de src llamada “components”, que contenga a NavBar.js para crear una barra de menú simple.

Aspectos a incluir en el entregable:

Crea una carpeta dentro de src llamada components que contenga a NavBar.js para crear una barra de menú simple, que tenga:

• Brand (título/nombre de la tienda)
• Un listado de categorías clickeables
• Incorpora alguna librería de estilos con bootstrap/materialize u otro de tu preferencia (opcional).

Material de referencia:

Clase 3: JSX Y WEBPACK

Resumen:

• Se instala Grommet como librería de UI del proyecto. Storybook
• Se instala icons-grommet como librería de iconos del proyecto.
• Se instala eslint y xo como linter del proyecto.
• Se instala lint-staged y husky.
• Se crea el fichero /components y dentro el componente Navbar.
• Se crea el fichero /assets y dentro /images donde se guardan las imágenes del proyecto.
• Se crea el fichero /utils donde se colocan archivos de utilería.

Desafio3: Crea tu landing

Consigna:

• Crea un componente CartWidget.js con un ícono, y ubícalo en el navbar. Agrega algunos estilos con bootstrap/materialize u otro.
• Crea un componente contenedor ItemListContainer.js con una prop greeting, y muestra el mensaje dentro del contenedor con el styling integrado.

Aspectos a incluir en el entregable:

• Parte 1: crea un componente CartWidget.js que haga rendering de un ícono Cart, e inclúyelo dentro de NavBar.js para que esté visible en todo momento.
• Parte 2: crea un componente ItemListContainer. Impórtalo dentro de App.js, y abajo de NavBar.js.

Material de referencia:

Clase 4: COMPONENTES I

Resumen:

• Se crea el componente CartWidget y se importa en el componente Navbar
• Se crea el componente ItemListContainer y se importa en el componente App, se pasa un mensaje por props
• Se instala la libreria PropTypes para manejar el tipado de las props del proyecto.

Desafio4: Contador con botón

Consigna:

• Crea un componente ItemCount.js, que debe estar compuesto de un botón y controles, para incrementar y decrementar la cantidad requerida de ítems.

Aspectos a incluir en el entregable:

• Componente ItemCount.js con los respectivos controles de la consigna.

A tener en cuenta:

• El número contador nunca puede superar el stock disponible
• De no haber stock el click no debe tener efecto y por ende no ejecutar el callback onAdd
• Si hay stock al clickear el botón se debe ejecutar onAdd con un número que debe ser la cantidad seleccionada por el usuario.

Detalle importante: Como sabes, todavía no tenemos nuestro detalle de ítem, y este desarrollo es parte de él, así que por el momento puedes probar e importar este componente dentro del ItemListContainer, sólo a propósitos de prueba. Después lo sacaremos de aquí y lo incluiremos en el detalle del ítem.

Material de referencia:

Clase 5: COMPONENTES II

Resumen:

• Se crea el componente ItemCount
• Se importa el componente ItemCount en ItemListContainer y se le pasan las props: stock y onAdd
• Se utiliza dos veces con diferentes valores de stock para corroborar la independencia de ambos componentes.

Desafío5: Catálogo con MAPS y Promises

Consigna:

• Crea los componentes Item.js e ItemList.js para mostrar algunos productos en tu ItemListContainer.js. Los ítems deben provenir de un llamado a una promise que los resuelva en tiempo diferido (setTimeout) de 2 segundos, para emular retrasos de red

Aspectos a incluir en el entregable:

• Item.js: Es un componente destinado a mostrar información breve del producto que el user clickeará luego para acceder a los detalles (los desarrollaremos más adelante)
• ItemList.js Es un agrupador de un set de componentes Item.js (Deberías incluirlo dentro de ItemListContainer del desafío 3)
• Implementa un async mock (promise): Usa un efecto de montaje para poder emitir un llamado asincrónico a un mock (objeto) estático de datos que devuelva un conjunto de item { id, title, description, price, pictureUrl } en dos segundos (setTimeout), para emular retrasos de red.

Material de referencia:

Clase 6: PROMISES, ASINCRONÍA Y MAP

Resumen:

• Se agrega el favicon de Citrix
• Se agrega un enfoque de token para el precio de los productos 😋
• Se crea el componente Item y el componente ItemList
• Se crea el fichero /mocks con el archivo data donde se encuentra el listado de productos.
• Se movieron las imágenes de los productos al fichero /mocks (las imágenes van a estar en la firebase al finalizar el desarrollo)
• Se importa el componente Item dentro del componente ItemList
• Se importa el componente ItemList dentro del componente ItemListContainer
• Se simula la carga de los productos del mock utilizando promesas en el componente ItemListContainer.
• Se comprimien las imágenes usando tinypng

Desafío6: Detalle del producto

PUNTO 1

Consigna:

• Crea tu componente ItemDetailContainer, con la misma premisa que ItemListContainer.

Aspectos a incluir en el entregable:

• Al iniciar utilizando un efecto de montaje, debe llamar a un async mock, utilizando lo visto en la clase anterior con Promise, que en 2 segundos le devuelva un 1 ítem, y lo guarde en un estado propio.

PUNTO 2

Consigna:

• Crea tu componente ItemDetail.js.

Aspectos a incluir en el entregable:

• ItemDetail.js, que debe mostrar la vista de detalle de un ítem incluyendo su descripción, una foto y el precio.

Material de referencia:

Clase 7: CONSUMIENDO API’S

Resumen:

• Se crea el componente ItemDetailContainer
• Se crea el componente ItemDetail
• Se importa el componente ItemDetail en ItemDetailContainer
• Se simula la carga de un producto del mock utilizando promesas en el componente ItemDetailContainer.
• Se crea el componente Spinner (opcional) y se usa en ItemDetailContainer y en ItemListContainer
• Se mueve la logica de handleIconByCategory en Item a un custom hook en el fichero /hook y en el archivo useLogoCategory
• Se implementa el useLogoCategory en Item, ItemDetail y Navbar

Desafío7: PRIMERA ENTREGA DEL PROYECTO FINAL

Consigna:

• Configura en App.js el routing usando un BrowserRouter de tu aplicación con react-router-dom

Aspectos a incluir en el entregable:

• Rutas a configurar

• ‘/’ navega a <ItemListContainer />
• ‘/category/:id’ <ItemListContainer />
• ‘/item/:id’ navega a <ItemDetailContainer />

• Links a configurar

• Clickear en el brand debe navegar a ‘/’
• Clickear un Item.js debe navegar a /item/:id
• Clickear en una categoría del navbar debe navegar a /category/:categoryId

• Para finalizar integra los parámetros de tus async-mocks para reaccionar a :itemId y :categoryId ¡utilizando efectos y los hooks de parámetros que vimos en clase! Si