Guía de Sistemas de Integración de

laboratorio Información aplicaciones Back end

Integración de aplicaciones Back end

Consumo de API Rest con React.
Tema 5

Objetivo del Integrar la aplicación React con API’s Rest utilizando los distintos
Laboratorio métodos HTTP.

Marco La mayoría de las aplicaciones de front-end necesitan

teórico comunicarse con un servidor a través del protocolo HTTP, para
descargar o cargar datos y acceder a otros servicios de back-
end.

Recursos a. Hardware
 Procesador: Core I5 6ta Generación 2.8 ghz.
 Memoria. Al menos 8 GB de RAM.
 Espacio en disco duro. Al menos 20 GB para la instalación
(algunas instalaciones requieren menos).

b. Software
 Eclipse.
 Postman.

1
______________________________________________________________________
Guía de Sistemas de Integración de
laboratorio Información aplicaciones Back end

Crea un nuevo proyecto

A continuación, crearemos un nuevo proyecto usando create-react-app. Entonces puede

cambiar a su directorio preferido y ejecutar este comando en su terminal.

Esto generará algunos andamios que necesita para que su aplicación React se ejecute lo
más rápido posible.

A continuación, ejecute la aplicación con el siguiente comando.

Esto abrirá automáticamente http: // localhost: 3000 en su navegador y obtendrá la página de

inicio predeterminada create-react-app.

Configuración del proyecto

El siguiente paso es modificar el archivo App.js ubicado en la carpeta src para que se vea
así.

2
______________________________________________________________________
Guía de Sistemas de Integración de
laboratorio Información aplicaciones Back end

Si se dio cuenta, nos deshicimos del logotipo de importación de './logo.svg'; e importar

'./App.css'; junto con JSX en el método render () porque no los necesitaremos en el
transcurso de este tutorial.
Configuración de bootstrap
A continuación, tenemos que vincular la CDN de bootstrap en el archivo index.html que se
puede encontrar en la carpeta pública.

Una vez hecho esto, representaremos una tarjeta de arranque en el archivo App.js al incluir
este fragmento en el método return ().

3
______________________________________________________________________
Guía de Sistemas de Integración de
laboratorio Información aplicaciones Back end

Si recargamos nuestra aplicación, los siguientes cambios reflejarán mostrando el nombre del
contacto, el correo electrónico y el eslogan en una tarjeta de arranque.

Alimentando datos dinámicos desde la API

La mayoría de las aplicaciones web modernas utilizan el protocolo REST para comunicarse
entre sí. Para lograr esto, los datos se envían como JSON (JavaScript Object Notation) a la
API. A su vez, la API devuelve una carga útil JSON que puede ser datos estáticos o
dinámicos. Nuestra aplicación analizará y mostrará los datos de una manera presentable,
haciéndolos atractivos para el usuario.

4
______________________________________________________________________
Guía de Sistemas de Integración de
laboratorio Información aplicaciones Back end

A continuación se muestra una respuesta JSON típica del volcado de la lista de contactos:

Creando un estado

Un estado es simplemente un objeto que contiene datos pendientes de ser procesados. Aquí
es donde almacenaremos la salida de la llamada a la API.

En el fragmento de arriba, hemos creado un estado para almacenar el resultado de nuestra

solicitud de API.
Llamar a la API

5
______________________________________________________________________
Guía de Sistemas de Integración de
laboratorio Información aplicaciones Back end

Para obtener nuestra lista de contactos, usaremos un método componentDidMount () en

nuestro archivo App.js. Este método se ejecuta inmediatamente nuestro componente está
montado y también haremos nuestra solicitud de API en ese método.

fetch ('http://jsonplaceholder.typicode.com/users') hará una solicitud GET al punto final.

Luego (res => res.json ()) analiza la salida a JSON,. then ((data) => {this.setState
({contactos: datos})}) establece el valor de nuestro estado en la salida de la llamada a la API
y finalmente .catch (console.log) registra cualquier error que recibamos en la consola.
Creando nuestro componente de contactos

A continuación, crearemos un componente para representar los resultados como tarjetas.

Para lograr esto, crearemos un componente creando una nueva subcarpeta llamada
components en el directorio src seguido de la creación de un archivo contactos.js en el
directorio de components ejecutando:

El contenido del archivo del componente contactos.js será el siguiente:

6
______________________________________________________________________
Guía de Sistemas de Integración de
laboratorio Información aplicaciones Back end

El método Contactos acepta el estado de los contactos que creamos anteriormente y luego
devuelve una versión mapeada del estado, que recorre la tarjeta de arranque para insertar el
nombre, el correo electrónico y la frase del contacto del contacto.
Representación del componente de contactos

El último paso de esta aplicación es renderizar nuestro componente en src / App.js. Para
hacer esto, tenemos que importar el componente a App.js.

Luego, en nuestro método de renderizado, tenemos que borrar todo lo que teníamos antes y
pasar nuestro componente junto con el estado de los contactos para que se renderice.

7
______________________________________________________________________
Guía de Sistemas de Integración de
laboratorio Información aplicaciones Back end

Ejecutando nuestra aplicación

Si aún no tiene la aplicación en ejecución, puede ejecutarla mediante el comando npm start.

Esto abrirá su navegador para que vea la aplicación o le muestre algunos errores si se
perdió algo. Puede visitar directamente accediendo a http: // localhost: 3000. Si el puerto
3000 ya está en usted, se le pedirá que cambie el puerto.

8
______________________________________________________________________
Guía de Sistemas de Integración de
laboratorio Información aplicaciones Back end

ACTIVIDAD VIRTUAL

 ¿Qué métodos HTTP existen?

 Crea un nuevo proyecto y consumir una API Rest en el método HTTP GET.
 En el mismo proyecto consumir una API Rest en el método HTTP POST
 En el mismo proyecto consumir una API Rest en el método HTTP PUT
 En el mismo proyecto consumir una API Rest en el método HTTP DELETE

9
______________________________________________________________________