Conectar una API externa a un proyecto de React es uno de los pasos que separa una maqueta estática de una aplicación funcional. Aquí aprendes a integrar PokeAPI usando Axios y el hook useEffect, manejar la respuesta con estado y renderizar los datos en una lista de tarjetas, ideal si estás construyendo tu primera Pokédex.

¿Cómo preparar la maquetación antes de consumir la API?

Antes de tocar la API, conviene cerrar los detalles visuales para no mezclar problemas de estilo con problemas de datos.

El primer paso es crear una carpeta statics dentro de src y guardar ahí el logo en formato SVG. Luego se importa desde App.js con una línea sencilla:

js import logo from './statics/logo.svg'

Ese logo se coloca en una columna nueva con la etiqueta <img>, atributo alt y un span de 4 con offset de 10 para centrarlo. Para separar el logo del buscador, se agrega en el CSS un margin-bottom: 3rem siguiendo la convención del proyecto [01:30].

¿Por qué usar rem en lugar de px? Porque rem se escala con el tamaño base de la raíz del documento, lo que mantiene la coherencia visual y mejora la accesibilidad cuando el usuario cambia el tamaño de fuente.

¿Qué hace PokeAPI y cómo se consulta?

PokeAPI es una API pública gratuita que entrega información de Pokémon en formato JSON. Para esta Pokédex se usa el endpoint de resultados con dos parámetros: limit y offset.

El limit define cuántos Pokémon traer y el offset desde cuál empezar. Como solo interesa la primera generación, se fija el límite en 151 y se omite el offset [03:00].

• limit=151: trae únicamente los Pokémon originales.
• Sin offset: empieza desde el primero.
• Respuesta en response.data.results: array con nombre y URL de cada Pokémon.

Esa estructura de respuesta es clave porque define cómo accedes a los datos dentro del componente.

¿Cómo usar Axios y useEffect para traer los datos?

Axios es una librería que simplifica las peticiones HTTP en JavaScript. Se instala con un comando en la terminal:

bash npm install axios

Después se crea una carpeta api dentro de src con un index.js que centraliza las llamadas. Allí vive la función getPokemons, que hace un GET al endpoint y retorna directamente response.data.results:

js import axios from 'axios'

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

Esta función retorna una promesa, por eso se encadena .then para procesar la respuesta y .catch para capturar errores. Un detalle importante del flujo del video: un typo en catch rompió la ejecución y obligó a revisar la consola, recordatorio práctico de que los errores silenciosos suelen estar en la sintaxis [07:30].

¿Qué es useEffect en React? Es un hook que ejecuta efectos secundarios, como llamadas a APIs, después de que el componente se monta o cuando cambian sus dependencias.

Dentro de App.js se llama a la función con useEffect y un arreglo de dependencias vacío para que se ejecute solo una vez al montar el componente:

js useEffect(() => { const fetchPokemons = async () => { const result = await getPokemons() setPokemons(result) } fetchPokemons() }, [])

La función interna fetchPokemons es asíncrona porque usa await, y eso permite esperar la respuesta antes de actualizar el estado.

¿Cómo manejar el estado y pasar datos a los componentes hijos?

El hook useState guarda la lista de Pokémon que llega de la API. Se inicializa como un objeto vacío y se actualiza con setPokemons una vez resuelta la promesa.

Esa lista se pasa como prop al componente PokemonList, que itera sobre el array y renderiza un PokemonCard por cada Pokémon. Para que cada tarjeta muestre el nombre real y no el texto cableado Ditto, se pasa pokemon.name como prop y también como key:

jsx {pokemons.map(pokemon => ( <PokemonCard key={pokemon.name} name={pokemon.name} /> ))}

Dentro de PokemonCard, la prop name reemplaza el valor estático y cada tarjeta muestra el nombre dinámico que viene de PokeAPI.

¿Por qué se usa key al renderizar listas en React? Porque React necesita un identificador único por elemento para optimizar el renderizado y evitar errores cuando la lista cambia.

¿Qué buenas prácticas quedan al integrar una API en React?

Separar la lógica de la API en su propia carpeta mantiene el código mantenible y facilita reemplazar Axios por otra librería en el futuro.

• Centralizar peticiones en src/api/index.js para que los componentes no conozcan detalles de la URL.
• Usar useEffect con arreglo vacío cuando la llamada solo debe ejecutarse al montar.
• Devolver desde la función solo los datos útiles, no la respuesta completa de Axios.
• Capturar errores con .catch para evitar que una falla rompa la aplicación.

El siguiente paso lógico es sacar la lógica del estado fuera del componente con Redux, lo que prepara el terreno para escalar la Pokédex sin depender de useState en cada vista.

¿Ya integraste tu primera API con React? Cuéntame en los comentarios qué endpoint elegiste y cómo lo resolviste.