Quase HTML — com diferenças que importam

O que o componente retorna é JSX: parece HTML, mas roda dentro do JavaScript. Três diferenças-chave:

1. Use className em vez de class (class já é palavra reservada do JS)
2. Coloque valores do JS com chaves { }
3. Tudo precisa estar dentro de uma tag mãe (não pode "flutuar" solto)

const preco = 25;
return <p className="oferta">Custa R$ {preco}</p>;

O {preco} é uma "janelinha" que o React troca pelo valor da variável.

⚠️ Erro comum: escrever class="..." (do HTML). No JSX é className. E lembre: retornar dois elementos "irmãos" soltos dá erro — envolva num <div>.