Simular una API con un array

 Perfecto, vámonos lento, claro y paso a paso, como para empezar bien desde cero 👍

La idea es que primero entiendas el flujo, no memorizar código.

Voy a dividirlo en 2 partes:

1️⃣ Simular una API con un array
2️⃣ Conectarnos a una API real con fetch

---

🧩 PARTE 1: Simular una API con un array

🎯 Objetivo

Mostrar una lista de usuarios en pantalla como si vinieran de una API.

---

📌 Paso 1: Crear el componente base

import { useState } from "react";
import { createRoot } from "react-dom/client";

function App() {
  return (
    <div>
      <h1>Lista de usuarios</h1>
    </div>
  );
}

createRoot(document.getElementById("root")).render(<App />);

👉 Esto solo muestra un título.

---

📌 Paso 2: Crear el “array de la API”

const fakeApiData = [
  { id: 1, name: "Juan" },
  { id: 2, name: "María" },
  { id: 3, name: "Pedro" }
];

📌 Piensa esto como la respuesta del servidor.

---

📌 Paso 3: Guardar los datos en el estado

function App() {
  const [users, setUsers] = useState([]);

  const fakeApiData = [
    { id: 1, name: "Juan" },
    { id: 2, name: "María" },
    { id: 3, name: "Pedro" }
  ];

  function loadUsers() {
    setUsers(fakeApiData);
  }

  return (
    <div>
      <h1>Lista de usuarios</h1>
      <button onClick={loadUsers}>Cargar usuarios</button>
    </div>
  );
}

👉 Cuando presionas el botón, los datos “llegan” a React.

---

📌 Paso 4: Renderizar el array

<ul>
  {users.map(user => (
    <li key={user.id}>{user.name}</li>
  ))}
</ul>

Código completo (simulación)

import { useState } from "react";
import { createRoot } from "react-dom/client";

function App() {
  const [users, setUsers] = useState([]);

  const fakeApiData = [
    { id: 1, name: "Juan" },
    { id: 2, name: "María" },
    { id: 3, name: "Pedro" }
  ];

  function loadUsers() {
    setUsers(fakeApiData);
  }

  return (
    <div>
      <h1>Lista de usuarios</h1>
      <button onClick={loadUsers}>Cargar usuarios</button>

      <ul>
        {users.map(user => (
          <li key={user.id}>{user.name}</li>
        ))}
      </ul>
    </div>
  );
}

createRoot(document.getElementById("root")).render(<App />);

🧠 Qué aprendiste aquí

• useState guarda los datos

• .map() recorre el array

• React vuelve a renderizar solo

---

🌐 PARTE 2: Conectarse a una API real

Ahora hacemos lo mismo, pero con una API real.

Usaremos:

https://jsonplaceholder.typicode.com/users

(es gratis y solo para pruebas)

---

📌 Paso 5: Importar useEffect

import { useState, useEffect } from "react";

📌 useEffect se usa para cargar datos cuando el componente se monta.

---

📌 Paso 6: Llamar a la API

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

🧠 Lo que pasa:

1. fetch hace la petición

2. .json() convierte la respuesta

3. setUsers(data) guarda los datos

4. React renderiza la lista

---

📌 Código completo con API real

import { useState, useEffect } from "react";
import { createRoot } from "react-dom/client";

function App() {
  const [users, setUsers] = useState([]);

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

  return (
    <div>
      <h1>Usuarios desde API</h1>

      <ul>
        {users.map(user => (
          <li key={user.id}>{user.name}</li>
        ))}
      </ul>
    </div>
  );
}

createRoot(document.getElementById("root")).render(<App />);

---

🔁 Comparación mental (MUY IMPORTANTE)

Simulado	API real
Array local	fetch()
setUsers(array)	setUsers(data)
Botón	useEffect()
Instantáneo	Asíncrono

👉 React no sabe si viene de una API o no
Solo recibe datos y renderiza.

---

🚀 Siguiente paso recomendado

Cuando estés listo, puedo enseñarte:

• 🔄 Loader “Cargando…”

• ❌ Manejo de errores

• 📤 Enviar datos a una API (POST)

• 🧠 Compararlo con PHP + MySQL

• 📦 Axios (más limpio que fetch)

Dime qué te gustaría aprender después y lo armamos paso a paso como este