Componentes: funções que constroem a UI

Quando uma parte da tela tem uma responsabilidade clara ou se repete, ela pode virar um componente. Componentes de função começam com letra maiúscula e retornam JSX.

// src/components/Badge.jsx
export default function Badge() {
  return <span className="badge">Novo</span>;
}

// src/components/ProductCard.jsx
import Badge from './Badge.jsx';

export default function ProductCard() {
  return (
    <article className="product-card">
      <Badge />
      <h2>Café Catuaí</h2>
      <p>Torra média · 250 g</p>
    </article>
  );
}

// src/App.jsx
import ProductCard from './components/ProductCard.jsx';

export default function App() {
  return (
    <main>
      <h1>Produtos</h1>
      <ProductCard />
    </main>
  );
}

Separar arquivo não é obrigação. Um componente merece existir quando a divisão melhora leitura, reutilização ou responsabilidade. Não só porque existem três linhas de JSX.

• Nome em maiúscula: diferencia componente React de tag HTML.
• export/import: organizam componentes em arquivos.
• Composição: acontece quando um componente renderiza outro.

Dica: evite criar um componente para cada div. Componentização é uma decisão de design, não uma contagem de tags.

No próximo nó, vamos fazer o mesmo ProductCard receber dados diferentes usando props.