Estado + evento + JSX, tudo junto

O carrinho, agora em React — compare com as ~15 linhas de JS puro do curso anterior:

function Carrinho() {
  const [qtd, setQtd] = useState(0);

  return (
    <div>
      <p>Carrinho: {qtd}</p>
      <button onClick={() => setQtd(qtd + 1)}>+1</button>
    </div>
  );
}

Sem getElementById, sem textContent. Você descreve (Carrinho: {qtd}) e liga o botão ao setQtd. O React re-renderiza e atualiza o número sozinho.

🎯 Este é o padrão de todo componente interativo: um useState, o valor mostrado com { }, e um evento chamando o set. Grave-o.