Desarrollo de un front documentacion

Desarrollo de un Front-End utilizando React

Tienda de zapatos deportivos online.

Integrantes:

1

2

3

4

Especialización en Ingeniería de software

Desarrollo de Aplicaciones WEB – UNIR

Profesor xxxx

Fecha 07 de noviembre de 2022

Índice

Índice        2

1.        Introducción        3

2.        Componentes de React:        3

3.        Hooks utilizados        4

4.        Vistas        5

5.        Conclusiones        5

6.        Referencias bibliográficas        5

1. Introducción

Se hará una introducción al contenido de la memoria, indicando en primer lugar qué tipo de aplicación se ha decidido construir y por qué motivos.

Teniendo en cuenta los requerimientos para el desarrollo de la primera actividad que consiste en desarrollar un Front-End utilizando React; los miembros del equipo decidieron construir un sitio web de comercio electrónico, exactamente para el comercio de zapatos deportivos; esto a fin de poder aplicar lo estudiado en los cinco primeros temas vistos en clase. En la construcción de la aplicación se usó los lenguajes estudiados como lo son HTML, CSS y JavaScript, además de utilizar la librería REACT para la creación de interfaces en la web.

La página de comercio electrónico de zapatos como tarea principal nos ofrece una gran cantidad de elementos (zapatos) para ser ofrecidos mediante un catálogo dentro del cual nos arroja una marca, precio del producto, imagen del producto, referencia del producto, entre las principales; la página tiene los atributos básicos de cualquier tienda como los son su presentación mediante un “nombre de empresa, un buscador de productos y un carrito de compras el cual permite interactuar frente a cantidad de producto y valor a pagar por estos.

1. Componentes de React

Se listarán y explicarán brevemente todos los componentes de React que forman parte de la solución desarrollada

En el desarrollo de la aplicación se utilizaron los siguientes componentes:

• Inicio: Presentación de la “empresa” de comercio electrónico.
• Productos: Componente padre que contendrá los productos con sus detalles.
• Lista de Productos: Visualizar las imágenes de los productos disponibles.
• Router: Componente responsable de renderizar un componente en función de la ruta URL que tenemos en nuestro navegador.
• Switch:
• Paginas:
• Buscador de producto: a fin de interactuar con los productos, a fin de buscar algún producto en particular.
• Botón “vista”: ejecuta la función de vista.
• Botón “compra”: ejecuta la función de la compra.
• Carrito de compra: sita de los artículos a comprar.
• DataProvider:

1. Hooks utilizados

Se listarán todos los hooks utilizados en la solución desarrollada, indicando en qué componente se han utilizado. Además, se incluirán aquí los hooks personalizados que se hayan creado, indicando por qué son necesarios y el valor que aportan a la solución.

• useState:
• useEffect: nos ayuda a aprovechar las cargas del proyecto para obtener los productos al momento de recargar la página.
• useContext: para manejar los estados globales del proyecto.

1. Vistas

Se mostrarán capturas de pantalla del Front-End desarrollado, describiendo brevemente su contenido y haciendo énfasis en los estilos CSS que se hayan utilizado.

...