Create components in this way in React (Composition Pattern) 

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!

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

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.

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 ❤

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

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.

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

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!

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

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

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

Pattern sensacional. Muito obrigado por partilhar!

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

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

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

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 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!

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

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

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

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

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

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

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

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

Diego sempre mandando muito bem, o cara é foda

Genial!! Que aula magnífica...

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.

Boa dica! Obrigado pelo compartilhamento

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

Que conteúdo delicioso de ser consumido!

Muito bom, esse pattern salva vidas !!!

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!

Conteudo muito foda mano. Obrigado.

Muito top Diegão!

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

Muito top cara, Obrigado por compartilhar

Muito boa explicação. Valeu!

muito bom esse pattern, excelente vídeo Diego

Toppp xará, vou aplicar nos meus projetos 👊🏼

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".

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 }>

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

Muito interessante essa forma de criar componentes!!!

Cara, baita conteúdo!

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.

Sensacional Diego! 🚀

Você é foda Diego 💜

que vídeo satisfatório! 😌

Sensacional Diego 🚀

Muito bom. Valeu!!!

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

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

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😂

Grato!

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

Muito interessante 🙏🏾

muito bom, vou testar.

mt legal esse componente elementtype

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

Muito interessante!

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!!

Muito bom!

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

Melhor thumbnail da Rocket

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?

Incrível 🎉🎉🎉

Melhor vídeo

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!

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

Que massaaaa

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 (:

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

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

Top demais

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.

Muuuito top

Muito bom

Top de mais

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?

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.

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

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! 🤘🏻

Muito top

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 em

Que lindo

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

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

muchas gracias

bem legal

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

genial

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

Era exatamente o que eu procurava a muito tempo! Me surgiu uma dúvida, caso eu queira fazer o componente semelhante a estrutura do React Bootstrap, como seria? Por exemplo: , sem que eu precise criar um Card.Root.

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

To começando a utilizar o Tailwind pra fazer estilizações nos meus apps, qual a melhor forma de indentação pra que não fique com essas linhas enormes e facilite a leitura?