Ir a la página de inicio
Home / Posts
Compartir en Twitter
Go to Homepage

TUTORIAL COMPLETO DE REACTJS: DOM, COMPONENTES Y VISTAS DECLARATIVAS

November 29, 2025

Introducción a ReactJS: Fundamentos Esenciales

ReactJS es una biblioteca de JavaScript de código abierto diseñada para construir interfaces de usuario dinámicas y eficientes, especialmente en aplicaciones de una sola página. Desarrollada por Facebook, su popularidad en 2025 sigue creciendo gracias a su enfoque basado en componentes y su capacidad para optimizar el rendimiento mediante el DOM virtual. Este tutorial explora los conceptos clave de ReactJS: el DOM, los componentes y las vistas declarativas, proporcionando ejemplos prácticos para programadores que buscan dominar esta tecnología en el contexto del desarrollo web moderno.

ReactJS permite a los desarrolladores crear aplicaciones escalables dividiendo la interfaz en pequeños bloques reutilizables llamados componentes. A diferencia de las manipulaciones directas del DOM, React utiliza un enfoque declarativo, donde los programadores especifican cómo debe verse la interfaz en función del estado, y la biblioteca se encarga de actualizar el DOM de manera eficiente. Este enfoque reduce errores y mejora la mantenibilidad del código, lo que lo hace ideal para proyectos complejos.

Para comenzar, es fundamental comprender los requisitos previos. Los desarrolladores deben tener conocimientos sólidos de JavaScript, incluyendo ES6 (let, const, funciones flecha, promesas y async/await), así como un entendimiento básico de HTML y CSS. Familiarizarse con conceptos como el DOM, el modelo de objetos del documento que representa la estructura de una página web, también es esencial. Con estos fundamentos, los programadores pueden aprovechar al máximo las capacidades de ReactJS.

// Ejemplo básico de un componente funcional en React
import React from "react";

function Saludo() {
    return <h1>¡Hola, mundo!</h1>;
}

export default Saludo;

El código anterior muestra un componente funcional simple que renderiza un encabezado. Este ejemplo ilustra la simplicidad de la sintaxis JSX, una extensión de JavaScript que permite escribir estructuras similares a HTML dentro del código.

Entendiendo el DOM y el DOM Virtual

El Document Object Model (DOM) es una representación en memoria de la estructura de una página web, donde cada elemento HTML es un nodo que puede ser manipulado mediante JavaScript. Sin embargo, las operaciones directas en el DOM real son costosas en términos de rendimiento, ya que cada cambio, como actualizar un texto o agregar un elemento, requiere recalcular el diseño y repintar la página.

React introduce el concepto de DOM virtual, una copia ligera del DOM real mantenida en memoria. Cuando el estado de una aplicación cambia, React actualiza primero el DOM virtual y luego compara esta versión con la anterior para identificar las diferencias, un proceso conocido como reconciliación. Solo los cambios necesarios se aplican al DOM real, optimizando el rendimiento y mejorando la experiencia del usuario.

// Ejemplo de actualización de estado que afecta el DOM virtual
import React, { useState } from "react";

function Contador() {
    const [count, setCount] = useState(0);

    return (
        <div>
            <p>Has hecho clic {count} veces</p>
            <button onClick={() => setCount(count + 1)}>Incrementar</button>
        </div>
    );
}

export default Contador;

En este ejemplo, el componente Contador utiliza el hook useState para gestionar un estado local. Cada vez que el usuario hace clic en el botón, el estado count se actualiza, y React re-renderiza solo las partes afectadas del DOM, demostrando la eficiencia del DOM virtual.

La optimización del rendimiento es una ventaja clave del DOM virtual. En aplicaciones tradicionales, los desarrolladores debían buscar elementos específicos y actualizarlos manualmente, lo que podía introducir errores y ralentizar la interfaz. Con React, los programadores describen el estado deseado, y la biblioteca maneja las actualizaciones de manera eficiente, minimizando las operaciones costosas.

Componentes: Los Bloques de Construcción de React

En React, todo es un componente. Un componente es una pieza de código reutilizable que define una parte de la interfaz de usuario, como un botón, un formulario o una sección completa de la página. Los componentes pueden ser funcionales (basados en funciones) o de clase, aunque en 2025 los componentes funcionales son la norma gracias a los hooks introducidos en React 16.8.

Los componentes permiten dividir una aplicación en partes manejables, facilitando la colaboración en equipos y la reutilización de código. Cada componente puede tener su propio estado y propiedades (props), lo que permite crear interfaces modulares y dinámicas.

// Ejemplo de componente con props
import React from "react";

function Tarjeta({ nombre, ocupacion }) {
    return (
        <div>
            <h2>{nombre}</h2>
            <p>Ocupación: {ocupacion}</p>
        </div>
    );
}

export default Tarjeta;

// Uso del componente
<Tarjeta nombre="Ana" ocupacion="Desarrolladora" />;

En este ejemplo, el componente Tarjeta recibe props (nombre y ocupacion) y las utiliza para renderizar contenido dinámico. Las props son inmutables y permiten pasar datos de un componente padre a un componente hijo, promoviendo la reutilización de componentes.

Existen dos tipos principales de componentes en React: controlados y no controlados. Los componentes controlados están vinculados a un estado gestionado por React, mientras que los no controlados dependen del DOM para manejar su estado, como los elementos de formulario tradicionales. En 2025, los componentes controlados son preferidos por su previsibilidad y facilidad de depuración.

// Ejemplo de componente controlado
import React, { useState } from "react";

function Formulario() {
    const [valor, setValor] = useState("");

    const manejarCambio = (e) => {
        setValor(e.target.value);
    };

    return (
        <input
            type="text"
            value={valor}
            onChange={manejarCambio}
            placeholder="Escribe algo"
        />
    );
}

export default Formulario;

Este componente controlado utiliza useState para sincronizar el valor del input con el estado de React, asegurando que los cambios se reflejen de manera consistente en la interfaz.

Vistas Declarativas: Simplificando el Desarrollo

El enfoque declarativo de React es uno de sus principales atractivos. En lugar de especificar paso a paso cómo manipular el DOM (enfoque imperativo), los desarrolladores describen cómo debe verse la interfaz en función del estado actual, y React se encarga del resto. Este paradigma reduce la complejidad y mejora la legibilidad del código.

Por ejemplo, en un enfoque imperativo, para actualizar un elemento de la página, un desarrollador podría usar JavaScript vanilla para buscar un nodo y modificar su contenido:

// Enfoque imperativo
document.getElementById("titulo").innerText = "Nuevo título";

En cambio, con React, el mismo resultado se logra de manera declarativa:

// Enfoque declarativo en React
import React, { useState } from "react";

function Titulo() {
    const [texto, setTexto] = useState("Título inicial");

    return (
        <div>
            <h1>{texto}</h1>
            <button onClick={() => setTexto("Nuevo título")}>Cambiar</button>
        </div>
    );
}

export default Titulo;

En este caso, el componente Titulo define el estado texto y lo renderiza en un elemento h1. Al hacer clic en el botón, el estado se actualiza, y React re-renderiza automáticamente el componente, aplicando solo los cambios necesarios al DOM. Este enfoque declarativo elimina la necesidad de interactuar directamente con el DOM, reduciendo errores y mejorando la mantenibilidad del código.

JSX, la sintaxis que combina JavaScript y HTML, es fundamental para las vistas declarativas. Aunque se asemeja a HTML, JSX es en realidad JavaScript, lo que permite incrustar expresiones dinámicas usando llaves {}.

// Ejemplo de JSX con expresiones dinámicas
import React from "react";

function Bienvenida({ usuario }) {
    return (
        <div>
            <h1>
                Bienvenid{usuario.genero === "f" ? "a" : "o"}, {usuario.nombre}!
            </h1>
            <p>Edad: {usuario.edad}</p>
        </div>
    );
}

export default Bienvenida;

Aquí, el componente Bienvenida usa expresiones JSX para personalizar el saludo según el género y mostrar la edad del usuario, demostrando cómo JSX facilita la creación de interfaces dinámicas.

JSX y su Rol en React

JSX es una extensión de sintaxis que permite escribir estructuras similares a HTML dentro de JavaScript, haciendo que el código sea más intuitivo. Aunque puede parecer HTML, JSX se compila a llamadas de funciones de JavaScript, específicamente a React.createElement, que construye el DOM virtual.

// JSX compilado
// Código JSX
const elemento = <h1>Hola, mundo</h1>;

// Equivalente en JavaScript puro
const elemento = React.createElement("h1", null, "Hola, mundo");

JSX ofrece varias ventajas, como la capacidad de incrustar lógica directamente en el marcado. Por ejemplo, se pueden usar operadores ternarios o métodos de arrays como map para renderizar listas dinámicamente.

// Ejemplo de renderizado de lista con map
import React from "react";

function ListaUsuarios({ usuarios }) {
    return (
        <ul>
            {usuarios.map((usuario) => (
                <li key={usuario.id}>{usuario.nombre}</li>
            ))}
        </ul>
    );
}

export default ListaUsuarios;

En este ejemplo, el componente ListaUsuarios renderiza una lista de nombres usando el método map. La prop key es esencial para ayudar a React a identificar elementos únicos y optimizar las actualizaciones del DOM.

JSX también permite evitar nodos adicionales en el DOM usando fragmentos (<>…</>):

// Uso de fragmentos
import React from "react";

function GrupoElementos() {
    return (
        <>
            <h1>Título</h1>
            <p>Descripción</p>
        </>
    );
}

export default GrupoElementos;

Los fragmentos son útiles para agrupar elementos sin introducir divs innecesarios, manteniendo el DOM limpio y eficiente.

Estado y Ciclo de Vida en React

El estado es un concepto central en React que permite a los componentes almacenar y gestionar datos que cambian con el tiempo. En los componentes funcionales, el hook useState es la herramienta principal para manejar el estado.

// Ejemplo de estado con useState
import React, { useState } from "react";

function Interruptor() {
    const [encendido, setEncendido] = useState(false);

    return (
        <button onClick={() => setEncendido(!encendido)}>
            {encendido ? "Apagar" : "Encender"}
        </button>
    );
}

export default Interruptor;

En este ejemplo, el componente Interruptor alterna entre “Encender” y “Apagar” según el estado encendido, mostrando cómo el estado afecta el renderizado.

Para efectos secundarios, como llamadas a APIs o suscripciones, se utiliza el hook useEffect. Este hook permite sincronizar el componente con sistemas externos o el DOM después de que se renderiza.

// Ejemplo de useEffect para llamada a API
import React, { useState, useEffect } from "react";

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

    useEffect(() => {
        fetch("https://api.ejemplo.com/usuario")
            .then((res) => res.json())
            .then((data) => setDatos(data));
    }, []); // Array vacío para ejecutar solo al montar

    return <div>{datos ? datos.nombre : "Cargando..."}</div>;
}

export default DatosUsuario;

Aquí, useEffect realiza una llamada a una API cuando el componente se monta, actualizando el estado con los datos recibidos. El array de dependencias vacío asegura que el efecto se ejecute solo una vez.

En 2025, con el lanzamiento de React 19, se han introducido mejoras en la gestión del estado, como soporte nativo para características concurrentes, que permiten transiciones más suaves y una mejor experiencia de usuario en aplicaciones con datos en tiempo real.

Optimización y Mejores Prácticas

Optimizar aplicaciones React es crucial para garantizar un rendimiento óptimo, especialmente en proyectos grandes. Una práctica clave es minimizar los re-renderizados innecesarios usando herramientas como React.memo para componentes que no cambian frecuentemente.

// Uso de React.memo
import React from "react";

const ComponenteEstatico = React.memo(({ texto }) => {
    return <p>{texto}</p>;
});

export default ComponenteEstatico;

React.memo evita que el componente se vuelva a renderizar si sus props no han cambiado, mejorando el rendimiento.

Otra práctica importante es gestionar correctamente las claves (keys) en listas para optimizar la reconciliación del DOM. Además, herramientas modernas como TanStack Query y Vite, populares en 2025, facilitan la gestión de datos y la construcción de aplicaciones rápidas.

proyecto-react/
├── src/
│   ├── components/
│   │   ├── Tarjeta.jsx
│   │   ├── Formulario.jsx
│   ├── App.jsx
│   ├── index.js
├── package.json

Esta estructura de directorios muestra una organización típica para un proyecto React, con componentes separados para mantener el código modular.

Conclusiones

ReactJS sigue siendo una de las bibliotecas más poderosas para el desarrollo frontend en 2025, gracias a su enfoque basado en componentes, el DOM virtual y las vistas declarativas. Al dominar conceptos como JSX, el estado y los hooks, los desarrolladores pueden crear interfaces de usuario dinámicas y eficientes. Este tutorial ha proporcionado una base sólida para comprender cómo React simplifica la construcción de aplicaciones escalables, desde la gestión del estado hasta la optimización del rendimiento. Con las mejoras introducidas en React 19 y el soporte de herramientas modernas, los programadores tienen todo lo necesario para construir aplicaciones innovadoras que respondan a las demandas del desarrollo web actual.