Squad Front

Appearance

Componentes ​

Entender a anatomia de um componente é fundamental para construir interfaces eficientes e reutilizáveis no React.

1. O que é um Componente? ​

No React, um componente é uma função JavaScript que retorna um elemento JSX. Eles permitem dividir a interface em partes independentes e reutilizáveis.

Sintaxe Obrigatória ​

Sempre utilize a palavra-chave function para declarar componentes. Nunca use const para retornar um componente.

tsx
// ✅ Correto
function WelcomeMessage({ name }: { name: string }) {
  return <Text>Olá, {name}!</Text>;
}

// ❌ Incorreto
const WelcomeMessage = ({ name }: { name: string }) => {
  return <Text>Olá, {name}!</Text>;
};

Tipos de Componentes no nosso projeto: ​

  1. Componentes do Design System: Átomos e moléculas base (Botões, Inputs, Cards).
  2. Componentes de Funcionalidade: Componentes que possuem lógica de negócio ou estado (ex: UserSelectionList).
  3. Screens (Telas): Componentes de alto nível que orquestram uma página inteira.

2. Melhores Práticas ​

  1. Mantenha Componentes Pequenos: Se o seu componente tem mais de 200 linhas de JSX, provavelmente ele deve ser dividido em sub-componentes ou fragmentos.
  2. Pura Interface: Tente manter componentes de UI o mais "burros" (stateless) possível, recebendo dados via props.
  3. Use Slot Components: Para componentes de layout, prefira usar o padrão de slots. Ver Guia de UX e Slots.
  4. Sintaxe: Use declarações de função nomeadas. Isso ajuda no debug e mantém a consistência.

3. Veja também ​