Una de las grandes ventajas de React es que permite construir interfaces dinámicas capaces de obtener información desde servidores externos. Para conseguirlo, normalmente utilizamos APIs REST, que permiten enviar y recibir datos mediante solicitudes HTTP.
En este artículo aprenderás paso a paso cómo consumir una API externa desde una aplicación React.
1. ¿Qué necesitamos?
Para este ejemplo utilizaremos:
- React.
- JavaScript.
fetch(), incluido en los navegadores modernos.- Una API pública para realizar pruebas.
Puedes utilizar, por ejemplo, JSONPlaceholder, una API gratuita que proporciona datos ficticios.
2. Crear el componente
Primero crea un componente llamado Usuarios.jsx:
import { useEffect, useState } from "react";
function Usuarios() {
const [usuarios, setUsuarios] = useState([]);
const [cargando, setCargando] = useState(true);
useEffect(() => {
fetch("https://jsonplaceholder.typicode.com/users")
.then(respuesta => respuesta.json())
.then(datos => {
setUsuarios(datos);
setCargando(false);
})
.catch(error => {
console.error("Error:", error);
setCargando(false);
});
}, []);
return (
<div>
<h2>Usuarios</h2>
{cargando ? (
<p>Cargando usuarios...</p>
) : (
usuarios.map(usuario => (
<p key={usuario.id}>
{usuario.name} - {usuario.email}
</p>
))
)}
</div>
);
}
export default Usuarios;
Aquí aparecen dos conceptos fundamentales de React: useState y useEffect.
3. ¿Qué hace useEffect?
useEffect permite ejecutar código cuando ocurre determinado evento en el ciclo de vida del componente.
En este caso:
useEffect(() => {
// Solicitud a la API
}, []);
El array vacío [] indica que la solicitud se ejecutará una sola vez cuando el componente se monte.
4. Realizar la petición
La función fetch() realiza una solicitud HTTP:
fetch("https://jsonplaceholder.typicode.com/users")
La API responde con información en formato JSON. Para convertir esa respuesta:
respuesta.json()
Después podemos guardar los datos utilizando:
setUsuarios(datos);
Esto actualiza el estado y provoca que React vuelva a renderizar el componente.
5. Mostrar los resultados
Una vez recibidos los usuarios, podemos recorrer el array utilizando map():
usuarios.map(usuario => (
<p key={usuario.id}>
{usuario.name}
</p>
))
La propiedad key permite que React identifique correctamente cada elemento de la lista.
6. Manejar errores
Las APIs pueden fallar por diferentes motivos: problemas de conexión, servidor caído, URL incorrecta o errores de autenticación.
Por eso debemos utilizar catch():
.catch(error => {
console.error("Error:", error);
});
En aplicaciones reales también es recomendable mostrar un mensaje amigable al usuario.
7. Usar async/await
Otra forma, normalmente más cómoda de leer, es utilizar async/await:
useEffect(() => {
const obtenerUsuarios = async () => {
try {
const respuesta = await fetch(
"https://jsonplaceholder.typicode.com/users"
);
const datos = await respuesta.json();
setUsuarios(datos);
} catch (error) {
console.error(error);
} finally {
setCargando(false);
}
};
obtenerUsuarios();
}, []);
Esta estructura facilita el manejo de operaciones asíncronas y errores.
8. ¿Y las APIs protegidas?
En proyectos reales es habitual que una API requiera autenticación mediante un token JWT. En ese caso podemos enviarlo dentro de los encabezados:
fetch("https://api.ejemplo.com/usuarios", {
headers: {
Authorization: `Bearer ${token}`
}
});
Nunca deberías colocar claves privadas o secretos directamente en el código del frontend.
9. Buenas prácticas
Cuando trabajes con APIs externas en React:
- Controla los estados de carga.
- Maneja correctamente los errores.
- Valida las respuestas del servidor.
- Utiliza variables de entorno para configuraciones apropiadas.
- Separa la lógica de las peticiones en servicios cuando el proyecto crezca.
- Considera herramientas como Axios, React Query o TanStack Query para aplicaciones más complejas.
Consumir una API externa en React es un proceso sencillo: realizamos una petición HTTP, convertimos la respuesta a JSON, almacenamos los datos en un estado y finalmente los mostramos en la interfaz.
Dominar este proceso es fundamental para crear aplicaciones modernas, porque permite conectar React con servicios de usuarios, productos, pagos, bases de datos y prácticamente cualquier backend que exponga una API REST.
