Consumir la PokeAPI con React y Axios usando Vite paso a paso

Aprender a consumir APIs REST es esencial para cualquier desarrollador React. En este tutorial veremos cómo usar Axios para conectarnos a la PokéAPI, obtener datos de Pokémon y mostrarlos en nuestra aplicación React, utilizando Vite.

📌 Requisitos previos

Antes de comenzar asegúrate de tener:

• Node.js y npm instalados.
• Conocimientos básicos de React (componentes, props, state).
• Conexión a Internet para consumir la API pública PokéAPI.

1. Crear una aplicación React con Vite

Primero, creamos un nuevo proyecto React usando Create React App:

npm create vite@latest react-pokemon
cd react-pokemon
npm install
npm run dev

Esto iniciará tu aplicación en http://localhost:5173.

✅ Vite es rápido y ofrece hot reload instantáneo.

2. Instalar Axios

Axios es una librería muy popular para hacer solicitudes HTTP.

npm install axios

3. Crear un componente para consumir la PokéAPI

Creamos un componente Users.js que obtendrá datos de usuarios de JSONPlaceholder:

import { useState, useEffect } from 'react';
import axios from 'axios';

export default function PokemonList() {
  const [pokemon, setPokemon] = useState([]);
  const [loading, setLoading] = useState(true);
  const [error, setError] = useState(null);

  useEffect(() => {
    axios.get('https://pokeapi.co/api/v2/pokemon?limit=10')
      .then(response => {
        const fetches = response.data.results.map(p =>
          axios.get(p.url).then(res => res.data)
        );
        Promise.all(fetches).then(results => {
          setPokemon(results);
          setLoading(false);
        });
      })
      .catch(err => {
        setError(err.message);
        setLoading(false);
      });
  }, []);

  if (loading) return <p>Cargando Pokémon...</p>;
  if (error) return <p>Error: {error}</p>;

  return (
    <div>
      <h2>Lista de Pokémon</h2>
      <ul style={{ listStyle: 'none', padding: 0 }}>
        {pokemon.map(p => (
          <li key={p.id} style={{ marginBottom: '20px' }}>
            <h3>{p.name.charAt(0).toUpperCase() + p.name.slice(1)}</h3>
            <img src={p.sprites.front_default} alt={p.name} />
            <p>Altura: {p.height} | Peso: {p.weight}</p>
          </li>
        ))}
      </ul>
    </div>
  );
}

4. Integrar el componente en la App

En App.js, importamos y usamos nuestro componente Users:

import PokemonList from './PokemonList';

export default function App() {
  return (
    <div>
      <h1>Consumir la PokéAPI con React y Axios</h1>
      <PokemonList />
    </div>
  );
}

5. Ejecutar la aplicación

Ejecuta tu proyecto con:

npm run dev

Abre tu navegador en http://localhost:5173 y deberías ver los primeros 10 Pokémon con sus imágenes y datos.

🔧 Buenas prácticas

• Maneja el estado de loading y error para mejorar la experiencia del usuario.
• Considera usar async/await para un código más limpio.
• Para listas más grandes de Pokémon, puedes implementar paginación o infinite scroll.
• Usa CSS o librerías UI para mejorar la presentación de los Pokémon.

✅ Conclusión

Consumir la PokéAPI con React y Axios usando Vite es rápido y divertido. Puedes mostrar datos dinámicos y atractivos visualmente, ideal para aprender manejo de APIs y crear aplicaciones interactivas.

Próximo paso: agrega búsqueda de Pokémon por nombre, filtra por tipo y crea tu propio Pokédex interactivo usando React y Axios.