Não conhecia esse ElementType, ele parece ser mto útil. Uma dica, quando estender as props de um componente, tem um type helper do React chamado ComponentProps. Dá pra extender tantos elementos HTML quanto componentes customizados. Ficaria assim: interface NotificationActionProps extends ComponentProps {} E para custom components: interface SomeComponentProps extends ComponentProps

mt massa que qnd vejo as aula dele parece tudo mt facil, ai qnd coloco em pratica passo hrs quebrando a cabeca kkkkkkkkkkkkkkkkkkkkkkk faz parte do processo!

Pra quem tiver interesse em se aprofundar mais, existe um padrão de design no front-end que se chama Atomic Design, é a mesma teoria (em quebrar o componente em componentes menores) mas utilizando padrões de arquitetura mais recomendados no designer atomico (atomos, moleculas, templates, etc...). É mais recomendado quando se tem um design system pronto para o projeto, fica muito mais detalhado na hora de documentar em um storybook por exemplo.

Ja havia visto essa abordagem em uma biblioteca, nunca fui afundo. Muito interessante. Obrigado por compartilhar Rockeseat 🎉.

Esse pattern é lindo demais. O radix e muitas outras libs usam demais! Outro ponto, a utilização desse pattern, de certa forma, não deixa de utilizar o Single Responsability pattern do SOLID, olha só que massa.

Trás mais disso que o pessoal aqui de produto ama ❤

Esse é um bom pattern, com certeza! Mas no caso de actions ali, pra respeitar o Open-Closed eu costumo receber um vetor como props e renderizar sob demanda, deixando a responsabilidade de definir a ação pro componente que chama o componente filho. Por exemplo: type Actions = Array void }>

Pattern sensacional. Muito obrigado por partilhar!

Como eu estava esperando por um esse conteúdo diegão, top demais

isso somado a Context API faz você entregar projetos num outro nível! Ótima aula !!!! É nessas horas que você entende o porque existem Padrões de projeto e se você acha que no front-end não da para implementar coisas do tipo você estava enganado. Muito show ver mais conteúdo com patterns no frontend 🚀

Muito obrigado por trazer conteúdos de extrema qualidade como este. Tem me ajudado muito nos estudos

Muito foda Diegão, conteúdo solícito e claro.

incrivel!! eu tinha feito ontem sobre esse projeto so em tailwing e logo hoje ja sair esse video so me da mais motivo para estudo sobre o assunto, valeeeu Rocketseat!

Conteúdo muuuito bom, Diegão!! Não conhecia esse pattern de composição mas já vou levar pro time que trabalho para aplicarmos isso nos nossos projetos.

Show diegao, conteúdo top, o pattern de composição nos ajuda bastante tanto na manutenção quanto a escabilidade dos componentes.

esse video ficou perfeito, com ótimo exemplo prático, parabéns.

Cara, muito interessante, com toda certeza vou fazer algum projeto e implementar esse Pattern. Diego, você é uma inspiração para eu continuar evoluindo.

Mano que conteúdo sensacional, adorei essas dicas vou pesquisar um pouco mais sobre esse Pattern.

A era disso que vc tava reclamando no Insta outro dia, que estava ficando complexo montar um botão kkk.. Mas de fato, a primeira vez talvez dê mais um pouco de trabalho, mas quando vi isso nos painéis de diálogo do headlessui, deu para notar o quanto simplifica para montar os componentes do front "depois de prontos".

Excelente conteúdo, como sempre. Já vai entrar pras minhas boas práticas.

Bacana demais. Explicou composition de forma simples e objetiva.

Genial!! Que aula magnífica...

Muito bom, tava digitando o comentário e ia falar q o radix utiliza bastante ai você começou a falar, muito massa

Da até vontade de codar mais com essa didática incrível! 🚀

Nossa. Gostei demais e já abriu horizontes para outros tipos de componentes. Inputs, formulários, tabelas... Show de bola!

Muito bom, pretendo utilizar esse pattern em muitos dos meus projetos

Comecei o ano apenas sabendo muita coisa sobre conceitos de programação, principalmente no que tange backend. Eu estou quase terminando meu curso de SI (é, quase nada de front é ensinado em SI, apesar de ser meu foco). E agora, depois de muito estudar a junção de Tailwind, tsx, react, Next e um tanto de mongodb, estou conseguindo ver esses vídeos sem uma dúvida sequer. Agregou mt! Vlw!

Muito top Diegão!

Boa dica! Obrigado pelo compartilhamento

Muito bom, esse pattern salva vidas !!!

Que conteúdo delicioso de ser consumido!

Muito bom, Diego é muito ligeiro e preciso isso é muito bom para quem já tem experiência em programação e não precisa ir tão devagar!

Nossa... todo dia é dia de escola, ótimo essa dica. Vou testar em algum projeto com certeza! Thanks

Conteudo muito foda mano. Obrigado.

Diego sempre mandando muito bem, o cara é foda

voltando aqui pra dizer que esse video, em portugues, é muito melhor que muitos e muitos videos sobre o tema no youtube, em portugues ou ingles. Baita video foda.

muito bom esse pattern, excelente vídeo Diego

Outro ponto legal desse pattern é que podemos definir os possíveis tipos de children desses componentes e garantir que nada vai quebrar, seja em implementação ou estilo. No caso a sempre aceitaria um ou mais componentes do tipo Notification.Action.

Diego, você é o cara mais foda que eu não conheço!

muito da hora diego, parabéns pelo conteúdo 👏

Ótimo conteúdo Diego! Seria muito bom ter mais desse conteúdo sobre design patterns para projetos FE.

Vlw pelos dica no final, eu tava mesmo procurando algo como o Radix

Toppp xará, vou aplicar nos meus projetos 👊🏼

Muito boa explicação. Valeu!

muito bom....vou imlementar nos projetos agora muito massa...

Muito top cara, Obrigado por compartilhar

Sensacional Diego! 🚀

Mto bom! Eu to na vibe de focar em responsabilidade unica das coisas a acabo fazendo parecido. Por mais que pra mim fica lindo kkkkkkkkkk sinto mta dificuldade de aceitação pelos demais devs mesmo ficando bom (mtos ainda amam o allinone)( msm atendendo a necessidade de mtas possibilidades para uma mesma 'funcao/componente/etc'.

Cara, baita conteúdo!

Você é foda Diego 💜

que vídeo satisfatório! 😌

Sensacional Diego 🚀

Muito interessante essa forma de criar componentes!!!

Muito bom! Isso vai ajudar muito.

Conteúdo top demais, criando componentes dessa forma traz mais flexibilidade e facilita a manutenção. Será que vou usar isso pra tudo ? rsss

Melhor thumbnail da Rocket

Muito bom. Valeu!!!

Acho uma boa a Rocketseat trazer mais conteúdos relacionados ao NextJS. Por exemplo, depois dos Server Components, há uma nova forma de trabalhar com contextos? E qual a melhor forma de proteger rotas de uma aplicação? Seria utilizando o middleware ou tem algo melhor?

Muito interessante!

Melhor vídeo

Muito interessante 🙏🏾

Top o conteúdo Diegão. Gostaria de conteúdo sobre chamadas de vídeo e áudio com react native.

Muito bom!

Grato!

Muito boa essa pattern. Estou criando uma biblioteca de componentes no projeto que trabalho atualmente, porém, não estamos utilizando tailwind e sim styled-components. Nesse caso, como cada composição vai precisar da sua estilização, basta criar uma pasta para cada um onde vamos ter pra cada pasta(composição ) os arquivos .types, .styles e o index? Obrigado pela aula, Diego!!

Legal pra caramba, eu ainda não tinha visto esse tipo de abordagem em componetização, vou começar a utilizar, estava fazendo tudo via props😂

Incrível 🎉🎉🎉

Explica um pouquinho sobre esse ...rest em algum vídeo! Obrigado pela ótima aula!

mt legal esse componente elementtype

Que massaaaa

show de bola Diegão .. vídeo top ... fora que esse partern está mto presente agt na forma de compor as UIs no next13 com a app router, considerando ter aquela diretiva 'use client' a se considerar e tals ... vlwwwww

muito bom, vou testar.

Teu teclado tão barulhento que me desconcentrou 😂 Edit: terminei o vídeo agr. 😅 muito poderoso esse pattern. Já tinha visto e usado antes mas tu executou muito bem no vídeo, muito legal ver o resultado!

surreal de bom. esse pattern facilita muito como eu não sabia disso?

Gosto muito de usar o design atoms por conta disso também Diegao

Top demais

o bom dos vídeos do Diego é que eu acelero no máximo pra 1.25x, ele já fala no modo 2x hahahha sem falar na qualidade do conteúdo (:

tenho apenas duas palavras pra esse design pattern: DO CARALHO.

Diego, mais uma vez um excelente conteudo. Uma curiosidade, Você ve alguma vantagem em utilizar o children declarando direto nas props como ReactNode ao invés de utilizar o PropsWithChildren? Ou é mais costume?

cara muito bom criar varios videos usando o mesmo projeto.. parece quase um "minicurso" distribuido por varios assuntos que podem ser mostrados não necessariamente relacionados em serie pq cada video funciona sozinho, mas que o exemplo mostrado encaixe em outros videos. por exemplo fazer um prox video focado em formatar datas com alguma lib e usar esse proj pra atualizar só o texto q ta no conteúdo q mostra a data da notificação. pra quem for ver, nao importa o projeto em si. pq é só um exemplo. mas quem ve o "grupo" dos videos desse projeto encaixa e da oturas perspectivas.

Fantastico. Eu nao tinha visto essa parte desse jeito. Eu normalmente usaria uma factory com React.createElement

Pra ficar ainda melhor e menos verboso, você pode criar variações para cada componente filho que compõem o pai e passar de forma obrigatória ou opcional ou fazendo na mão (como eu gosto ou utilizando Tailwind variants por ex...) e restringir ainda mais a identidade visual de cada filho com todas as suas variações. Similar ao que libs fazem quando ao utilizar o componente filho por exemplo de ícone você declara via pros: size=sm color=purple icon=(já pode vir as opções de dentro e você só diz se é ícone y ou z) e tudo fica sempre concentrado dentro de cada filho não afetando o código final do pai, mantendo clean code, menos verbosidade e se utilizar técnicas como a do storybook por exemplo, cada componente seu pode ter um readme ensinando a usá-lo, descrevendo etc... e também, a tipagem do componente pode ser externa, os hooks e etc... sem falar em testcases já deixando o componente com diferentes useCases testados e aprovados... as possibilidades são infinitas e quanto mais você se aprofundar e entende isto, mais organizado e direto fica a leitura pra qualquer um que bater o olho já entender o que tá rolando... e pra fazer refactory, mudanças ou manutenções, fica delícia! 🤘🏻

Muuuito top

Top em

Cara, acho incrivel. O que eu fico incredulo é como eu vou saber que eu precisaria de outra biblioteca para fazer um tal de merge nas classes, como ele chega a essa conclusão e sabe da existencia de uma biblioteca pra isso? é esse nivel que eu quero chegar.

Top de mais

Muito bom

@Diego tudo bem, da moral primereact e muito completo uso em todas apps e faz vídeo dele.

Que lindo

Muito top

Atomic design tem essa pegada, vc coda mais, mas o resultado final é muito "libertador" em relação a criação de componentes.

Senti um ppuco de falta de um html mais semântico, fira isso otima demonstração do design pattern

A biblioteca shadcn ui, tem a mesma abordagem na forma de construção de componentes. Vou fazer alguns experimentos com esse pattern para ver se em termos de DX e tempo de execução, ele viável. Gostei muito do conteúdo.

Ver essa aula é saber/descobrir que o MaterialUI trabalha com outro pattern: o prop hell kkkkkkkkkkkkkkk

bem legal

sou apenas um júnior acabei ficando surpreso pois eu estava fazendo algo semelhante com styledComponent o que é deveras complexo e tudo ficava no style.ts fica styled.wrapper styled.button etc..., separa cada parte em um arquivo diferente facilita bem mais o entendimento, so fico um pouco assustado com a quantidade absurda de arquivos que um projeto real pode chegar a ter mas acho que é so questão de costume

até o min 8:21: Eu utilizaria os próprios metodos onNomeDaAcao pra saber se aquele component tem ou não aquela ação, não um hasAction ou actionType

Recomendo também a boa e velha clsx library para merge de css classes

muchas gracias

Gostei desse formato de vídeo aula. Os vídeos ao vivo também são bons, mas dispersam muito por causa do chat.