Scribd
Cargar
67 vistas21 páginas

React - Componentes - Fetch Api

Este documento describe cómo crear una aplicación de búsqueda de imágenes utilizando React y consumiendo la API de Giphy. Primero se crea un proyecto de React y se instalan las dependencias necesarias como React Router DOM. Luego se crean las pantallas principales y el enrutador. Más adelante se agrega una barra de navegación y se consume la API de Giphy para mostrar las imágenes en tarjetas. Finalmente, se prueba la aplicación para verificar que funcione correctamente la búsqueda y visualización de imágenes

Cargado por

Juan Sebastian Useche
Derechos de autor
© © All Rights Reserved
Nos tomamos en serio los derechos de los contenidos. Si sospechas que se trata de tu contenido, reclámalo aquí.
Formatos disponibles
Descarga como PDF, TXT o lee en línea desde Scribd
67 vistas21 páginas

React - Componentes - Fetch Api

Este documento describe cómo crear una aplicación de búsqueda de imágenes utilizando React y consumiendo la API de Giphy. Primero se crea un proyecto de React y se instalan las dependencias necesarias como React Router DOM. Luego se crean las pantallas principales y el enrutador. Más adelante se agrega una barra de navegación y se consume la API de Giphy para mostrar las imágenes en tarjetas. Finalmente, se prueba la aplicación para verificar que funcione correctamente la búsqueda y visualización de imágenes

Cargado por

Juan Sebastian Useche
Derechos de autor
© © All Rights Reserved
Nos tomamos en serio los derechos de los contenidos. Si sospechas que se trata de tu contenido, reclámalo aquí.
Formatos disponibles
Descarga como PDF, TXT o lee en línea desde Scribd

3.

React - Componentes - Fetch Api

Lenguaje de Programación Avanzado I - Tutor Mario Espinosa


Registrarse,
crear una
nueva APP
Copiar el
API KEY
https://developers.giphy.com/docs/api/endpoint#search

End Point: api.giphy.com/v1/gifs/search

Realizar la
prueba del
Endpoint
utilizando
POSTMAN
Crear nuevo proyecto

npx create-react-app searchimages

cd searchimages

npm install react-router-dom

npm start
Eliminar archivos no requeridos
Creación de Pantallas (HomeScreen y SearchScreen)
Crear el Router (Navegacion en una SPA)
Utilizar el Router en el archivo index.js
Redireccionar Rutas Desconocidas
Instalar Bootstrap (CDN)

https://getbootstrap.com/docs/4.5/getting-started/introduction/
Navbar

https://getbootstrap.com/docs/4.5/components/navbar/
Navbar con React-Router-Dom
import { Link, NavLink } from 'react-router-dom'

<NavLink
activeClassName="active"
className="nav-item nav-link"
exact
to="/"
>
Home
</NavLink>

https://getbootstrap.com/docs/4.5/components/navbar/
Incluir NavBar en el Router
Resultado
Búsqueda de imágenes
Consumir el API de imágenes
Nuevo componente para mostrar las imágenes

https://getbootstrap.com/docs/4.0/components/card/
Invocar al nuevo componente
Invocar al nuevo componente

Recorre el
array
Adecuar el componente tarjeta para mostrar las imágenes
Resultado

También podría gustarte