React
Introducción a React y su modelo declarativo: interfaces como función del estado, renderizado, componentes, reconciliación y separación entre descripción y efectos.
React es una biblioteca para construir interfaces a partir de datos. Su idea central no es “escribir menos DOM”, sino describir qué interfaz corresponde a cada estado y permitir que React coordine las actualizaciones.
En una interfaz imperativa decides cada paso que modifica la pantalla:
const button = document.querySelector("#toggle");
const panel = document.querySelector("#panel");
button.addEventListener("click", () => {
panel.hidden = !panel.hidden;
button.textContent = panel.hidden ? "Mostrar" : "Ocultar";
});En React describes los estados posibles:
type DetailsProps = {
isOpen: boolean;
onToggle: () => void;
};
function Details({ isOpen, onToggle }: DetailsProps) {
return (
<section>
<button type="button" onClick={onToggle} aria-expanded={isOpen}>
{isOpen ? "Ocultar" : "Mostrar"}
</button>
{isOpen && <p>Información adicional del producto.</p>}
</section>
);
}La relación puede resumirse así:
props + state + context
↓
render
↓
árbol de elementos de React
↓
reconciliation
↓
commit
↓
DOM actualizadoLas interfaces reales acumulan estados relacionados: carga, datos, errores, filtros, permisos, formularios y navegación. Cuando cada transición modifica manualmente distintos nodos del DOM, es fácil que la pantalla quede inconsistente.
React propone que la interfaz sea una consecuencia de los datos actuales. El componente calcula el resultado visual y React se encarga de coordinar cómo aplicarlo al entorno de destino.
function OrderStatus({ status }: { status: "pending" | "paid" | "cancelled" }) {
if (status === "pending") return <p>Pago pendiente</p>;
if (status === "paid") return <p>Pago confirmado</p>;
return <p>Pedido cancelado</p>;
}No existe una instrucción que busque el párrafo anterior y cambie su texto. El resultado depende directamente de status.
React define el modelo de componentes, estado, Hooks y reconciliación. No conoce únicamente el DOM: puede trabajar con distintos host environments.
Para una aplicación web, react-dom conecta ese modelo con el navegador:
import { StrictMode } from "react";
import { createRoot } from "react-dom/client";
import { App } from "./App";
const container = document.getElementById("root");
if (!container) {
throw new Error("Root container not found");
}
createRoot(container).render(
<StrictMode>
<App />
</StrictMode>,
);React no reemplaza HTML, CSS ni JavaScript. Los organiza dentro de un modelo de interfaz.
React no incluye por sí solo:
Puedes ensamblar estas decisiones manualmente o utilizar un framework construido sobre React. El notebook de Next.js cubre routing, rendering por ruta, integración de servidor y despliegue del framework.
Una interfaz React se compone como un árbol:
App
├── Header
├── ProductPage
│ ├── ProductGallery
│ ├── ProductInformation
│ └── AddToCartForm
└── FooterLos componentes propios pueden devolver elementos host como button, form, section o img. React utiliza el árbol para coordinar datos, identidad, contexto y actualizaciones.
Normalmente los datos entran desde componentes superiores mediante props. Los componentes inferiores notifican acciones mediante callbacks.
function QuantitySelector({
value,
onChange,
}: {
value: number;
onChange: (nextValue: number) => void;
}) {
return (
<div>
<button type="button" onClick={() => onChange(Math.max(1, value - 1))}>
Restar
</button>
<output aria-live="polite">{value}</output>
<button type="button" onClick={() => onChange(value + 1)}>
Sumar
</button>
</div>
);
}El hijo no modifica directamente el estado del padre. Comunica una intención.
React calcula un siguiente árbol de elementos, compara tipos, posiciones y keys, y decide qué trabajo debe aplicar. Esa reconciliación evita mutaciones innecesarias, pero no convierte cualquier aplicación en rápida.
También importan:
Un render de React tampoco significa que todo el DOM haya cambiado.
React suele ser útil cuando existen:
Una página pequeña, principalmente estática y con pocas interacciones puede resolverse mejor con HTML, CSS y JavaScript directo. Introducir React añade dependencias, tooling, JavaScript enviado al cliente y una capa conceptual adicional.
La pregunta no es “¿se puede hacer con React?”, sino “¿el modelo de componentes y estado compensa el coste para este producto?”.
Crear un proyecto React y entender su entrada explica qué piezas mínimas necesita una aplicación web antes de renderizar su primer componente.