La interacción de React 19 con HTTP backend es fundamental para gestionar datos en aplicaciones modernas. En este módulo, aprenderás cómo realizar peticiones HTTP para obtener, enviar y manipular datos desde un servidor backend empleando React 19 y las herramientas de su ecosistema.
Instalación de Axios
Para facilitar la comunicación HTTP, utilizaremos Axios, una biblioteca popular en el entorno de React. Primero, instalemos Axios en nuestro proyecto:
npm install axios
Configuración inicial
Una vez instalado Axios, configuramos una instancia base para centralizar todas las peticiones HTTP. Esto nos permite reutilizar la configuración y manejar errores de manera eficiente.
import axios from 'axios';
const api = axios.create({
baseURL: 'https://api.ejemplo.com',
timeout: 1000,
headers: {'X-Custom-Header': 'foobar'}
});
Realizar peticiones GET
Para obtener datos del servidor, utilizamos el método get
de Axios. Este ejemplo muestra cómo recuperar una lista de usuarios:
import React, { useEffect, useState } from 'react';
import api from './api';
const Usuarios = () => {
const [usuarios, setUsuarios] = useState([]);
useEffect(() => {
api.get('/usuarios')
.then(response => {
setUsuarios(response.data);
})
.catch(error => {
console.error('Error al obtener los usuarios', error);
});
}, []);
return (
<div>
<h1>Lista de Usuarios</h1>
<ul>
{usuarios.map(usuario => (
<li key={usuario.id}>{usuario.nombre}</li>
))}
</ul>
</div>
);
};
export default Usuarios;
Envío de datos con POST
Para enviar datos al servidor, utilizamos el método post
. Este ejemplo muestra cómo agregar un nuevo usuario:
Guarda tu progreso
Inicia sesión para no perder tu progreso y accede a miles de tutoriales, ejercicios prácticos y nuestro asistente de IA.
Más de 25.000 desarrolladores ya confían en CertiDevs
import React, { useState } from 'react';
import api from './api';
const AgregarUsuario = () => {
const [nombre, setNombre] = useState('');
const handleSubmit = (event) => {
event.preventDefault();
api.post('/usuarios', { nombre })
.then(response => {
console.log('Usuario agregado', response.data);
})
.catch(error => {
console.error('Error al agregar el usuario', error);
});
};
return (
<form onSubmit={handleSubmit}>
<label>
Nombre:
<input type="text" value={nombre} onChange={(e) => setNombre(e.target.value)} />
</label>
<button type="submit">Agregar</button>
</form>
);
};
export default AgregarUsuario;
Actualización de datos con PUT
Para actualizar datos existentes, utilizamos el método put
. Aquí mostramos cómo actualizar la información de un usuario:
import React, { useState } from 'react';
import api from './api';
const ActualizarUsuario = ({ id }) => {
const [nombre, setNombre] = useState('');
const handleSubmit = (event) => {
event.preventDefault();
api.put(`/usuarios/${id}`, { nombre })
.then(response => {
console.log('Usuario actualizado', response.data);
})
.catch(error => {
console.error('Error al actualizar el usuario', error);
});
};
return (
<form onSubmit={handleSubmit}>
<label>
Nombre:
<input type="text" value={nombre} onChange={(e) => setNombre(e.target.value)} />
</label>
<button type="submit">Actualizar</button>
</form>
);
};
export default ActualizarUsuario;
Eliminación de datos con DELETE
Para eliminar datos, utilizamos el método delete
. Este ejemplo muestra cómo eliminar un usuario:
import React from 'react';
import api from './api';
const EliminarUsuario = ({ id }) => {
const handleDelete = () => {
api.delete(`/usuarios/${id}`)
.then(response => {
console.log('Usuario eliminado', response.data);
})
.catch(error => {
console.error('Error al eliminar el usuario', error);
});
};
return (
<button onClick={handleDelete}>Eliminar Usuario</button>
);
};
export default EliminarUsuario;
La interacción de React 19 con HTTP backend es crucial para aplicaciones que requieran gestión de datos en tiempo real. Utilizar Axios facilita la comunicación con el servidor, permitiendo un manejo eficiente de las peticiones HTTP.
Completa React y certifícate
Únete a nuestra plataforma y accede a miles de tutoriales, ejercicios prácticos, proyectos reales y nuestro asistente de IA personalizado para acelerar tu aprendizaje.
Asistente IA
Resuelve dudas al instante
Ejercicios
Practica con proyectos reales
Certificados
Valida tus conocimientos
Más de 25.000 desarrolladores ya se han certificado con CertiDevs