Versión simple usando api.js (axios) + 5 usuarios
Versión simple usando api.js (axios) + 5 usuarios
Vamos a adaptar tu ejemplo de api.js pero lo más sencillo posible, mostrando un arreglo de 5 usuarios que simula venir de una API.
📁 Estructura
text
frontend/
├── src/
│ ├── api.js
│ └── App.jsx
🧩 Paso 1: src/api.js
Igual al que mostraste, pero sin withCredentials (lo simplificamos):
js
// src/api.js
import axios from 'axios';
const api = axios.create({
baseURL: '/api',
headers: {
'Accept': 'application/json',
'Content-Type': 'application/json',
},
});
export default api;
🧩 Paso 2: src/App.jsx
jsx
// src/App.jsx
import { useEffect, useState } from 'react';
import api from './api';
function App() {
const [users, setUsers] = useState([]);
const [loading, setLoading] = useState(true);
const [error, setError] = useState(null);
useEffect(() => {
const fetchUsers = async () => {
try {
const res = await api.get('/users');
setUsers(res.data);
} catch (err) {
setError(err.message);
} finally {
setLoading(false);
}
};
fetchUsers();
}, []);
if (loading) return <p>Cargando...</p>;
if (error) return <p>Error: {error}</p>;
return (
<div>
<h1>Usuarios</h1>
<ul>
{users.map((user) => (
<li key={user.id}>{user.nombre}</li>
))}
</ul>
</div>
);
}
export default App;
🔍 Qué cambió respecto a tu ejemplo original
🖥️ ¿Qué espera recibir del backend?
Tu API debe responder a GET /api/users con algo así:
json
[
{ "id": 1, "nombre": "Ana" },
{ "id": 2, "nombre": "Luis" },
{ "id": 3, "nombre": "Carlos" },
{ "id": 4, "nombre": "María" },
{ "id": 5, "nombre": "Pedro" }
]
Si en tu backend (Laravel) tienes esa ruta, perfecto. Si no, y solo quieres probar el frontend sin backend, mira la opción de abajo.
🧪 Opción: probar sin backend (mock dentro de api.js)
Si no tienes backend aún, puedes simular la respuesta desde el propio api.js:
js
// src/api.js
const users = [
{ id: 1, nombre: 'Ana' },
{ id: 2, nombre: 'Luis' },
{ id: 3, nombre: 'Carlos' },
{ id: 4, nombre: 'María' },
{ id: 5, nombre: 'Pedro' },
];
const api = {
get: async (url) => {
if (url === '/users') return { data: users };
throw new Error('Ruta no encontrada');
},
};
export default api;
Así no necesitas axios ni backend, pero tu App.jsx se queda exactamente igual. Esa es la ventaja de tener la capa api.js separada: puedes cambiar la implementación sin tocar los componentes.
✅ Resumen
api.js → configura axios (o un mock) con la URL base.
App.jsx → usa useEffect + useState para pedir los datos al montar.
Tres estados clave: users, loading, error.
map() para pintar los 5 usuarios con su key.
Mostrar un arreglo de 5 elementos (simulando respuesta de API)
Te voy a mostrar un ejemplo paso a paso, muy básico, donde simulamos que un arreglo de 5 elementos viene de una API.
📁 Estructura del proyecto
text
mi-app/
├── src/
│ ├── App.jsx
│ └── main.jsx
🧩 Paso 1: Simular la respuesta de la API
Creamos una función que devuelve una promesa (como lo haría fetch).
jsx
// src/App.jsx
import { useState, useEffect } from 'react';
// 👇 Simulamos la respuesta de una API
const fakeApi = () => {
return new Promise((resolve) => {
setTimeout(() => {
resolve([
{ id: 1, nombre: 'Ana' },
{ id: 2, nombre: 'Luis' },
{ id: 3, nombre: 'Carlos' },
{ id: 4, nombre: 'María' },
{ id: 5, nombre: 'Pedro' },
]);
}, 1000); // simula 1 segundo de espera
});
};
function App() {
const [datos, setDatos] = useState([]);
const [cargando, setCargando] = useState(true);
// 👇 useEffect se ejecuta al montar el componente
useEffect(() => {
fakeApi()
.then((respuesta) => {
setDatos(respuesta); // guardamos el arreglo en el estado
setCargando(false); // ya terminó de cargar
});
}, []); // [] = solo se ejecuta una vez
if (cargando) return <p>Cargando...</p>;
return (
<div>
<h1>Lista de usuarios</h1>
<ul>
{datos.map((item) => (
<li key={item.id}>{item.nombre}</li>
))}
</ul>
</div>
);
}
export default App;
📌 Explicación de las partes clave
1. useState
Guarda el arreglo que llegará de la "API":
jsx
const [datos, setDatos] = useState([]);
2. useEffect
Se ejecuta cuando el componente se monta. Ahí llamamos a la API:
jsx
useEffect(() => {
fakeApi().then((respuesta) => setDatos(respuesta));
}, []);
3. map()
Recorre el arreglo y genera un <li> por cada elemento:
jsx
{datos.map((item) => (
<li key={item.id}>{item.nombre}</li>
))}
⚠️ Importante: siempre poner key (única) para que React identifique cada elemento.
🌐 Si fuera una API real
Solo cambia fakeApi() por fetch:
jsx
useEffect(() => {
fetch('https://jsonplaceholder.typicode.com/users')
.then((res) => res.json())
.then((data) => {
setDatos(data.slice(0, 5)); // tomamos solo 5
setCargando(false);
});
}, []);
✅ Resultado esperado
En pantalla verás:
text
Lista de usuarios
• Ana
• Luis
• Carlos
• María
• Pedro
🎯 Resumen de conceptos usados
¿Quieres que te lo muestre también con async/await o usando axios
Comentarios
Publicar un comentario