Qué es React: describir la UI, no manipularla

En el supercurso de JavaScript actualizabas el DOM a mano: createElement, textContent, append, un render() que repintaba todo. Funcionaba —hasta que la app crecía y sincronizar la pantalla con los datos se volvía un caos. React invierte el problema: en vez de DECIRLE al navegador cómo cambiar el DOM paso a paso, DESCRIBES cómo debe verse la UI para un estado dado, y React se encarga del cómo. Hoy entiendes ese cambio de mentalidad, el más importante del framework.

El termostato, no el calefactor

Imperativo vs declarativo

Recuerda cómo pintabas una lista en JavaScript puro —diciéndole al DOM cada paso:

// IMPERATIVO (SC-02): tú manejas cada paso del DOM
const lista = document.querySelector("#lista");
lista.textContent = "";                    // limpiar
for (const gasto of gastos) {
const li = document.createElement("li"); // crear
li.textContent = gasto.nombre;           // llenar
lista.append(li);                        // insertar
}
// y cada vez que 'gastos' cambia, repites TODO esto a mano

En React, describes QUÉ debe verse y te olvidas del cómo:

// DECLARATIVO (React): describes el resultado para los datos actuales
function ListaGastos({ gastos }: { gastos: Gasto[] }) {
return (
  <ul>
    {gastos.map((g) => <li key={g.id}>{g.nombre}</li>)}
  </ul>
);
}
// cuando 'gastos' cambia, React recalcula y actualiza el DOM por ti

La diferencia es profunda: en JS puro, TÚ mantienes el DOM sincronizado con los datos —y ahí viven la mitad de los bugs—. En React, describes la UI como una FUNCIÓN de los datos (UI = f(datos)), y el framework se encarga de que la pantalla siempre refleje el estado actual. Menos código, menos bugs de sincronización, más claridad.

Componentes: las piezas de LEGO de la UI

Tu primer componente

Aquí está, corriendo de verdad. Un componente es una función que devuelve JSX (lo verás a fondo en la próxima lección); se exporta como default para que React lo renderice:

Cambia "Sara" por tu nombre y mira cómo la UI se actualiza. Fíjate en lo que NO hiciste: no seleccionaste un elemento, no llamaste a textContent, no manejaste el DOM. Solo DESCRIBISTE el resultado —<h1>¡Hola, {nombre}!</h1>— y React lo pintó. Ese {nombre} inserta el valor de la variable en la UI: es JavaScript dentro de la descripción, el corazón de JSX.

El setup real: Vite + React

En este curso los playgrounds corren React por ti, pero en tu máquina un proyecto React se monta en segundos con Vite:

pnpm create vite@latest mi-app --template react-ts
cd mi-app
pnpm install
pnpm dev

--template react-ts crea un proyecto React con TypeScript (el que usarás siempre, tras el supercurso de TS). Vite te da un servidor de desarrollo instantáneo con recarga en caliente: guardas y ves el cambio al momento. Es el estándar moderno para arrancar apps de React —olvídate de configuraciones complejas.

Mini-reto

Familiarízate con el modelo: 1) en el playground, agrega una variable edad y muéstrala en un nuevo <p> usando {edad}; 2) crea una variable esMayor (booleano) y muestra un texto distinto según su valor con un operador ternario dentro de {}; 3) cambia los valores y observa cómo la UI se actualiza sin que toques el DOM. Siente la diferencia con el textContent del SC-02.

Qué sigue

Escribiste JSX sin explicarlo. La próxima lección lo desmenuza: qué es exactamente esa sintaxis que mezcla HTML y JavaScript, cómo insertar expresiones, y las reglas que debes conocer —className, los {}, los fragmentos—. El idioma en el que describes toda UI de React.