Uma peça, reutilizada

Começamos o projeto pela peça: um componente Produto que recebe nome e preco por props e desenha um cartão.

function Produto({ nome, preco }) {
  return (
    <div className="card">
      <h3>{nome}</h3>
      <p>R$ {preco}</p>
    </div>
  );
}

Agora <Produto nome="Planta" preco={25} /> desenha um cartão. Um componente, infinitos produtos.

🎯 Você está aplicando props (dados de fora) + JSX ({valores}) para criar uma peça reutilizável — a base de toda interface React.