Puente a React 19: tu tarjeta como componente

Este módulo es la conexión que hace todo el curso valer doble: verás cómo los MISMOS componentes que construiste a mano se transforman en cada framework. Empezamos por React 19 con la tarjeta interactiva del módulo 14. No vas a APRENDER React aquí (eso es su curso) — vas a RECONOCER tu trabajo en él, y a entender la idea que lo cambia todo.

De dar instrucciones a describir el destino

Tu tarjeta del módulo 14, en React

Dale "Me gusta" a cada tarjeta: cambian independientemente, y NUNCA escribiste classList.toggle ni textContent. Solo describiste "cómo se ve la tarjeta según activo", y React sincroniza el DOM. Además, <TarjetaLike titulo="..." /> reutiliza el MISMO componente con datos distintos — los PROPS que en el módulo 14 eran variables sueltas, ahora son entradas declaradas.

Lado a lado: el mismo cambio

// IMPERATIVO (módulo 14): tú manipulas el DOM paso a paso
let activo = false;
boton.addEventListener("click", () => {
activo = !activo;
boton.classList.toggle("activo", activo);        // cambia la clase a mano
boton.textContent = activo ? "Te gusta" : "Me gusta";  // cambia el texto a mano
});

// DECLARATIVO (React): describes la UI; el estado la gobierna
const [activo, setActivo] = useState(false);
// ...
<button className={activo ? "like activo" : "like"} onClick={() => setActivo(!activo)}>
{activo ? "Te gusta" : "Me gusta"}
</button>

La lógica de estado es la misma (un booleano que se alterna); lo que DESAPARECE es la sincronización manual del DOM. En el módulo 14 tenías que acordarte de actualizar CADA cosa que dependía de activo; en React, todo lo que usa activo se actualiza solo. Con una tarjeta es cómodo; con una app de mil piezas, es la diferencia entre posible e imposible.

Mini-reto

En el playground, agrega un CONTADOR de "me gusta" a la tarjeta: un segundo estado (const [conteo, setConteo] = useState(0)) que suba al activar, y muéstralo en el return. Fíjate en que solo declaras el nuevo dato y dónde va — no escribes ni una línea para "actualizar el contador en pantalla". Sentir esa comodidad es entender por qué existen los frameworks.

Qué sigue

Viste tu componente convertirse en React, y podrás construir apps enteras así en su curso. El siguiente puente sube un nivel: la landing del módulo 16 como una app de Next.js con RUTAS y componentes de SERVIDOR — el framework que lleva React a sitios completos y rápidos.