Programação B

De Manipulação do DOM para Componentes

No capítulo anterior, renderizar um card de evento era assim:

const card = document.createElement("article");
const title = document.createElement("h2");
title.textContent = ev.title;
const date = document.createElement("time");
date.textContent = new Date(ev.date).toLocaleString("pt-BR", {
  dateStyle: "short", timeStyle: "short",
});
// ... mais 4 createElement + textContent ...
card.append(title, date, desc, location, info, btn);
container.appendChild(card);

Com React, o mesmo card vira:

function EventCard({ event }: { event: Event }) {
  return (
    <article>
      <h2>{event.title}</h2>
      <time dateTime={event.date}>
        {new Date(event.date).toLocaleString("pt-BR", {
          dateStyle: "short",
          timeStyle: "short",
        })}
      </time>
      <p>{event.description}</p>
      <p>📍 {event.location}</p>
      <p>Vagas: {event.capacity} · Organizado por {event.organizer_name}</p>
    </article>
  );
}

A diferença: o componente descreve o que deve aparecer na tela para um dado evento. Não diz como atualizar o DOM — não cria elementos, não busca nós, não define .textContent. Quando os dados mudam, o React chama o componente de novo, compara a descrição anterior com a nova, e aplica apenas as diferenças necessárias no DOM.

Esse é o JSX — a sintaxe que mistura JavaScript com marcação HTML. Parece HTML, mas é JavaScript: as chaves {} contêm expressões JavaScript avaliadas em tempo real. O JSX é compilado em chamadas de função que o React processa internamente. Você escreve marcação, o compilador transforma em código.