50% OFF Plus
--:--:--
¡Obtener!

React: Interacción HTTP con Backend

React
React
Actualizado: 14/02/2025

¡Desbloquea el curso completo!

IA
Ejercicios
Certificado
Entrar

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.

Progreso guardado
Asistente IA
Ejercicios
Iniciar sesión gratis

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

⭐⭐⭐⭐⭐
4.9/5 valoración