Continuando mi aprendizaje en React.js a través del curso de Midudev en YouTube (un recurso que recomiendo mucho para quien quiera empezar con React), ⚛️ CURSO DE REACT 2024 – YouTube me enfrenté a un desafío técnico muy interesante: la integración de dos APIs diferentes en una sola aplicación web. El objetivo era combinar datos textuales con imágenes de manera dinámica, un ejercicio fundamental para cualquier desarrollador front-end.
Aprendiendo a Crear y Usar Custom Hooks
Una de las enseñanzas clave en esta etapa del curso fue la creación y utilización de Custom Hooks. Útiles para reutilizar lógica de estado entre diferentes componentes, lo que se traduce en un código más limpio y modular. Aplicar este concepto fue esencial para organizar la lógica de la aplicación y el manejo de las APIs de manera eficiente.
Integración de APIs: Datos Curiosos y Fotos de Gatos
El reto principal consistía en:
- Obtener un dato curioso sobre gatos de una API de frases.
- Buscar una imagen de gato relacionada, utilizando las primeras tres palabras de ese dato curioso como criterio de búsqueda en otra API de imágenes.
Se puso a prueba mi habilidad para manejar el fetching de datos (la recuperación de información de servicios externos) y la manipulación de esa información para realizar solicitudes adicionales.
Aunque me encontré con un problema común en el desarrollo web: la API de imágenes de gatos inicialmente propuesta en el curso no funcionaba. Esto me obligó a investigar y encontrar una API alternativa que cumpliera con el objetivo de proporcionar imágenes de gatos. Esta experiencia de resolución de problemas en tiempo real fue muy valiosa, ya que simuló un escenario real de desarrollo donde a menudo es necesario adaptarse y encontrar soluciones alternativas.
Tecnologías Utilizadas
Para este proyecto, me apoyé en las siguientes herramientas:
- Visual Studio Code
- Vite
- Node.js
Conclusión
Este ejercicio no solo me permitió consolidar mis conocimientos sobre el fetching de datos desde APIs externas, sino que también fue una práctica intensiva en la creación y aplicación de Custom Hooks. Comprendí cómo estas herramientas son fundamentales para construir aplicaciones React más robustas, eficientes y modulares. La resolución del problema con la API de imágenes fue un recordatorio práctico de la importancia de la adaptabilidad y la búsqueda de soluciones en el desarrollo front-end.
