Aprende a hacer una POKEDEX con REACT y TYPESCRIPT

En este tutorial aprenderás a crear una POKEDEX utilizando React y TypeScript. La combinación de estas dos tecnologías te permitirá crear una aplicación web moderna y robusta para visualizar información sobre los Pokémon.

Requisitos:

Para seguir este tutorial, necesitarás tener instalado Node.js en tu computadora. También es recomendable tener conocimientos básicos de React y TypeScript.

Pasos a seguir:

1. Crea un nuevo proyecto de React utilizando Create React App:

npx create-react-app pokedex-app --template typescript

2. Accede al directorio de tu proyecto:

cd pokedex-app

3. Instala la librería Axios para hacer peticiones HTTP:

npm install axios

4. Crea un nuevo componente llamado Pokedex:

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

const Pokedex: React.FC = () => {
  const [pokemonList, setPokemonList] = useState([]);

  useEffect(() => {
    axios.get('https://pokeapi.co/api/v2/pokemon')
      .then((response) => {
        setPokemonList(response.data.results);
      })
      .catch((error) => {
        console.error('Error fetching data:', error);
      });
  }, []);

  return (
    <div>
      <h2>Pokémon List</h2>
      <ul>
        {pokemonList.map((pokemon: any) => (
          <li key={pokemon.name}>{pokemon.name}</li>
        ))}
      </ul>
    </div>
  );
};

export default Pokedex;
  

5. Utiliza el componente Pokedex en tu App principal:

import React from 'react';
import Pokedex from './Pokedex';

const App: React.FC = () => {
  return (
    <div>
      <h1>My Pokedex App</h1>
      <Pokedex />
    </div>
  );
};

export default App;
  

6. Ejecuta tu aplicación:

npm start

¡Listo! Ahora deberías ver una lista de Pokémon en tu aplicación. Puedes personalizarla añadiendo más funcionalidades como detalles de cada Pokémon, búsqueda por nombre, tipos, etc.

¡Esperamos que este tutorial te haya sido de ayuda para crear tu propia POKEDEX con React y TypeScript!