XP 0

Usando componentes

Componentes viram tags

Depois de criado, você usa o componente como uma tag — e pode aninhar vários dentro de outro:

function App() {
  return (
    <div>
      <Titulo />
      <p>As melhores plantas da cidade.</p>
      <Titulo />
    </div>
  );
}

Um componente (App) pode usar outros (Titulo) — é assim que a interface inteira se monta, de peça em peça.

🧠 Modelo mental: os componentes formam uma árvore. O App é o tronco; Titulo, Produto, Botao são os galhos. Cada um cuida do seu pedaço.

Note as duas formas de fechar: <Titulo /> (auto-fechável, sem filhos) e <div>...</div> (com conteúdo dentro).

Pontos-chave

  • <Titulo />
    usar um componente é escrevê-lo como uma tag.