O que é React? Componentes e JSX — Componentes, JSX e estado

React: interfaces com componentes

React é uma biblioteca para construir interfaces. A ideia central: a UI se divide em componentes reutilizáveis. No React moderno, um componente é simplesmente uma função que retorna o que deve ser pintado.

function BemVindo() {
  return <h1>Olá, React!</h1>;
}

O nome do componente vai em maiúscula (BemVindo, não bemVindo).
Retorna JSX: uma sintaxe que parece HTML mas vive dentro do JavaScript.

JSX

O JSX permite que você escreva marcação dentro do JS. Entre chaves { } você pode embutir expressões de JavaScript:

function Saudacao() {
  const nome = "Ana";
  return <h1>Olá, {nome}</h1>;
}

Regras-chave do JSX:

Deve retornar um único elemento raiz. Se você precisar de vários, envolva-os em uma <div> (ou em um fragmento <>...</>).
Os atributos vão em camelCase: className (não class), onClick.
As tags sem fechamento se autofecham: <img />, <br />.

function Cartao() {
  return (
    <div className="cartao">
      <h2>Título</h2>
      <p>Conteúdo</p>
    </div>
  );
}

Nestes exercícios você escreve o componente e o vê renderizado na prévia na hora.