← Ruta· Lección 4 de 8

La misma galería en React

Usar el Custom Element dentro de JSX — props se vuelven atributos.

TODO i18n: Traducción completa pendiente. Título y descripción localizados; el cuerpo permanece en portugués por ahora.

O mesmo <image-gallery> da lição 3 roda dentro do React. O playground usa esm.sh + Sucrase (como na trilha React).

Padrão

Defina / importe o Custom Element (side-effect customElements.define)
Use a tag no JSX como HTML

function App() {
  return (
    <image-gallery columns="3">
      <img src="..." alt="A" />
      <img src="..." alt="B" />
    </image-gallery>
  );
}

TypeScript pode reclamar da tag desconhecida — declare em jsx.d.ts no app real.

Por que isso importa

O CE continua sendo a fonte da verdade visual. React só compõe e gerencia rota/dados. Trocar React por outro host não exige reescrever a galeria.