Renderização condicional

Às vezes um pedaço da tela só deve aparecer sob uma condição. O jeito mais direto é o &&:

{total >= 100 && <p>🎉 Frete grátis!</p>}

Leia como: "se total ≥ 100, então mostre o parágrafo". Se a condição é falsa, nada aparece.

🧠 Modelo mental: o && é um interruptor de "mostra/não mostra". À esquerda a condição; à direita o que mostrar quando ela for verdadeira.

💡 Isso resolve os "avisos condicionais": um selo de "esgotado", um badge de "novo", uma mensagem de erro — tudo aparece só quando faz sentido.