Lista con fetch simulado

datosmedia

20:00empieza al escribir

Guía

Modo del reto

# Progreso de los requisitos

sin ejecutarpide /api/users y muestra Loading mientras espera
sin ejecutarmuestra los usuarios cuando llegan
sin ejecutarmuestra un error si la petición falla

# Casos borde

Se muestran cuando ejecutas los tests. Hasta entonces aparecen como un requisito oculto.

ocultoRequisito oculto
ocultoRequisito oculto
ocultoRequisito oculto

# Enunciado

Objetivo

Crea una lista de usuarios que se pide al servidor y que gestiona la carga y los errores. Practicas useEffect con peticiones y el estado asíncrono.

Lo que ya tienes

La interfaz de los cuatro casos: carga, error, lista vacía y lista con datos.
Tu trabajo es la lógica: hacer la petición, guardar su resultado y decidir qué caso se muestra.
Conserva los textos Loading..., Could not load the users y No users, y los role: los usan los tests.

Requisitos

Al montarse, el componente pide /api/users con fetch.
Mientras espera, se muestra Loading... en un elemento con role="status".
Cuando llegan los datos (un array de objetos { id, name }), cada name se muestra en un li.
Si la petición falla, se muestra Could not load the users en un elemento con role="alert".

Ejemplo

Abres el reto → ves Loading... mientras la petición está en curso.
La petición devuelve Ada Lovelace y Alan Turing → ves esos dos nombres.
La petición falla → ves Could not load the users.

Pistas

Pista 1

Pide los datos dentro de un useEffect con un array de dependencias vacío.

Pista 2

Un solo estado con el tipo de caso y los datos evita combinaciones imposibles.

Pista 3

En la vista previa, /api/users responde al cabo de medio segundo. Para ver el caso de error, pide /api/users?status=500 un momento, y vuelve a poner la URL antes de ejecutar los tests.

Conceptos

useEffect para efectos secundarios.
fetch, promesas y manejo de errores.
Estado de carga, de error y de datos.

App.jsx

Vista previa

La consola está vacía

Ejecuta tu código con Ctrl+S

Esta consola empieza de cero cada vez que se carga la vista previa. La consola de DevTools del navegador conserva los mensajes con Preserve log.