Ejercicio: Datos de internet

⏱ 40 minutos
📶 Nivel: principiante

Objetivo

Pedir datos a una API simulada, mostrar cargando, datos y error, y poder reintentar con un fallo provocado.

Cómo se trabaja

Escribe un componente llamado App (puedes crear los demás que necesites). Prueba tu código en el editor de abajo; cuando funcione, pega todo el archivo en el comprobador. Los import de react se aceptan y se ignoran, porque aquí React ya está cargado.

⚛️ Tu editor de React (empieza desde aquí)

Código (edítalo y pulsa Ejecutar)

// Simula una API: responde tras un breve retraso (o falla)
function pedirUsuarios(falla = false) {
  return new Promise((resolver, rechazar) => {
    setTimeout(() => {
      if (falla) rechazar(new Error("No se pudo conectar con el servidor"));
      else resolver([
        { id: 1, nombre: "Ana Pérez", ciudad: "Lima" },
        { id: 2, nombre: "Luis Gómez", ciudad: "Quito" },
        { id: 3, nombre: "Marta Ríos", ciudad: "Bogotá" },
      ]);
    }, 500);
  });
}

import { useState, useEffect } from "react";

function App() {
  return <h1>Usuarios</h1>;
}

Resultado

Consola

Pasos

Marca cada paso a medida que lo completes. Tu avance se guarda en este navegador.

pedirUsuarios(falla) ya está escrita en el código inicial (simula una API). No la modifiques.
En App, guarda en estado los usuarios (empieza con []), cargando (empieza en true) y error (empieza en null).
En un useEffect pide los usuarios; mientras cargan, muestra un <p className="cargando">Cargando…</p>.
Cuando lleguen, dibuja una lista <ul> con un <li> por usuario con su nombre y su ciudad.
Añade un botón «Simular fallo» que vuelva a pedir con pedirUsuarios(true) y muestre el error en un <p role="alert">.

💡 Pista 1: el efecto

Usa .then(setUsuarios).catch(e => setError(e.message)).finally(() => setCargando(false)) o try/catch/finally dentro de una función async interna.

💡 Pista 2: pedir de nuevo

Crea una función cargar(falla) que ponga cargando en true, limpie el error y haga la petición. Úsala en el efecto y en el botón.

🔎 Comprueba tu trabajo

Pega tu código y pulsa Comprobar. La revisión ocurre en tu navegador; nada se envía a ningún sitio. Cada punto en rojo incluye una pista.

Tu código de React (el archivo App.jsx completo)

✅ Ver una solución posible

Intenta resolverlo antes de mirar. Tu versión puede ser distinta y también correcta.

App.jsx

// Simula una API: responde tras un breve retraso (o falla)
function pedirUsuarios(falla = false) {
  return new Promise((resolver, rechazar) => {
    setTimeout(() => {
      if (falla) rechazar(new Error("No se pudo conectar con el servidor"));
      else resolver([
        { id: 1, nombre: "Ana Pérez", ciudad: "Lima" },
        { id: 2, nombre: "Luis Gómez", ciudad: "Quito" },
        { id: 3, nombre: "Marta Ríos", ciudad: "Bogotá" },
      ]);
    }, 500);
  });
}

import { useState, useEffect } from "react";

export default function App() {
  const [usuarios, setUsuarios] = useState([]);
  const [cargando, setCargando] = useState(true);
  const [error, setError] = useState(null);

  function cargar(falla) {
    setCargando(true);
    setError(null);
    pedirUsuarios(falla)
      .then(setUsuarios)
      .catch((e) => setError(e.message))
      .finally(() => setCargando(false));
  }

  useEffect(() => {
    cargar(false);
  }, []);

  return (
    <main>
      <button onClick={() => cargar(true)}>Simular fallo</button>
      {cargando && <p className="cargando">Cargando…</p>}
      {error && <p role="alert">{error}</p>}
      {!cargando && !error && (
        <ul>
          {usuarios.map((u) => (
            <li key={u.id}>{u.nombre} · {u.ciudad}</li>
          ))}
        </ul>
      )}
    </main>
  );
}

💡 🏁 Reto extra (opcional)

Añade un botón «Reintentar» dentro del mensaje de error que vuelva a pedir los datos con éxito.