CRUD CON REACT HOOKS Y AXIOS: APRENDE A MANIPULAR DATOS

August 5, 2025

Introducción a React Hooks y Axios

En el desarrollo moderno de aplicaciones web, la manipulación de datos es una tarea esencial que requiere herramientas eficientes y flexibles. React Hooks y Axios se han consolidado como tecnologías fundamentales para lograr una gestión dinámica y sencilla de la información en interfaces de usuario.

React Hooks permiten a los desarrolladores agregar funcionalidades como estados y efectos a componentes funcionales, facilitando la construcción de aplicaciones reactivas y mantenibles. Por otro lado, Axios es una biblioteca de JavaScript que simplifica la realización de peticiones HTTP, permitiendo la interacción fluida con APIs.

Este artículo aborda cómo implementar un sistema CRUD completo utilizando React Hooks y Axios, estableciendo conexiones con APIs para obtener, crear, actualizar y eliminar datos en tiempo real, con un enfoque profesional y práctico.

Uso de React Hooks para el manejo de estados

El manejo de estados es fundamental para controlar la información dentro de un componente React. El hook useState es la herramienta principal para este propósito, permitiendo definir variables de estado y funciones para su actualización.

import React, { useState } from "react";

function Contador() {
    const [contador, setContador] = useState(0);

    return (
        <div>
            <p>Contador: {contador}</p>
            <button onClick={() => setContador(contador + 1)}>+</button>
            <button onClick={() => setContador(contador - 1)}>-</button>
        </div>
    );
}

En este ejemplo, se crea un contador simple que incrementa o decrementa su valor mediante botones, demostrando cómo los estados permiten una interacción dinámica con el usuario.

Integración con APIs mediante Axios

Para interactuar con APIs, Axios facilita la realización de peticiones HTTP. Combinado con el hook useEffect, es posible ejecutar estas peticiones en momentos específicos del ciclo de vida del componente.

import React, { useState, useEffect } from "react";
import axios from "axios";

function ListaDatos() {
    const [datos, setDatos] = useState([]);

    useEffect(() => {
        const obtenerDatos = async () => {
            try {
                const respuesta = await axios.get(
                    "https://api.example.com/datos"
                );
                setDatos(respuesta.data);
            } catch (error) {
                console.error("Error al obtener datos:", error);
            }
        };
        obtenerDatos();
    }, []);

    return (
        <div>
            {datos.map((dato) => (
                <p key={dato.id}>{dato.valor}</p>
            ))}
        </div>
    );
}

Este patrón permite cargar datos desde una API al montar el componente, actualizando el estado y renderizando la información de forma reactiva.

Creación de una API RESTful con Node.js y Express

Para desarrollar aplicaciones completas, es común crear una API RESTful que gestione las solicitudes de datos. Node.js junto con Express es una combinación popular para este propósito, ofreciendo un entorno eficiente y escalable.

Configuración básica de rutas

Primero, se instala Express y se configura un enrutador para manejar las rutas de la API.

const express = require("express");
const router = express.Router();

router.get("/", (req, res) => {
    res.send("Respuesta GET desde la API");
});

router.post("/", (req, res) => {
    res.send("Respuesta POST desde la API");
});

module.exports = router;

Este ejemplo define rutas básicas para los métodos GET y POST, que pueden extenderse para cubrir todas las operaciones CRUD necesarias.

Integración con la aplicación principal

En el archivo principal app.js, se importa y utiliza el enrutador para exponer las rutas bajo un prefijo común.

const express = require("express");
const app = express();
const exampleRouter = require("./routes/example");

app.use("/api", exampleRouter);

app.listen(3000, () => {
    console.log("API escuchando en http://localhost:3000/api");
});

Con esta configuración, la API está lista para recibir y responder solicitudes, facilitando la comunicación con el frontend desarrollado en React.

Uso avanzado de los hooks useState y useEffect

Los hooks useState y useEffect son pilares en el desarrollo con React, permitiendo manejar estados y efectos secundarios de manera eficiente.

Declaración y actualización de estados

useState permite definir estados con valores iniciales y funciones para su actualización, facilitando la gestión de datos internos del componente.

const [valor, setValor] = useState("valor inicial");

Efectos secundarios controlados

useEffect ejecuta funciones después del renderizado, con la posibilidad de controlar su ejecución mediante dependencias.

useEffect(() => {
    // Código a ejecutar
}, [dependencias]);

Este hook es ideal para realizar peticiones a APIs, suscribirse a eventos o manipular el DOM.

Implementación completa del CRUD con React y Axios

El CRUD (Crear, Leer, Actualizar, Borrar) es fundamental para la manipulación de datos en aplicaciones web. A continuación, se presenta una implementación profesional utilizando React Hooks y Axios.

import React, { useState, useEffect } from "react";
import axios from "axios";

function CRUDApp() {
    const [data, setData] = useState([]);

    useEffect(() => {
        axios
            .get("https://mi-api.com/data")
            .then((response) => setData(response.data))
            .catch((error) => console.error(error));
    }, []);

    const crearDato = (nuevoDato) => {
        axios
            .post("https://mi-api.com/data", nuevoDato)
            .then((response) => setData([...data, response.data]))
            .catch((error) => console.error(error));
    };

    const actualizarDato = (id, datoActualizado) => {
        axios
            .put(`https://mi-api.com/data/${id}`, datoActualizado)
            .then((response) => {
                const indice = data.findIndex((item) => item.id === id);
                const copiaData = [...data];
                copiaData[indice] = response.data;
                setData(copiaData);
            })
            .catch((error) => console.error(error));
    };

    const eliminarDato = (id) => {
        axios
            .delete(`https://mi-api.com/data/${id}`)
            .then(() => {
                const datosFiltrados = data.filter((item) => item.id !== id);
                setData(datosFiltrados);
            })
            .catch((error) => console.error(error));
    };

    return (
        <div>{/* Implementación de UI para mostrar y manipular datos */}</div>
    );
}

Este código muestra cómo realizar las operaciones básicas del CRUD, actualizando el estado local para reflejar los cambios en la interfaz.

Validación profesional de datos en formularios

La validación de datos en formularios es crucial para garantizar la integridad y calidad de la información ingresada por los usuarios. Utilizando React Hooks junto con librerías especializadas como Yup, se puede implementar una validación robusta y eficiente.

import React, { useState } from "react";
import * as Yup from "yup";

const esquemaValidacion = Yup.object().shape({
    email: Yup.string().email("Correo inválido").required("Requerido"),
    password: Yup.string().min(8, "Mínimo 8 caracteres").required("Requerido"),
});

function FormularioValidado() {
    const [formData, setFormData] = useState({ email: "", password: "" });
    const [errores, setErrores] = useState({});

    const manejarCambio = (e) => {
        const { name, value } = e.target;
        setFormData({ ...formData, [name]: value });

        esquemaValidacion
            .validateAt(name, { [name]: value })
            .then(() => setErrores({ ...errores, [name]: null }))
            .catch((err) => setErrores({ ...errores, [name]: err.message }));
    };

    const manejarEnvio = (e) => {
        e.preventDefault();
        esquemaValidacion
            .validate(formData, { abortEarly: false })
            .then(() => {
                // Enviar datos a la API
            })
            .catch((err) => {
                const nuevosErrores = {};
                err.inner.forEach((error) => {
                    nuevosErrores[error.path] = error.message;
                });
                setErrores(nuevosErrores);
            });
    };

    return (
        <form onSubmit={manejarEnvio}>
            <label>
                Email:
                <input
                    type="email"
                    name="email"
                    value={formData.email}
                    onChange={manejarCambio}
                />
                {errores.email && <p>{errores.email}</p>}
            </label>
            <label>
                Contraseña:
                <input
                    type="password"
                    name="password"
                    value={formData.password}
                    onChange={manejarCambio}
                />
                {errores.password && <p>{errores.password}</p>}
            </label>
            <button type="submit">Enviar</button>
        </form>
    );
}

Este enfoque permite validar cada campo en tiempo real y mostrar mensajes claros al usuario, mejorando la experiencia y la calidad de los datos recibidos.

Gestión eficiente de errores y alertas en aplicaciones React

El manejo adecuado de errores es vital para mantener la estabilidad y usabilidad de una aplicación. React Hooks y Axios ofrecen mecanismos para capturar y mostrar errores de forma profesional.

Manejo de errores con try-catch y estado

import React, { useState, useEffect } from "react";
import axios from "axios";
import { toast, ToastContainer } from "react-toastify";
import "react-toastify/dist/ReactToastify.css";

function App() {
    const [error, setError] = useState(null);

    useEffect(() => {
        if (error) {
            toast.error(error);
        }
    }, [error]);

    const eliminarDato = async (id) => {
        try {
            await axios.delete(`https://mi-api.com/data/${id}`);
            // Actualizar estado después de eliminar
        } catch (err) {
            setError(err.message);
        }
    };

    return (
        <>
            <ToastContainer />
            {/* Resto de la aplicación */}
        </>
    );
}

Este patrón permite capturar errores en las peticiones y notificar al usuario mediante mensajes visuales, mejorando la comunicación y la experiencia.

Conclusiones

El uso combinado de React Hooks y Axios proporciona una base sólida para desarrollar aplicaciones web modernas con funcionalidades completas de manipulación de datos. La implementación de un sistema CRUD eficiente, junto con la validación profesional de formularios y la gestión adecuada de errores, garantiza aplicaciones robustas y con excelente experiencia de usuario.

La integración con APIs RESTful desarrolladas en Node.js y Express complementa este ecosistema, permitiendo una comunicación fluida entre frontend y backend. Además, el uso de librerías especializadas para validación y notificaciones facilita la creación de interfaces intuitivas y seguras.

Dominar estas herramientas y técnicas es fundamental para cualquier desarrollador que busque construir aplicaciones web profesionales y escalables, capaces de manejar datos en tiempo real con eficiencia y calidad.