#3 - Pensando em componentes

Uma das primeiras dúvidas de quem começa com React é: “ok, entendi que existem componentes, mas como eu sei o que vira um componente e o que não vira?”

Essa pergunta parece simples, mas é exatamente ela que trava muita gente na hora de codar. A boa notícia: dá para desenvolver esse olhar com algumas perguntas práticas.

Primeiro: o que é um componente?

Um componente é um bloco de interface que tem uma responsabilidade clara. Pode ser um botão, um card, um menu, um formulário inteiro — ou até uma página completa. Em React, componentes são funções JavaScript que retornam um pedaço de interface.

function BotaoPrimario() {
  return <button>Clique aqui</button>
}

Simples assim. O componente tem um nome, e retorna o que deve aparecer na tela.

Como identificar o que vira componente

O exercício mais útil é olhar para um layout — pode ser um print, um Figma, qualquer tela — e começar a traçar retângulos ao redor das partes.

Duas perguntas ajudam a guiar esse olhar:

1. Isso se repete?

Se um elemento aparece mais de uma vez na tela — um card de produto, um item de lista, um botão — ele é um ótimo candidato a componente. Você cria uma vez e reutiliza com dados diferentes.

2. Isso tem uma responsabilidade clara?

Se você consegue descrever o que aquele bloco faz em uma frase curta, ele provavelmente merece ser um componente. “Esse bloco mostra as informações de um produto.” “Esse bloco é o cabeçalho da página.”

Se a descrição ficar grande e confusa, pode ser que aquele bloco esteja fazendo coisas demais — e aí vale dividir.

Um exemplo prático

Imagine uma página simples com:

• Um cabeçalho com logo e menu

• Uma lista de cards de produtos

• Um rodapé

Olhando para esse layout com o critério acima:

<App>
  <Header />         → cabeçalho com logo e menu
  <ProductList />    → lista de produtos
    <ProductCard />  → cada card individual (se repete!)
  <Footer />         → rodapé
</App>

💡 Componentes podem conter outros componentes. ProductList não precisa saber os detalhes de como um card é exibido — ela só sabe que renderiza vários ProductCard. Cada um cuida do seu pedaço.

Como criar um componente funcional

Podemos dizer que em React componentes são funções. Algumas convenções importantes:

• O nome do componente sempre começa com letra maiúscula (Header, não header)

• Cada componente fica no seu próprio arquivo .jsx

• O arquivo tem o mesmo nome do componente (Header.jsx)

// Header.jsx
function Header() {
  return (
    <header>
      <h1>Minha Loja</h1>
      <nav>
        <a href="/">Início</a>
        <a href="/produtos">Produtos</a>
      </nav>
    </header>
  )
}

export default Header

E para usar em outro componente:

// App.jsx
import Header from './components/Header'

function App() {
  return (
    <div>
      <Header />
    </div>
  )
}

export default App

Onde guardar os componentes?

Na prática, os componentes ficam dentro da pasta src/components/. À medida que o projeto cresce, você pode criar subpastas por contexto:

src/
└── components/
    ├── Header.jsx
    ├── Footer.jsx
    ├── ProductCard.jsx
    └── ProductList.jsx

Não existe regra única aqui, mas manter um componente por arquivo e nomear de forma clara já resolve bem nos primeiros projetos.

O que evitar no começo

Dois extremos comuns em quem está aprendendo:

Componentizar cedo demais: criar um componente para cada coisa, mesmo elementos simples que nunca vão se repetir. Deixa o projeto difícil de navegar sem necessidade.

Componentizar tarde demais: colocar tudo dentro de um único arquivo enorme. Funciona no início, mas vira um caos quando o projeto cresce.

O equilíbrio: comece mais simples, e quando perceber que algo se repete ou está ficando grande demais, aí extrai para um componente.