Crie componentes DESSA FORMA no React (Pattern de composição)

Dentro da nossa aplicação, por mais simples que ela seja, os componentes podem ter um número absurdo de customizações (que eu vou te mostrar no vídeo). 😂

Seja para uma ou mais customizações, o caminho mais fácil é recorrer a um pattern de composição. Nos meus projetos front-end com React tenho usado muito.

Hoje você vai ver na prática como aplicar esse pattern em um widget de notificações, seguindo as customizações específicas dela.

-----

Acompanhe a Rocketseat nas redes sociais:
Twitter: @rocketseat
Facebook: @rocketseat
Instagram: @rocketseat

[kenjiutaka]

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<"button"> {}

E para custom components:
interface SomeComponentProps extends ComponentProps<typeof YourComponent>

[lukaslima]

mt massa que qnd vejo as aula dele parece tudo mt facil, ai qnd coloco em pratica passo hrs quebrando a cabeca


faz parte do processo!

[martygo]

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

[eualexslim]

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.

[matheussunderhus]

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 🚀

[omundoavolta]

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

[DarkMetinn]

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 <Notification.Actions> sempre aceitaria um ou mais componentes do tipo Notification.Action.

[raulrozza]

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<{ icon: ElementType; text: string; onClick: () => void }>

[BrocchiRodrigo]

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

[gssj-op]

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!

[BruunoFernandzOFC]

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.

[Luccas_Alves]

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!

[CarlosEduardo]

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

[ThugLifeModafocah]

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.

[_Cesaum]

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

[tonashiro]

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

[CarlosEduardo]

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?

[WNFelix]

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😂

[samueloliveira]

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

[FabricioAlexanderDC]

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!