Conexión a la API de Dragon Ball con React: Listado de Planetas

 Aprende a consumir una API, manejar estados y aplicar estilos con Sass en un proyecto React 🚀

1. Introducción

En este tutorial, crearemos un componente React que:

✅ Conecta con la API de Dragon Ball para obtener planetas.

✅ Muestra los datos en tarjetas estilizadas con Sass .

✅ Gestiona estados de carga, errores y renderizado condicional.

API Utilizada : Dragon Ball API

2. Estructura del Componente

3. Explicación del Código

a) Estados y Efectos

• useState :
• planets: Almacena la lista de planetas obtenidos.
• loading: Muestra un mensaje mientras carga la API.
• error: Captura errores de red o respuestas fallidas.
• useEffect :
• Ejecuta fetchPlanets() al montar el componente (array de dependencias vacío []).

b) Llamada a la API con Axios

• axios.get: Realiza una solicitud GET a la URL de la API.
• Manejo de errores: Usa try/catch para capturar excepciones.
• finally: Garantiza que loading se actualice incluso si hay errores.

c) Renderizado Condicional

• Mientras carga : Muestra un mensaje de espera.
• Si hay error : Muestra un mensaje rojo (definido en Sass).
• Si hay datos : Renderiza las tarjetas de planetas.

4. Estilos con Sass

Agrega estilos en Sass para aprovechar anidamiento y variables:

Características del diseño :

• Responsive : Las tarjetas se adaptan a diferentes tamaños de pantalla.
• Imágenes optimizadas : Usan object-fit: cover para mantener proporciones.
• Feedback visual : Colores claros para errores y carga.

5. Buenas Prácticas Aplicadas

• Manejo de errores : Muestra mensajes claros al usuario.
• Carga eficiente : Estados loading y error evitan pantallas vacías.
• Estilos modulares : Sass permite organizar CSS de forma limpia.
• API Key Segura : En proyectos reales, usa variables de entorno para almacenar credenciales.

6. Posibles Mejoras

• Paginación : Si la API devuelve muchos planetas.
• Filtrado : Buscar planetas por nombre o saga.
• Animaciones : Efectos al cargar o mostrar errores.

Conclusión

Este ejemplo demuestra cómo consumir una API en React de forma profesional, gestionando estados y aplicando estilos modernos con Sass. La API de Dragon Ball es ideal para proyectos de prueba, pero recuerda:

¿Quieres ver más ejemplos de APIs en React? ¡Déjame un comentario! 👇

Keywords: API Dragon Ball, React y Sass, consumir API en React, estilos con Sass.

Meta descripción: "Aprende a conectar una API de Dragon Ball en React, manejar estados y aplicar estilos con Sass. Código listo para copiar y personalizar."