Asignatura Datos del alumno Fecha

Desarrollo Apellidos: Molina León

15/05/2023
WEB Full Stack Nombre: José Luis

Actividad 1. Desarrollo de un
Front-End utilizando React

niversidad Internacional de La Rioja (UNIR)

1
Actividades
 Asignatura Datos del alumno Fecha
Desarrollo Apellidos: Molina León
15/05/2023
WEB Full Stack Nombre: José Luis

Tabla de contenido

1. Introducción. 2
2. Estructura del proyecto 3
3. Componentes de React 4
4. Hooks utilizados: 5
5. Rutas 6
6. Vistas 7
7. Publicación del sitio WEB 12
8. Conclusiones 12

1. Introducción.

En este informe se realiza el desarrollo Front-End de una página WEB haciendo uso de la librería
React. El desarrollo se divide en la creación de las rutas de la página, así como de vistas, y
componentes funcionales que se reutilizan en el proyecto. Se hace uso además de hooks de React
como de un custom hooks, el mismo que nos permite tratar la data de formularios, así como validar
errores.

La temática escogida para la página Web es la de una tienda online en donde se listan los productos
y el usuario puede agregar, quitar o eliminar productos de su carrito de compras; adicionalmente se
cuenta con un menú para administrar los productos disponibles que servirá para el usuario
administrador.

Debido a que no se usa una base de datos como tal, se configura un archivo .ts en donde se tiene un
niversidad Internacional
objetodeque
La Rioja (UNIR)la
guarda data y que se importa al iniciar el aplicativo, la data se guarda en el local
storage en el caso de no tener data, cas contrario se carga directamente del local storage. Se
desarrolla una tienda online por la necesidad actual de venta en línea lo que ayuda en gran medida a
emprendedores, además de ayudar a expandir sus clientes.

2
Actividades
 Asignatura Datos del alumno Fecha
Desarrollo Apellidos: Molina León
15/05/2023
WEB Full Stack Nombre: José Luis

2. Estructura del proyecto

El proyecto se compone de un Header: en la parte izquierda se tiene un botón de acción para

mostrar o comprimir el side bar, cuando se comprime se muestran únicamente los íconos. También
se tiene el text MyApp que lleva al componente principal en el que se listan todos los productos. En
la parte derecha se tiene la acción para mostrar u ocultar la información de perfil como se muestra
en la ilustración 1.

Ilustración 1. Header, side bar y perfil

Para tener una mejor organización del proyecto se creó la siguiente estructura:
- Assets: En donde se almacenan todos los recursos de imágenes del proyecto.
- Components: En donde se tienen los componentes reutilizables que se utilizan dentro del
proyecto.
- Context: Se guarda el archivo Parameters.tsx que guarda la información de perfil de usuario
en todo el proyecto.
- Database: En donde se tienen las funciones necesarias para simular un CRUD para listar,
agregar, editar productos, así como para manejar el carrito de compras.
- Hooks: En donde se tiene el custom hook utilizado para administrar los formularios del
niversidad Internacional de La Rioja (UNIR)
proyecto.
- Layouts: En donde se tiene las vistas del proyecto que se incluyen en App.tsx.
- Style: En donde se tiene el archivo de estilos del proyecto para las diferentes vistas. En el
caso del proyecto actual se instaló boostrap para los estilos.

3
Actividades
 Asignatura Datos del alumno Fecha
Desarrollo Apellidos: Molina León
15/05/2023
WEB Full Stack Nombre: José Luis

- Utils: En donde se tiene un archivo que exporta una función de validación para los errores a
mostrar en los formularios del proyecto y un archivo de interfaces.

3. Componentes de React

Para la implementación del proyecto se crearon 9 componentes reutilizables, a continuación de

describen brevemente cada uno de ellos:
- CustomButtonIcon: Botón boostrap con un ícono configurable
- CustomImageInput: Componente para selección de imagen que retorna la imagen en
formato base64 de forma que pueda ser guardado en el local storage para mostrarlo en las
tarjetas de productos.
- CustomInput: Input configurable que permite devolver el valor y configurar el estilo del
elemento.
- CustomPhoneInput: Input para ingreso del número de celular personalizado con la
dependencia react-phone-input-2/lib/style.css, lo que permite agregar el código de país.
- CustomEditProduct: Card con la información del producto con botones para agregar, restar
productos del carrito de compras, también permite emitir el evento al componente padre
para eliminar el producto del carrito de compras.
- CustomSelect: Input de tipo select con las categorías a los que pertenecen los productos.
- CustomTextArea: Text área configurada con estilos de boostrap que emite la data al
elemento padre.
- ListProducts: Componente en donde se tiene un input para buscar los productos ya sea por
nombre, tipo y empresa a la que pertenece. Se dispone de un botón para buscar y map de la
lista de productos disponibles.
- deListProductsEdit:
niversidad Internacional La Rioja (UNIR) Similar al componente anterior diseñado para ser usado por el usuario
administrador, se dispone de un elemento de búsqueda, un botón de búsqueda, y un botón
para agregar productos. Se lista mediante un map los productos disponibles en la tienda.

4
Actividades
 Asignatura Datos del alumno Fecha
Desarrollo Apellidos: Molina León
15/05/2023
WEB Full Stack Nombre: José Luis

4. Hooks utilizados:

Para la implementación del sistema se hace uso de los hooks: useState, useEffect, useRef,
usseContext.

- useState: Se utilizan en los componentes: AllProductos, Config, Header, Hogar, Ropa,

ShoopingCart, SideBar, Tecnologia. Se utiliza para mantener el estado de producto, para la
búsqueda de productos, en el header se usa para obtener el tamaño de la ventana para que
el sitio se adecue a pantallas de celular. Para el manejo de banderas al mostrar el sidebar,
entre otras funcionalidades.
- useEffect: Se utiliza en los siguientes componentes: App para detectar la redimensión de la
ventana, en el customHook, en los componentes AllProduct, belleza, ropa, tecnología,
hogar, config, Edit, etc. Para obtener la data de productos al mostrar una nueva vista. En los
componentes de perfil para obtener la información del usuario desde el local storage.
- useRef: Se utiliza en el componente header para referenciar el dropdown del perfil de
usuario, se utiliza para ocultar la información de usuario al hacer click fuera del elemento.
- useContext: Se utiliza en los componentes de perfil para mantener la información de
usuario actualizada en todo el proyecto.

4.1 CustomHook: customUseForm

Se crea un hook que permite administrar el estado de un form dentro de React, como entrada del
custom hoy se tienen el estado inicial de un formularo, una función callback que se llama cuando el
formulario es válido, una función de validación que toma los valores del formulario y mediante un
for sedeanaliza
niversidad Internacional cada
La Rioja (UNIR) campo para determinar si los campos están vacíos o si no cumplen con el
formato. La salida el custom hook devuelve los valores del formulario, los errores detectados, una
función handleChange que se llama desde el componente padre para establecer los valores de los
inputs, una función handleSubmit para obtener la información del form, la función handleReset
para limpiar los valores del formulario, hangleChangeImage para establecer el valor en base 64 del

5
Actividades
 Asignatura Datos del alumno Fecha
Desarrollo Apellidos: Molina León
15/05/2023
WEB Full Stack Nombre: José Luis

input de imagen, y una función setValues que actualiza todos los valores del formulario, está
función en especial se utiliza en la vida te edición de productos para cargar la data inicial.

Ilustración 2. Uso del customHook

5. Rutas

En el componente App.tsx se establece las rutas de la tienda online para visualizar las vistas del
aplicativo como se muestra en la ilustración 3. Se tiene una ruta para mostrar el perfil, una ruta
para el componente principal en donde se listan todos los productos, rutas hijas para mostrar los
productos por categoría, una ruta para mostrar los productos existentes y su configuración, rutas
hijas para agregar o editar productos, entre otras funcionalidades.

niversidad Internacional de La Rioja (UNIR)

6
Actividades
 Asignatura Datos del alumno Fecha
Desarrollo Apellidos: Molina León
15/05/2023
WEB Full Stack Nombre: José Luis

Ilustración 3. Rutas del aplicativo

6. Vistas

Se baso el diseño del aplicativo en los sitios para ventas de productos, en donde se dispone de un
header, un sidebar y vistas. La funcionalidad del header se describió en secciones anteriores por lo
que se describe la funcionalidad del side bar.

6.1 Sidebar:

El sidebar se muestra de forma dinámica pasando un array de menús y submenús con sus íconos y
rutas de redirección. Está configurado con el estilo position fixed de forma que se pueda acceder
desde todo el aplicativo. Los estilos se definen en los etilos personalizados.

niversidad Internacional de La Rioja (UNIR)

7
Actividades
 Asignatura Datos del alumno Fecha
Desarrollo Apellidos: Molina León
15/05/2023
WEB Full Stack Nombre: José Luis

Ilustración 4. Sidebar

6.2 MyApp:

El componente principal es el home en donde se muestran todos los productos disponibles que el
usuario final puede agregar a su carrito de compras, como se muestra en la ilustración 4. Se tiene
un botón de acción para agregar productos. En la parte superior del componente se cuenta con un
input de búsqueda que permite filtrar los productos por nombre, tipo y empresa.

niversidad Internacional de La Rioja (UNIR)

Ilustración 5. Vista principal

6.3 Carrito de compras:

8
Actividades
 Asignatura Datos del alumno Fecha
Desarrollo Apellidos: Molina León
15/05/2023
WEB Full Stack Nombre: José Luis

Cuando se da click en botón de agregar al carrito de compras se crea un array con el id del producto
y se agrega la lista de productos como su cantidad en el local storage, al acceder al menú de carrito
de compras se puede observa los productos con botones para agregar, reducir la cantidad de
productos. También se tiene la opción para eliminar el producto del carrito de compras. En la parte
inferior se tiene acciones para terminar la compra que en el presente proyecto no se tiene
implementado, y la opción de limpiar el carrito de compas.

Ilustración 6. Carrito de compras

6.4 Configuración:

La vista de configuración permite listar todos los productos que se han ingresado, aunque no se
tenga en existencia, es decir con cantidad 0, en el menú principal solo se muestran los productos
disponibles. Como se muestra en la figura 7, se dispone de un input para buscar, un botón para
agregar y en la parte baja del card se tiene un botón para editar los productos disponibles.
niversidad Internacional de La Rioja (UNIR)

9
Actividades
 Asignatura Datos del alumno Fecha
Desarrollo Apellidos: Molina León
15/05/2023
WEB Full Stack Nombre: José Luis

Ilustración 7. Configuración de productos

Al hacer click en el botón de agregar se redirige a la ruta /config/add en donde se tiene un

formulario para agregar productos y el botón de editar redirige a la ruta config edit para su edición.

niversidad Internacional de La Rioja (UNIR)

Ilustración 8. Formulario para agregar productos.

El formulario de edición mediante el hook useEffect trae la información del producto tomando el
valor de id del producto de la ruta.

10
Actividades
 Asignatura Datos del alumno Fecha
Desarrollo Apellidos: Molina León
15/05/2023
WEB Full Stack Nombre: José Luis

Ilustración 9. Edición de producto.

6.7 Perfil:

Desde el header se despliega la información de perfil de usuario en donde se dispone de un botón

que nos lleva al formulario para ingresar los datos de usuario como se muestra en la ilustración 10.

niversidad Internacional de La Rioja (UNIR)

Ilustración 10. Perfil

11
Actividades
 Asignatura Datos del alumno Fecha
Desarrollo Apellidos: Molina León
15/05/2023
WEB Full Stack Nombre: José Luis

7. Publicación del sitio WEB

Una vez concluido el desarrollo del aplicativo se publicó el sitio mediante la plataforma de
desarrollo netlify, se usa netlify ya que facilita la creación de sitios web y aplicaciones web
modernas. Para el presente proyecto se hizo uso de GitHub para su publicación, se adjunta el
enlace al sitio: https://migirasolstore.netlify.app/

8. Conclusiones

En este trabajo se realizó el desarrollo Front-End de una tienda online haciendo uso de la librería
React, para su desarrollo se hace uso de los principales elementos aprendidos en clase como son
elementos HTML, CSS, Hooks, etc. Para su desarrollo se empezó por crear los componentes
principales, convirtiendo al código repetido en componentes funcionales. En este proyecto, se
implementó una tienda en línea con la funcionalidad de agregar, quitar y eliminar productos del
carrito de compras, además de la administración de productos para el usuario administrador.
Asimismo, se ha implementado un custom hook para la gestión de formularios y validación de
errores. Es importante destacar que el proyecto se ha estructurado de forma organizada y modular,
permitiendo una fácil escalabilidad y mantenibilidad del mismo. Además, se ha utilizado Bootstrap
para los estilos, lo que ha permitido una interfaz visual atractiva y adaptativa a diferentes
dispositivos.

niversidad Internacional de La Rioja (UNIR)

12
Actividades