Actividad 1.

Desarrollo de un
front-end utilizando
React

Julian David Perez Forero

Contenido
Introducción ..................................................................................................................... 3

Componentes de React .................................................................................................... 3

Hooks ................................................................................................................................ 7

Vistas................................................................................................................................. 9

Conclusiones ................................................................................................................... 14

Referencias ..................................................................................................................... 14
Introducción
Una tienda e-commerce es un proyecto ideal para ser desarrollado utilizando la librería
ReactJS, en este caso, se decide tomar cómo inspiración la tienda mercado libre,
únicamente las vistas de lista de productos, búsqueda de productos, detalle de un
producto y formulario de compra. Además, se crea una barra de navegación con un
campo de texto cómo buscador. Por otra parte, se utilizaron tecnologías que permiten
un ágil y estructurado proyecto, cómo es el caso del super set TypeScript (TSX para la
creación de los archivos, permitiéndonos ser fuertemente tipados, proporcionando un
mejor intelliSense, sin dejar a un lado toda la funcionalidad que nos brinda JSX), SASS,
Ant Design, la metodología para construir y diseñar sistemas llamada Atomic Design,
entre otros.
Se crearon más de diez componentes de React, a su vez, se implementaron diferentes
hooks, varios propios de la librería y también un custom hook para el manejo del
formulario de compra.
La información que se visualiza en este proyecto se consume de una API pública que
ofrece mercado libre (ver referencia 1).
Cómo resultado se obtuvo un acercamiento y aprendizaje continuo acerca de cómo
organizar y planificar un proyecto de ReactJS, dejando la estructura básica
implementada para en la próxima actividad conectar rápidamente con un servicio
backend. El código del proyecto se puede visualizar en el repositorio de GitHub que se
encuentra en la referencia 2.

Componentes de React
Main.tsx: Contiene la declaración e implementación de ReactDOM, donde declara el
BrowserRouter y el componente principal App.
App.tsx: Contiene la implementación de las rutas que tiene el proyecto, haciendo uso
de la Liberia react-router-dom (/, /ítems, /items/:id, /items/:id/buy-cart).
Api/fetch.tsx: Funciones que permiten hacer las peticiones al servidor, si en un futuro
se quiere implementar alguna librería para ello, solamente se tienen que modificar las
funciones dentro de este archivo y no manipular todos los componentes que realizan
peticiones.
Components/Atoms/Breadcrumb: Componente que contiene el diseño de la migaja de
pan que se encuentra en todas las vistas de los productos del sitio. Usa el componente
breadcrumb de Ant Design. Los ítems se envían cómo propiedad para así permitir que
sea dinámico.

Components/Atoms/Button: En todos los sitios se utiliza este componente con el

diseño y configuración del botón. Usa el componente Button de Ant Design. La
configuración básica del mismo se envía cómo propiedad cuando este se invoca.
Components/Atoms/Divider: Componente de línea divisora. Usa el componente
Divider de Ant Design.

Components/Molecules/InputSearch: Campo de texto de búsqueda. Usa el

componente Autocomplete de Ant Design. Las opciones que despliega y el evento
onClick se envía cómo propiedad cuando se invoca.

Components/Molecules/ProductItem: Componente que almacena toda la información

relacionada a un producto para ser mostrado en las listas de búsqueda. Cómo propiedad
se le envía un objecto de tipo ProductI. Este objeto contiene toda la información que se
quiere mostrar de un producto, dichos datos provienen de la API de mercado libre.

Components/Organisms/Navbar: Contiene la barra superior amarilla con el logo y el

campo de búsqueda que se muestra en toda la aplicación.

Components/Organisms/ElementsNotFound: Muestra un mensaje de que no se

encontró ningún elemento en la lista.
Components/Templates/Helmet: Componente con toda la información relacionada a
las metas etiquetas que permiten una buena organización SEO para las vistas del
proyecto. Cómo propiedad se le envía un objeto de tipo ProductI.
Components/Templates/ProductsList: Contenedor que lista todos los productos a
mostrar, llamando al componente ProductItem por cada uno del producto encontrado.
Cómo propiedad se le envía un arreglo de objetos de tipo ProductI.

Components/Templates/App: Wrapper que contiene la división de las secciones del

sitio, se llama al componente navbar y dentro de una etiqueta main, cada una de las
páginas del sitio. Así solamente en un lugar tenemos el control del diseño de las vistas
del proyecto.
Services/FakeStoreService.tsx: Objecto que contiene las funciones servicio que se
conectan al servidor.
Services/FakeStoreService.utils.tsx: Interfaces que permiten agregar un tipado a las
variables de respuesta que obtienen las funciones que se encuentran dentro de
FakeStoreService.tsx.
Assets/styles/variables.scss: Archivo que contiene todas las variables relacionadas a
colores y dimensiones que serán utilizadas en las hojas de estilos a lo largo del proyecto.
Hooks
Hooks de React:
- useEffect: se utiliza en las siguientes páginas: Home, ProductDetail y
ProductSearchList.
- useState: se utiliza en las siguientes páginas: Home, ProductDetail y
ProductSearchList. Además, en los componentes: InputSearch y useForm.
Hooks de la librería react-router-dom:
- useNavigate: Se llama en el componente navbar y en la lista de productos, para
redireccionar al producto seleccionado. También cuando no se encuentra el
producto deseado el componente ProductDetail envía a la vista home.
- useParams: Permite capturar el id que se contiene en la ruta que visualiza un
detalle de un producto (ProductDetail).
- useLocation: Obtiene el texto a buscar que contiene la ruta cómo query param
dentro del componente ProductSearchList.
custom Hooks:
- useForm: hook personalizado el cual permite manipular la información
proveniente de un formulario. Contiene funcionalidades cómo almacenar, enviar
y cambiar el valor de un campo, validar los campos, limpiar los valores de los
campos, entre otros. Es valioso ya que permite utilizarse en múltiples
formularios, con opciones cómo tener la información almacenada en un solo
objeto, después de haber sido validada internamente. En la siguiente imagen se
puede observa el código de este custom hook.
Vistas
Home
Vista principal de la aplicación, por defecto carga la lista de productos obtenidos de la
API de mercado libre. Hace uso de diferentes componentes Navbar, Breadcrumb y
ProductList. Dentro de la misma página se realiza el consumo de un servicio que obtiene
la lista de productos, estos datos se almacenan en el hook useState.
Los diseños que se pueden visualizar son modificados directamente en los componentes
que se declaran. El componente Navbar tiene una altura de 60px, color de fondo #fff159.
Para dejar el logo al lado izquierdo del buscador, se implementó flex-box con un gap de
30px de separación entre los elementos. El logo tiene un ancho de 134px y un alto de
34px; el buscador tiene un ancho del 100% para ocupar todo el resto del espacio.
El componente ProductList tiene un color de fondo blanco, un borde redondeado de
10px, un margen horizontal de 10px, un padding en todas las posiciones de 16px y el
ancho máximo es de 1200px.
El componente ProductItem hace uso de flex-box para dejar los elementos
horizontalmente, cada uno tiene una altura de 252px y un gap de 20px de separación
entre los elementos. Los elementos son 3, el primero es la imagen del producto, el
segundo está conformado por el precio y el nombre, por último, la calificación y el id de
la categoría. El título del producto tiene un tamaño de 24px y el precio de 36px. Para la
puntuación de estrellas se hace uso del componente Rate de Ant Design, donde se le
pasa un valor decimal cómo propiedad para saber en cuanto porcentaje colorear las
estrellas.
Lista de búsqueda de productos
Vista cuando se quiere encontrar un producto por medio del buscador de la parte
superior. Hace uso de diferentes componentes Navbar, Breadcrumb y
ProductSearchList. Dentro de la misma página se realiza el consumo de un servicio que
obtiene la lista de productos que tienen en su título las palabras que se ingresan en el
buscador, estos datos se almacenan en el hook useState.
Los diseños que se pueden visualizar son modificados directamente en los componentes
que se declaran. El componente Navbar tiene una altura de 60px, color de fondo #fff159.
Para dejar el logo al lado izquierdo del buscador, se implementó flex-box con un gap de
30px de separación entre los elementos. El logo tiene un ancho de 134px y un alto de
34px; el buscador tiene un ancho del 100% para ocupar todo el resto del espacio.
El componente ProductSearchList tiene un color de fondo blanco, un borde redondeado
de 10px, un margen horizontal de 10px, un padding en todas las posiciones de 16px y el
ancho máximo es de 1200px.
El componente ProductItem hace uso de flex-box para dejar los elementos
horizontalmente, cada uno tiene una altura de 252px y un gap de 20px de separación
entre los elementos. Los elementos son 3, el primero es la imagen del producto, el
segundo está conformado por el precio y el nombre, por último, la calificación y el id de
la categoría. El título del producto tiene un tamaño de 24px y el precio de 36px. Para la
puntuación de estrellas se hace uso del componente Rate de Ant Design, donde se le
pasa un valor decimal cómo propiedad para saber en cuanto porcentaje colorear las
estrellas.

Aparte de esto, cabe recalcar que el buscador también genera una lista desplegable
automática que hace match con todas las búsquedas similares a las palabras que se
escriben en el campo de texto. Esta lista desplegable se obtiene gracias al componente
Autocomplete de Ant Design.
Detalle de un producto
Vista que permite visualizar la información de un producto seleccionado. Hace uso de
diferentes componentes Navbar, Breadcrumb y ProductDetail.
La imagen tiene una altura de 700px con 544px de ancho. Esta sección hace uso de flex-
box para poder separarse verticalmente con el otro componente que contiene el
nombre, precio y el botón de comprar. En la parte inferior se encuentra la descripción
del producto, con un color #666 y un tamaño de 12px.
Finalizar compra de producto
Esta vista contiene la parte final de este proyecto y es la información que el usuario tiene
que completar para que se realice su compra. Hace uso de diferentes componentes
Navbar, BuyCartForm y también una sección que muestra la información del producto.
Para mostrar la información del producto se utiliza flex-box para la dividir la información
horizontalmente, con una separación de 30px entre la imagen y el resto de información.
En el resto de la página se encuentra la información que el usuario tiene que brindar a
la plataforma para el correcto envío del producto. Esta sección hace uso de los
componentes Form, Form.Item y Input de Ant Design, cómo también el componente
Button del proyecto.
Conclusiones
Cómo conclusión, se obtuvo un acercamiento y aprendizaje continuo acerca de cómo
organizar y planificar un proyecto de ReactJS, utilizando diferentes tecnologías que lo
complementan y dejando la estructura básica implementada para en la próxima
actividad conectar rápidamente con un servicio backend. Siendo así un proyecto
enriquecedor para el conocimiento que se logra utilizar en el día a día laboral. El código
del proyecto se puede visualizar en el repositorio de GitHub que se encuentra en la
referencia 2.

Referencias

1. Mercado Libre, Developers Mercado Libre. Bienvenidos a Developers Mercado

Libre. https://developers.mercadolibre.com/
2. Repositorio de proyecto desarrollado. Proyecto e-commerce.
https://github.com/julianjp18/activity-one-frontend