Integración de PokeApp en Proyecto con Axios y React

Clase 7 de 22 • Curso Profesional de React.js y Redux

Resumen

¿Cómo empezamos con la integración de PokeApp en nuestro proyecto?

Integrar una API en un proyecto puede ser un desafío, pero con las herramientas adecuadas y una comprensión clara, se convierte en un emocionante viaje de aprendizaje. En esta guía, vamos a abordar cómo integrar la API llamada PokeApp a nuestro proyecto utilizando Visual Studio Code como entorno de desarrollo principal.

¿Cómo añadimos un toque final a la maqueta?

Antes de sumergirnos en la integración de APIs, es esencial perfeccionar nuestra maqueta. Un detalle final puede marcar la diferencia en la interfaz de usuario. Para ello:

Crear una carpeta para archivos estáticos: En la carpeta source, crea una nueva llamada statics.
Agregar el logo: Descarga la imagen del logo proporcionada y colócala en la carpeta recién creada.
Importar y usar el logo: Desde el archivo app.js, importa la imagen:
```
import logo from 'statics/logo.svg';
```
Luego, agrégala a una nueva columna:
```
<imagen source={logo} alt="PokeDots" />
```
Ajustar el diseño: Añade espacio entre el logo y el buscador mediante CSS:
```
.app img {
    margin-bottom: 3rem;
}
```
Este margen sigue la convención elegida y asegura un espaciado consistente en el diseño.

¿Cómo podemos integrar la API PokeApp?

Ahora que nuestro diseño está perfeccionado, pasamos a la integración de la API PokeApp. Este proceso involucra varios pasos que incluyen la instalación de una librería, la configuración de funciones para llamar a la API, y la gestión de los datos recibidos.

Revisar la documentación de la API: Accede al link de resultados que contiene elementos clave para nuestro proyecto. Establece los parámetros de interés, por ejemplo, limitar la consulta a los 151 Pokémon de la primera generación, sin un offset.
Instalar Axios: Esta librería nos ayudará a manejar las peticiones HTTP. Detén temporalmente el servidor del proyecto e instala Axios:
```
npm install axios
```

Crear la estructura para las peticiones: En la carpeta source, crea una subcarpeta API y un archivo index.js. Aquí, declara una función para obtener los Pokémon:

import axios from 'axios';

export function getPokemons() {
  return axios.get('https://pokeapi.co/api/v2/pokemon?limit=151')
    .then(response => console.log(response.data.results))
    .catch(error => console.error(error));
}

Uso de useEffect para la llamada a la API: En el archivo app.js, configura useEffect para realizar la llamada a la API al montar el componente:

import { useEffect } from 'react';
import { getPokemons } from './API';

useEffect(() => {
  async function fetchPokemons() {
    const data = await getPokemons();
    console.log(data);
  }
  fetchPokemons();
}, []);

¿Cómo podemos mostrar los datos en la interfaz?

Una vez que hemos recibido la data correctamente, es tiempo de trabajar con ella dentro del componente de React.

Manejo del estado local: Usa el hook useState para almacenar los Pokémon obtenidos.
```
import { useState } from 'react';

const [pokemons, setPokemons] = useState([]);
```
Actualiza el estado con los datos obtenidos de la API.
Actualizar la lista de Pokémon: Configura la lista de Pokémon para que utilice el estado actualizado.
```
function PokemonList() {
  // Renderiza basado en el estado de pokemons
}
```
Pasar datos a los componentes: Asegúrate de que cada tarjeta (componente) de Pokémon reciba el nombre correcto:
```
function PokemonCard({ name }) {
  return <div>{name}</div>;
}
```

Con estos pasos, has integrado con éxito la API de PokeApp a tu proyecto, permitiendo la visualización de datos dinámicos. A medida que continúas construyendo, te animo a seguir explorando y ajustando para aprender más sobre el manejo de APIs y React. ¡El siguiente paso te llevará al emocionante mundo de Redux para una gestión de estado más avanzada!