Introducción a la Poke API y Configuración del Proyecto
Tabla de contenido
Objetivo del día: #
El objetivo de este día es familiarizarse con la Poke API, una API que proporciona datos sobre los pokemons, y configurar el proyecto de React para comenzar a trabajar en la aplicación.
Temas a cubrir: #
Introducción a la Poke API:
- ¿Qué es la Poke API?
- Endpoints disponibles y tipos de datos que proporciona.
- Cómo obtener una clave de acceso (API key) para acceder a la Poke API.
Configuración del Proyecto de React:
- Creación de un nuevo proyecto de React utilizando Create React App.
- Configuración de la estructura de carpetas para la aplicación.
Instalación de Dependencias:
- Instalación de Axios para hacer peticiones HTTP a la Poke API.
- Otras dependencias necesarias según las necesidades de la aplicación.
Actividades prácticas: #
Crear un nuevo proyecto de React:
- Utiliza Create React App para crear un nuevo proyecto de React.
- Abre el proyecto en tu editor de código y explora la estructura de carpetas.
Obtener una clave de acceso a la Poke API:
- Regístrate en el sitio web de la Poke API para obtener una clave de acceso.
- Lee la documentación para entender cómo hacer peticiones a la API utilizando la clave de acceso.
Configurar Axios para hacer peticiones HTTP:
- Instala Axios en tu proyecto utilizando
npmoyarn. - Crea un archivo de configuración para Axios y establece la URL base de la Poke API.
- Instala Axios en tu proyecto utilizando
Hacer una petición de prueba a la Poke API:
- Utiliza Axios para hacer una petición GET a la Poke API para obtener información de un pokemon.
- Muestra los datos obtenidos en la consola para asegurarte de que la petición fue exitosa.
Desafíos opcionales para repaso: #
Explorar otros endpoints de la Poke API:
- Lee la documentación de la Poke API para explorar otros endpoints y datos disponibles (por ejemplo, información de tipos de pokemon, habilidades, etc.).
Agregar estilos básicos a la aplicación:
- Agrega un poco de CSS para mejorar la apariencia de la aplicación.
- Utiliza algún componente de diseño como Material-UI para facilitar la estilización.
Resumen del día: #
En este día, hemos introducido la Poke API y nos hemos familiarizado con los datos que proporciona. Hemos configurado el proyecto de React utilizando Create React App y hemos instalado las dependencias necesarias, incluido Axios para hacer peticiones HTTP a la Poke API. Hemos hecho una petición de prueba para asegurarnos de que podemos obtener datos de la API. ¡Estamos listos para comenzar a trabajar en la aplicación para mostrar la lista de pokemons y sus detalles!