Desarrollo de un front-end utilizando react

DESARROLLO DE UN FRONT-END UTILIZANDO REACT

        Juan Carlos Muñoz Castañeda

        Junio 2023.

Fundación Universitaria Internacional de la Rioja

Especialización en Ingeniería de Software

Desarrollo de Aplicaciones WEB

Tabla de Contenidos

INTRODUCCION        3

COMPONENTES DE REACT        5

HOOK UTILIZADOS        7

CUSTOM HOOK        8

VISTAS        9

CONCLUSION        11

BIBLIOGRAFÍA        12

INTRODUCCION

        Con el auge de un lenguaje de programación como JavaScript se inicia una etapa en donde las páginas WEB adquieren mayor dinamismo.

El realizar un despliegue de una página requiere la combinación lenguaje de etiquetado como HTML, un manejador de estilos como CSS y la lógica y dinámica de la página manejada con un lenguaje de programación como JavaScript.

Un fichero con extensión HTML es leído e interpretado por el navegador y dicho archivo permite la escritura de HTML, CSS y JavaScript en el mismo fichero.

Para un mejor mantenimiento del código se comenzó a adoptar ficheros por separado, el etiquetado (ficheros HTML) encargados de la muestra de elementos en el navegador, Ficheros CSS en donde está la estructura de diseño de cada elemento o etiqueta del HTML y la lógica y dinámica en Ficheros JS.

Para hacer mantenible el código de las aplicaciones WEB , comienzan a llegar los Frameworks de JavaScript tales como Angular, Vue y React, en donde vuelven a juntar al menos el código HTML junto con código JS en un solo modulo conocidos como componentes, los cuales por su estructura pueden ser reutilizables conforme al diseño, los cuales aunque usando JavaScript o (TypeScript exclusivo para Angular), también poseen objetos, métodos y propiedades que no solo hacen interactiva la página sino también mas dinámico el desarrollo de las misma.

La presente Aplicación para esta Asignatura fue realizada en React en su versión 16 y desplegada para su entorno de desarrollo en Vite 4 (similar Create-React-App).

Se utilizo la API de http://openlibrary.org/ en donde se pueden encontrar libros para lectura online. La API solo se usó para listar primero 10 libros encontrados al ingresar una palabra clave o parámetro a manera de ejercicio, su portada en caso de encontrarse, mostrar el autor, año de publicación e ISBN.

Adicionalmente como Ingeniero Catastral y Geodesta decidí colocar una simulación de hipotéticas librerías en donde se encontraría la ubicación del libro, las mismas mostradas en una salida cartográfica cuyo mapa o mapas  base es propiedad y distribución libre por parte de  https://openlayers.org , desplegadas con ayuda de la librería “Leaflet” https://leafletjs.com , que nos permite crear mapas geográficos dinámicos en los cuales podemos navegar y desplazarnos, cuya profundización de utilidad la desarrollo más adelante en el capítulo de componentes.

A manera de valor agregado, el ejercicio se desplego en un hosting compartido en el cual se puede acceder a http://bookstore.geovisor.online para ver la aplicación en producción y también al repositorio en donde lo aloje en GitHub https://github.com/juancmu/bookFinder.git

COMPONENTES DE REACT

1. APILIBRARY: Este componente es el componente principal de la lógica, se encarga de recibir el parámetro de búsqueda desde el componente FINDER en el cual se encuentra el input, realizando el llamad0 a la API recibiendo el JSON, retornando los mensajes de coincidencia o no conforme al parámetro ingresado y enviando la información recibida por la API hacia el componente hijo BOOKLIST.
2. Si bien este componente es el principal el cual hace la primera conexión con la API, hay otros componentes que veremos más adelante, que también realizan peticiones a la API.
3. MAIN: encargado del manejo de las rutas mediante REACT-ROUTER así como el envió de la renderización al div “root” del index de despliegue.
4. NAVBAR: Como su nombre lo índice, maneja el panel de navegación con 4 vista, la cual la primera es el index, INICIO que retorna al listado de libros de búsqueda inicial, INFO en donde coloco los datos de información genéricos y REPORTE en donde devuelve el PDF de este informe.
5. FINDER: es el componente compuesto por un Input que de encarga de recoger el parámetro de búsqueda y enviarlo a APILIBRARY para que realice la búsqueda a la API.
6. BOOKLIST: este componente recibe la lista de libros encontrados, y también realiza la búsqueda de la portada de cada libro dentro de la mismo API, es decir, este componente también realiza una búsqueda a la API en el link provisto por OpenLibrary, el cual real1iza esta búsqueda por ID, no todos los libros tienen portada almacenada, por el caso no encontrarla , devuelve una portada de no encontrada por defecto, luego de tener esta información, realiza el llamado al componente BOOK que es el encargado de mostrar la información encontrada por cada libro.
7. BOOK: este componente es el que despliega la portada, Titulo, Autor, Año de publicación e ISBN de cada libro que recibe y es reutilizado por BOOKLIST para la vista general de todos los libros encontrados.
8. BOOKID: este componente es llamado cuando el usuario hace click en el libro deseado recibiendo el id del libro y realizando la búsqueda a la API para retornar de nuevo la información y la portada, mostrando como resultado la portada, el titulo y la descripción, que en caso de no encontrarla también retorna valores por defecto.

Adicionalmente en este componente realiza el llamado del componente MAPS que se encarga de mostrar un mapa geográfico que describo en el siguiente componente.

1. MAPS: es llamado por el componente BOOKID, y despliega solo a manera de ejercicio la ubicación de las posibles tiendas donde se puede encontrar el libro disponible. Esta información geográfica desplegada gracias a la librería LEAFLET, es aleatoria y no esta vinculada con la información de la API, solo se usa para darle un valor de integración al ejercicio de aplicación y para usar a amas detalle temas del Hook UseState.
2. LOADER: este componente muestra un objeto Canvas mientras la aplicación realiza la búsqueda a la API y retorna los resultados a los componentes destino.
3. REPORT: si bien fue realizado con un componente, este solo es invocado cuando en el NAVBAR se hace click en el REPORTE y carga el pdf en otra pagina de este informe anexo.

HOOK UTILIZADOS

1. USEEFFECT: este hook se usa cuando se realiza una consulta a la API esperando de manera asíncrona la información y retornando el componente requerido, montando el componente, actualizándolo y desmontando cuando sea requerido.
2. USESTATE: usado para cambiar el estado de algunas variables y objetos dentro de los componentes de la aplicación, como ejemplo se uso este en el componente MAPS, para cambiar el estado de las coordenadas en donde esta ubicada la tienda, cambiando la posición del arreglo en donde están estas coordenadas y el nombre de la tienda.

Igualmente cambia el parámetro por defecto de búsqueda cuyo valor inicial es “programación” y el hook es activado cuando se realiza la búsqueda desde el componente FINDER enviando el parámetro a APILIBRARY.

...