Trayendo datos de una API

Datos reales, no hardcodeados

Hasta ahora hemos trabajado con datos definidos directamente en el código. Pero las aplicaciones reales traen datos de un servidor: usuarios de una base de datos, productos de un catálogo, posts de un blog...

En React, el patrón para traer datos combina todo lo que has aprendido: useState + useEffect + fetch.

El patrón clásico de fetch

Los 3 estados de una petición

Toda petición a una API pasa por tres fases, y necesitas un estado para cada una:

1. Loading: la petición está en curso → muestra un spinner o "Cargando..."
2. Éxito: los datos llegaron → muestra la información
3. Error: algo salió mal → muestra un mensaje de error

Con async/await

La versión con async/await es más legible, pero hay un detalle: el callback de useEffect no puede ser async directamente. Creas una función async dentro:

¿Por qué no useEffect(async () => ...)? Porque useEffect espera que la función devuelva una función de limpieza o nada. Una función async devuelve una Promise, lo cual confundiría a React.

Renderizado condicional por estado

La parte del JSX usa lo que aprendiste en renderizado condicional:

Cada caso tiene su propia UI: loading muestra indicador, error muestra mensaje, éxito muestra datos.

JSONPlaceholder: tu API de práctica

Para este desafío usaremos JSONPlaceholder, una API pública y gratuita con datos falsos:

• https://jsonplaceholder.typicode.com/users — 10 usuarios
• https://jsonplaceholder.typicode.com/posts — 100 posts
• https://jsonplaceholder.typicode.com/todos — 200 tareas

No necesitas autenticación ni configuración. Solo un fetch y listo.

Tu desafío 🚀

Trae la lista de usuarios de JSONPlaceholder y muéstralos:

1. Usa useEffect con [] para hacer el fetch al montar
2. Usa fetch('https://jsonplaceholder.typicode.com/users')
3. Maneja los tres estados: muestra "Cargando..." mientras esperas
4. Renderiza la lista con .map() cuando los datos lleguen

Traer datos de una API es quizá la operación más común en aplicaciones React del mundo real. Acabas de aprender el patrón que usarás cientos de veces en tu carrera.