NavegaLasRutas+Castillo

Proyecto Ludussados

Datos

• Alumna: Francisca Castillo
• Módulo: React
• Comisión: 94525
• Entrega: Preentrega N°2

Consigna

Implementa una herramienta de routing, la cual permitirá navegar a través de las diferentes vistas para tu tienda: catálogo principal de productos, catálogo de productos filtrados por categorías, y vista en detalle de un producto.

Crea la funcionalidad necesaria para que los usuarios puedan:

• Seleccionar desde el menú las distintas categorías disponibles.
• Visualizar el listado, filtrando según esa elección.

Objetivos:

• Implementar la funcionalidad de navegación entre las diferentes vistas utilizando enlaces y rutas.
• Desarrollar la navegabilidad básica de la aplicación, permitiendo navegar desde el catálogo al detalle de cada item.

Aspectos a Evaluar:

Convenciones, Navegabilidad, Componete Navbar, Componente ItemListContainer, Componente ItemDetailContainer

1. Respeta las consignas asignadas.
2. Separa según patrones de componentes contenedores/presentación.
3. Logra la navegabilidad completa implementando React Router.
4. Genera rutas dinámicas para el detalle y las categorías de productos, utilizando URL params.
5. Utiliza correctamente el componente Link para los enlaces y evitar reloads de la página.
6. Usa el hook useParams para leer los parámetros de la URL y el hook useEffect para generar renderizados al detectar cambios de categoría y/o itemId.
7. Presenta enlaces que permiten navegar hacia las diferentes categorías (ej: /category/remeras).
8. Logra que el componente NavBar esté siempre visible en todas las rutas de la aplicación.
9. Los enlaces no deben generar recargas de la página en el navegador.
10. Usa una promise para devolver todos los productos, o los de una categoría específica (según la categoría a la que se navega), utilizando el parámetro de la URL.
11. Implementa el componente ItemList como hijo de ItemListContainer.
12. Utiliza el método map para generar un listado de componentes Item e identifica los elementos generados con la prop "key".
13. Usa una promise para devolver un único producto específico (según al producto al que se navega), utilizando el parámetro del a URL.
14. Accede al parámetro "id" de la URL utilizando el hooks useParams.
15. Muestra como presentación el comopnente ItemDetail, y dentro de éste el componente ItemCount.

Consigna Pasada

Crea los primeros componentes de React, que funcionarán como piezas base en la construcción de tu e-commerce. Desarrolla una barra de navegación, debe contener los enlaces de navegación, logo de tu tienda y el widget del carrito de compras.

También, crea el componente Contenedor que a futuro mostrará el catálogo de productos, utilizando "props" para personalizarlo y enviar un mensaje de bienvenida

Objetivos:

• Comprender los conceptos básicos de React y su estructura de componentes.
• Crear las bases para la homepage del ecommerce

Aspectos Evaluados:

Convenciones, Componete Navbar, Componente CartWidget, Componente ItemListContainer

1. Respeta las consignas asignadas
2. Muestra el brandname de la tienda en NavBar
3. Muestra las categorías de los productos
4. Muestra el CartWidget
5. Muestra el ícono de carrito y una burbuja de notificación con un valor estático
6. Se renderiza debajo de NavBar y como hijo de App
7. Renderiza un texto que se le es asignado como props