O gran finale

Junte a vitrine (.map) com o estado do total e a condicional do frete:

const [total, setTotal] = useState(0);

return (
  <div>
    {produtos.map((p) => (
      <button key={p.nome} onClick={() => setTotal(total + p.preco)}>
        {p.nome} — R$ {p.preco}
      </button>
    ))}
    <p>Total: R$ {total}</p>
    {total >= 100 && <p>🎉 Frete grátis!</p>}
  </div>
);

Clique nos produtos no Browser: o total sobe e o frete grátis aparece aos R$ 100 — tudo pelo estado.

🎓 Você construiu uma loja React de verdade: componentes, props, estado com re-render, .map e renderização condicional. Estes são os pilares que sustentam apps usados por milhões.

A trilha continua: o próximo e último curso, Back-end, dá o servidor e o banco por trás desta loja — fechando o ciclo full-stack. 🚀