Aprender React Interacción HTTP con Backend

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:

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.