← Trilha· Lição 4 de 8

Mesma galeria no React

Usar o Custom Element dentro de JSX — props viram atributos.

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="https://picsum.photos/id/249/300/300" alt="Cidade à noite" />
      <img src="https://picsum.photos/id/28/300/300" alt="Floresta verde" />
    </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.