Dados de fora para dentro

Sem props, o componente Produto só sabe mostrar UM produto fixo. Com props, você passa dados de fora — como atributos numa tag:

<Produto nome="Planta Aurora" />
<Produto nome="Vaso de cerâmica" />

E o componente recebe as props (entre chaves, no parênteses):

function Produto({ nome }) {
  return <h2>{nome}</h2>;
}

🧠 Modelo mental: props são os argumentos do componente — como parâmetros de uma função (que você já conhece!). O mesmo componente, dados diferentes, telas diferentes.

💡 Direção única: props sempre fluem de fora para dentro (do pai para o filho). É o "data flows down" do React.