Criando Componentes React Flexíveis com Compound Components e o Princípio SRP

[@devjunioralves]

✅ Link com 10% DESCONTO: www.rocketseat.com.br/assinatura?coupon=devjunioralves& ✅ Clean Code: amzn.to/3hHXVKY ✅ Arquitetura Limpa (Clean Arch): amzn.to/3Viqw7v --- 👉 Segue lá no Instagram: instagram.com/devjunioralves/ 👉 Nossa comunidade no Discord: discord.com/invite/bVxW4Dhgrf

[@brunosb7966]

Uma dúvida que tenho: na build final, ele não vai importar tudo que está no objeto de componentes que você usou no index? Já utilizei dessa forma, mas ainda tenho dúvida sobre isso.

[@diogosoares6546]

Tambem conheco como Composition Pattern, uso muitoooo

[@JucemarDimon]

Valeu!

[@devjunioralves]

Caramba, valeu demais Jucemar, muito obrigado meu amigo! 👊

[@emeci430]

Refatorando em 3, 2 , 1 .... Excelente conteúdo!

[@devjunioralves]

Kkkkkkk valeuuu 👊

[@EduardoAlves-gq7rk]

Seus conteúdos sempre avançados 🤝, valeu!!!

[@JoaoVitor-be1iw]

Cara gosto muito dos teus conteúdos, muito didático e sempre trazendo conceitos de desenvolvimento em react que quase não acho por ai

[@viniciussnitram]

A shadcn/ui realmente utiliza os componentes dessa forma. Estou usando no trabalho e aprendendo demais, aprendendo e aplicando ao mesmo tempo. Exemplo: shadcn/ui faz , (seria o label dos inputs, radio buttons, etc.), (mensagem auxiliar) e outros. É legal utilizar com zod e react-hook-form. O vídeo foi bem interessante porque quando a gente usa uma lib pronta, a gente usa no automático e não pensa o porquê de ser separado assim, nice

[@jsdev5362]

Parabéns pelo conteúdo. Este padrão está sendo um divisor de águas no meu desenvolvimento. Até conseguimos chegar no resultando usando props e tal, eu vi sobre esse pattern faz 5 anos, não entendi bem e achei desnecessário na época. Não é algo novo, o React é feito pra ser assim... Eles incentivam o padrão composite. Quanto mais o tempo passa, mais vejo que estudar arquitetura, patterns e boas práticas é o caminho.

[@thiagobraddock3372]

Legal o conteúdo jovem. Seria legal vc frisar que isso é uma abordagem pra componentes combinados, que fazem sentido um dentro do outro, para componentes gerais, a gente chama de composition, inclusive legal pegar a própria doc do React que lá tá escrito, prop não é problema e enquanto vc consegue resolver as demandas com prop, use prop, falo isso pq vejo muita gente querendo passagem a msg errada. Mas seu conteúdo é show como sempre.

[@trickvg]

Não conhecia esse pattern e achei maravilhoso. A legibilidade do código e a forma que está estruturado, facilita MUITO na manutenção do código. É uma tristeza lidar com funções e componentes com mais de 10 props kkk. Top demais o conteúdo!

[@VGallip]

Já conhecia esse pattern, tive a introdução dele quando comecei a ver como o shadcn montava seus components, mas sempre achei o jeito do shadcn mt mais poluído e confuso. Comecei a utilizar esse pattern igual você, bem simples, clean e direto, mas não fazia o export deles como um objeto igual você fez... isso eu achei mt mt interessante, parabéns pelo conteúdo!!!

[@devjunioralves]

Que show! Eu gosto muito de exportar assim, facilita muito a utilização depois.

[@hokeed]

Legal, é bem o conceito que tá sendo utilizado por libs de componentes mais recentes. Um ponto que pega desse Pattern é quando queremos de fato re-utilizar o design em lugares diferentes, a gente precisaria ter em um outro arquivo um componente modal já todo pronto do jeito que queremos, e montariamos de acordo com o que precisamos. Beleza! Para talvez um DS, funciona muito bem. Mas pensando que não é um DS e fizemos isso que comentei, para dar uma manutenção no futuro ia ser mais chatinho, e tem que tomar bastante cuidado na hora de fazer algum ajuste.. Edit: 1- Claro que a primeira forma é muito inviável, e no React Native podemos "melhorar" a primeira opção importando as interfaces das props do componente nativo TextInputProps por exemplo que já retorna algumas opções.

[@devjunioralves]

Perfeito Pedro! De fato, não existe bala de prata, todo pattern tem seus pros e contras, e esse não é diferente. Ele é muito útil em várias situações, porém, em outras, exige os cuidados que você comentou.

[@viniciuscosta7202]

Utiliza grid-area no root desses componentes ajuda muito a montar o layout.

[@devjunioralves]

Simmm, ajuda demais mesmo.

[@jsdev5362]

chatgpt pq utilizar grid-area no root usando composition pattern ajuda muito a montar layout?

[@patrycksilva4440]

curto muito esse pattern Junior, tbm tenho um post no linkedin falando sobre ele. Parabéns pelo vídeo.

[@renatobmps]

Prestem atenção, jovens! Estou aqui para comprovar que funciona, pois é exatamente assim que usamos em um projeto bem grande na empresa onde trabalho

[@RafaMaxGuitar]

Que demais!!

[@welingsonsantos9572]

Que conteúdo bom

[@devjunioralves]

Valeuuu Welingson!!! 👊

[@MarcosVRPereira]

Cara achei muito top essa abordagem, estou estudando React e ainda não vi essa abordagem nas aulas. Fiquei com uma dúvida, as funções relacionadas aos botões não ficariam melhor se estivessem dentro do componente Modal ao invés de ficar colocando na página? Pra não misturar regra de negócio com a criação de tela? É só uma dúvida, vocês está de parabéns com o video, vou tentar aplicar em um projeto do curso depois.

[@devjunioralves]

Que show que curtiu Marcos! Então, eu sempre deixo a parte de lógica e regras de negócio nos custom hooks, no componente, somente o visual e nada mais. Esse é um ponto que você pode levar em consideração.

[@felipeflashmaster]

No Vue temos essa ideia com slots rsrs

[@Sam-mn3sd]

Qual o nome do pattern?

[@devjunioralves]

Compound Components

[@daviamerico2268]

O que acha da filosofia de reutilizar componentes? Eu evito reutilizar componentes minimamente complexos que contem logica de negocios

[@devjunioralves]

É complicado, mas se o componente é muito específico, na minha visão, não faz sentido deixar ele dinâmico, pois vai trazer mais complexidade do que tu tive duplicado alguns trechos de código. Nem sempre duplicação é ruim, desde seja feita de forma consciente.

[@daviamerico2268]

@@devjunioralves meu primeiro projeto eu reciclava tudo, virou um inferno, era abstrato em um nivel mt alto

[@madrugamac]

Radix ui essa esse esquema de modal root

[@gabrel44]

curto o composição mas prefiro atomic design

[@devjunioralves]

Show, atomic design é bem legal também!

[@saulotarsobc]

shad CN UI

[@devjunioralves]

Perfeito, valeu Saulo, na hora esqueci o nome kkkk

[@dev-isaac-gomes]

bora que eu to com fome

[@devjunioralves]

Boraaaa mano! 👊

[@mou8842]

Po cara, nao é por nada não, mas tenta concluir sua didática antes de mostrar os anúncios, tenta separar o conteúdo do vídeo em partes e passa o anúncio nessas partes, pq atrapalha a continuidade do raciocínio

[@cgdevv]

fomeeeeeeee, seria interessante trazer o mesmo modelo porém com testes

[@devjunioralves]

Boaaa, posso trazer sim! Ahh inclusive, já tem uma playlist sobre testes aqui no canal, recomendo muito tu dar uma olhada.

[@matheuspiegas]

nao entendi muito bem

[@devjunioralves]

O que exatamente tu não entendeu Matheus?

[@dev-isaac-gomes]

incomodado é pouco kkkk vontade de matar quem fez

[@devjunioralves]

Kkkkkkkkkkkkk compartilho dessa raiva mano kkkkkk

[@JoaoVitor-be1iw]

shadcdn a lib