Misión 1 · Lección 6

Consumo de Datos Externos con Fetch

Objetivos

• Aprender a consumir APIs externas desde React usando fetch.
• Renderizar listas dinámicamente con datos obtenidos del servidor.
• Manejar estados de carga (loading) y error.
• Usar useEffect para realizar solicitudes al montar el componente.

¿Qué es Fetch?

• fetch() es una API nativa del navegador para hacer peticiones HTTP.
• Permite solicitar y enviar datos a un servidor (GET, POST, PUT, DELETE).
• Devuelve una promesa que resuelve con la respuesta del servidor.

fetch("https://jsonplaceholder.typicode.com/users")
  .then(res => res.json())
  .then(data => console.log(data));

Uso de useEffect para cargar datos

import { useState, useEffect } from "react";

export default function Usuarios() {
  const [usuarios, setUsuarios] = useState([]);

  useEffect(() => {
    fetch("https://jsonplaceholder.typicode.com/users")
      .then(res => res.json())
      .then(data => setUsuarios(data));
  }, []);

  return (
    <ul>
      {usuarios.map(u => (
        <li key={u.id}>{u.name}</li>
      ))}
    </ul>
  );
}

El arreglo vacío [] hace que la petición se ejecute una sola vez, al montar el componente.

Manejo de Carga y Error

export default function Usuarios() {
  const [usuarios, setUsuarios] = useState([]);
  const [loading, setLoading] = useState(true);
  const [error, setError] = useState(null);

  useEffect(() => {
    fetch("https://jsonplaceholder.typicode.com/users")
      .then(res => {
        if (!res.ok) throw new Error("Error en la petición");
        return res.json();
      })
      .then(data => setUsuarios(data))
      .catch(err => setError(err.message))
      .finally(() => setLoading(false));
  }, []);

  if (loading) return <p>Cargando...</p>;
  if (error) return <p>Error: {error}</p>;

  return (
    <ul>
      {usuarios.map(u => (
        <li key={u.id}>{u.name}</li>
      ))}
    </ul>
  );
}

Renderizado Condicional de Datos

• Usa condicionales para mostrar distintos estados de la UI.
• Ejemplo: cargando, error o datos.

{loading && <p>Cargando usuarios...</p>}
{error && <p>Error: {error}</p>}
{!loading && !error && usuarios.length === 0 && <p>No hay usuarios.</p>}

Renderizar componentes con datos

function Usuario({ nombre, correo }) {
  return (
    <div className="card">
      <h4>{nombre}</h4>
      <p>{correo}</p>
    </div>
  );
}

export default function ListaUsuarios({ usuarios }) {
  return (
    <div>
      {usuarios.map(u => (
        <Usuario key={u.id} nombre={u.name} correo={u.email} />
      ))}
    </div>
  );
}

Separar componentes mejora la legibilidad y reusabilidad del código.

Consumo de APIs Propias

También puedes consumir APIs creadas por ti (por ejemplo, en Node.js o Flask).

fetch("http://localhost:5000/api/usuarios")
  .then(res => res.json())
  .then(data => setUsuarios(data));

🔒 Si la API requiere autenticación, puedes enviar headers personalizados:

fetch("/api/datos", {
  headers: {
    Authorization: "Bearer " + token
  }
});

Buenas Prácticas

• Siempre manejar errores y estados de carga.
• Evita peticiones innecesarias; usa dependencias correctas en useEffect.
• Extrae la lógica de fetch a una función o custom hook (useFetch).
• No expongas tokens o claves API en el frontend.

Ejercicio Guiado 🧠

1. Crea un componente <ListaTareas /> que consuma datos de https://jsonplaceholder.typicode.com/todos.
2. Muestra solo las primeras 10 tareas con su título y estado (completed).
3. Agrega manejo de loading y error.
4. Extra: Crea un botón para volver a cargar los datos manualmente.

Resumen de la Lección

• Usa fetch o librerías como Axios para consumir APIs.
• useEffect permite ejecutar peticiones al montar el componente.
• Maneja siempre loading y error.
• Los datos dinámicos se renderizan con map().

🚀 Con esto ya puedes conectar tu frontend con fuentes de datos reales.