⚛️ Simplificando o Código com o Padrão Composite (Composição) no React

Um dos princípios mais poderosos do React é a Composição de Componentes. Mas você sabia que isso se baseia em um padrão de projeto clássico chamado Composite?

O que é? É uma técnica para construir estruturas complexas (como um painel ou um layout de página) de forma flexível, tratando componentes simples e componentes containers da mesma maneira.

**Como fazemos isso no React? **Usamos a mágica da propriedade children.
**Componente Container (Composição): **Cria um wrapper genérico (Painel, Card, Layout).

**Conteúdo (Folhas): **Qualquer componente que você coloca dentro desse wrapper.

_Exemplo Prático:
_Em vez de criar PainelComBotãoA e PainelComBotãoB, criamos um único componente genérico Painel que aceita qualquer coisa como filho:

// Em vez de hardcoding...

<PainelGenerico>
 {/* Passamos o Botão (A Folha) como filho do Painel (A Composição) */}
 <BotaoSalvar /> 
</PainelGenerico> 

O Benefício:

Reutilização Máxima: Você cria layouts e wrappers uma única vez e os reutiliza infinitamente.

Código Limpo: Evita a criação de componentes desnecessários e reduz a complexidade do código.

Manutenção: Se você mudar o layout do Painel, o código dos seus Botões não precisa mudar.

Dominar o Composite é dominar a essência do React: construir UIs complexas a partir de blocos de montar simples e intercambiáveis.