Hubo un tiempo en que las páginas web eran simples: HTML para la estructura, CSS para los estilos, y un poco de JavaScript para que un menú se desplegara o un formulario se validara.
Pero la web creció. Hoy usamos aplicaciones web completas en el navegador: Gmail, Spotify, Twitter, Notion... Aplicaciones con miles de elementos interactivos que cambian constantemente según lo que hace el usuario.
Construir estas interfaces con JavaScript puro se volvió un caos. Imagina tener que decirle al navegador, paso a paso, qué elemento crear, dónde insertarlo, cuándo actualizarlo y cuándo eliminarlo. Para cada botón, cada lista, cada notificación.
// Imperativo (JavaScript puro)
const btn = document.createElement('button');
btn.textContent = 'Clicks: 0';
let count = 0;
btn.addEventListener('click', () => {
count++;
btn.textContent = 'Clicks: ' + count;
});
document.body.appendChild(btn);Le dices al navegador CÓMO hacerlo: crea esto, añade aquello, escucha esto...
En 2013, Facebook tenía exactamente este problema. Su interfaz era tan compleja que los bugs aparecían por todas partes: las notificaciones no se actualizaban, los contadores mostraban números incorrectos, los mensajes aparecían duplicados.
Un ingeniero llamado Jordan Walke propuso una idea radical: ¿y si en vez de decirle al navegador CÓMO actualizar la página, simplemente le describimos CÓMO debería verse?
Así nació React — una librería de JavaScript para construir interfaces de usuario de forma declarativa.
Para entender por qué React es especial, compara estas dos formas de pensar:
Imperativo (JavaScript puro — le dices CÓMO hacerlo paso a paso):
Declarativo (React — le describes QUÉ quieres ver):
Con React, tú describes el resultado final y React se encarga de hacer todos los cambios necesarios en la página. Es como la diferencia entre darle a alguien instrucciones paso a paso para llegar a un sitio versus simplemente decirle la dirección.
La idea más poderosa de React es que puedes dividir tu interfaz en componentes — piezas independientes y reutilizables. Piensa en piezas de LEGO:
Cada componente es una función de JavaScript que devuelve un trozo de interfaz. Y lo mejor: puedes componer componentes dentro de otros componentes, como cajas dentro de cajas.
¿Ves esas etiquetas que parecen HTML pero empiezan con mayúscula? Son componentes de React. Pronto aprenderás a crear los tuyos.
Un detalle importante: React es una librería, no un framework. ¿La diferencia? Un framework te dicta cómo organizar todo tu proyecto. React solo se encarga de una cosa: la interfaz de usuario. Para lo demás (rutas, peticiones a APIs, etc.) tú eliges las herramientas que prefieras.
Esto lo hace ligero, flexible y fácil de adoptar gradualmente.
Mira el editor a tu derecha. Ya tienes un componente App funcionando con un <h1> y un <p>. El preview de abajo muestra el resultado en vivo.
<h1> por algo tuyo<p> por un mensaje personalEsto es React en acción: describes la interfaz y React se encarga del resto.
Acabas de dar tu primer paso en React. A partir de aquí, construirás interfaces que antes parecían imposibles.