📊 Capítulo 02: Componentes, Props & Composição
Especialização em Frontend com React
🗺️ Composição vs Herança no React
flowchart TD
PAI["Componente Pai: <Card variant='elevated'>\n <Card.Header>Meu Título</Card.Header>\n <Card.Body>Conteúdo Rico</Card.Body>\n</Card>"]
--> COMP["Compound Component: Card"]
COMP --> C1["Card.Header consome Context interno do Card"]
COMP --> C2["Card.Body renderiza props.children com flexibilidade total!"]
style PAI fill:#ede7f6,stroke:#512da8,stroke-width:2px
style COMP fill:#fff3e0,stroke:#ff9800,stroke-width:2px
style C1 fill:#e1f5fe,stroke:#03a9f4,stroke-width:1.5px
style C2 fill:#e8f5e9,stroke:#4caf50,stroke-width:2px
🎯 Slide 1: Tipagem Estrita de Props com TypeScript
interface BotaoProps {
variante?: 'primario' | 'secundario' | 'perigo';
carregando?: boolean;
onClick: () => void;
children: React.ReactNode;
}
export function Botao({ variante = 'primario', carregando, onClick, children }: BotaoProps) {
return (
<button disabled={carregando} onClick={onClick} className={`btn btn-${variante}`}>
{carregando ? 'Aguarde...' : children}
</button>
);
}
🎯 Slide 2: Padrão Compound Components
- Permite criar componentes expressivos que compartilham estado implícito (ex.:
<Select>,<Tabs>,<Accordion>) sem poluir a API com dezenas de props boleanas soltas!
🎯 Slide 3: Pureza dos Componentes React
- Um componente React deve ser uma função pura: dadas as mesmas props e estado, ele deve retornar sempre o mesmo JSX sem causar efeitos colaterais na renderização!
🔗 Navegação do Capítulo 02
| 📖 Ler Conteúdo Completo | 🧠 Fazer Quiz | 💻 Ver Exemplos | 🧩 Exercícios |
Slide 1 de 1
Atalhos: ← → Navegar • Espaço Avançar • F Tela Cheia • Home Início • End Fim