DESIGN PATTERNS NO REACT | Render Props

[@devjunioralves]

𝗢𝗦 𝗠𝗘𝗟𝗛𝗢𝗥𝗘𝗦 𝗩𝗜𝗗𝗘𝗢𝗦 𝗗𝗢 𝗖𝗔𝗡𝗔𝗟: Esse será o fim do Vite? Nova documentação do React.js kzbin.info/www/bejne/bIqXYWiCdqyMbpI 7 CONCEITOS DO TYPESCRIPT QUE VOCÊ DEVE SABE kzbin.info/www/bejne/bXXLnYpofdutqqc QUAL A MELHOR ESTRUTURA DE PASTAS PARA PROJETOS REACT/NEXT.JS kzbin.info/www/bejne/nImzc3iBr8llbMU COMO APLICAR SOLID NO REACT - Inversão de dependência DIP kzbin.info/www/bejne/jGKwZGyegKqSepo [ROADMAP] O QUE VOCÊ DEVERIA ESTUDAR EM 2O23? Fique de olho nessas tecnologias kzbin.info/www/bejne/pGS1Zp-ne5dnnbs TUTORIAL NEXT.JS 13: FETCHING DATA - PARTE 3/3 kzbin.info/www/bejne/fJuYaoljdql1nJo A FORMA CORRETA DE CRIAR ROTAS PRIVADAS NO NEXT.JS 13 - Nova pasta pasta app! kzbin.info/www/bejne/gKSYaYOAqqmDfbs QUANDO NÃO UTILIZAR ESTADOS NO REACT? kzbin.info/www/bejne/q3nbdGt8fZifZ5I MELHORE A USABILIDADE DE SUAS APLICAÇÕES COM ISSO kzbin.info/www/bejne/bZ6uo6Vjd899j5o TUTORIAL NEXT.JS 13: VALE A PENA MIGRAR? PARTE 1/3 kzbin.info/www/bejne/m5y5nZquoJx_grs A FORMA CORRETA DE CRIAR ROTAS PRIVADAS NO NEXT.JS 13 - Nova pasta pasta app! kzbin.info/www/bejne/gKSYaYOAqqmDfbs Signals no React.js?! kzbin.info/www/bejne/m6CUi6Vvbs12Y5Y

[@brunocandido8054]

Show demais. Já utilizo código dessa forma mas não sabia que era um pattern.

[@devjunioralves]

Que show Bruno!

[@devemprender]

Show, utilizei muito isso! Um padrão que estou fazendo agora e deixar uma div flex em volta do icon e o input, ai deixo a props dele row || row-reverse || colunm || column-reverse de acordo com a props do componente IconPosition : "left" | "right" | "center" | "top"

[@devjunioralves]

Boaaa Thiago! Ideia muito interessante, valeu por compartilhar!

[@pedro_dominici]

esse é o tipo de conteúdo que preciso, por favor, traga mais com toda certeza!

[@devjunioralves]

Boa Pedro! Com certeza!

[@fellipeemanoel3040]

Como é engraçado a falta de conhecimento kkkk já havia criado componentes dessa maneira sem ter a menor noção de que era um Pattern. Muito bom o conteúdo!! Show demais!

[@versaleyoutubevanced8647]

parabens por chegar na mesma solução

[@henriqueteixeiradev4751]

Muito Bom... mais uma mandinga para meu dia a dia.... vlw

[@devjunioralves]

Haha boa Henrique!

[@CarlosEduardo-gi4xf]

Sempre trazendo conteúdo de valor 👏👏👏

[@devjunioralves]

Valeu demais Carlos!!! Conteúdo mais avançado é mais difícil de encontrar, mas estou tentando compartilhar o pouco que sei.

[@krekmg]

Já vou reescrever meus patterns pra ficarem assim. Obrigado por compartilhar

[@devjunioralves]

Show, por nada Dionison!

[@vidaprogramada1235]

Mano você tem fazer uma live pra galera desenvolvendo uma aplicação, teu conteúdo é muito bom

[@devjunioralves]

Vamos fazer sim man, provavelmente mês que vem deve rolar hehe Valeu demais mano.

[@vidaprogramada1235]

@@devjunioralves já vou ficar na espera

[@CarlosHenriqueOliveiraSilv-b2f]

true papae continua vou procurar mais amanha rever este e é isso ai obrigado por dividir ai o conhecimento mano

[@Lucassilvadoamaral]

Conteúdo muito bom! Obrigado por compartilhar conosco, grande abraço.

[@devjunioralves]

Valeu Lucas, grande abraço! 👊

[@theamazingvitorshow]

Conteúdo muito bom, isso daí sim é aplicado no dia a dia do trabalho como dev

[@devjunioralves]

Exatamente Vitor! Valeu demais 👊

[@evertoncruz3085]

Nunca havia conseguido abstrair os conceitos de design patterns para alguma realidade pratica. Continue com esta serié assim como voce fez com SOLID que vou deixar na fila para conferir. Cara show de bola ! 👋👋👋

[@devjunioralves]

Boa Everton, valeu demais! 👊

[@helenosalgado7453]

Traga mais rapaz. Muito obrigado.

[@devjunioralves]

Haha com certeza man! Valeu demais!

[@marcosaquino21]

Um assunto muito bom valeu!

[@devjunioralves]

Valeu Marcos!

[@lucascoliveira3957]

Gostei do vídeo, continue fazendo

[@devjunioralves]

Valeu Lucas, vou sim!

[@guilhermelucas6223]

Muito foda, tenho 3 anos com Angular e venho estudando React e o conteúdo que mais gosto de consumir é desing patterns e arquitetura de outras ferramentas! Para chegar fazendo correto caso um dia venha trabalhar com React. Parabéns pelo conteúdo mais um inscrito no canal!

[@devjunioralves]

Opa, seja bem vindo Guilherme! Que massa, estudar DPs é muito importante né. Valeu demais!!!

[@hemerson327]

Cara, simplesmente sensacional os conteúdos que você traz. 👏👏

[@devjunioralves]

Que massa, valeu Hemerson! 👊

[@nataliaaraujo2832]

Conteúdo da ora demais jr, o primeiro eu já conhecia. Esse segundo vou começar a implementar ;)

[@devjunioralves]

Que massa Natália! Qualquer dúvida, só deixar aqui :)

[@matheuscode4163]

Show, de bola, mas uma observação, creio que pode ser usado a tipagem de ElementType para o iconLeft e o iconRight em vez de usar função. Mas muito bom o conteúdo!!!!! ganhou mais um inscrito!

[@heitorfernandes5702]

bom trabalho cara, você é diferenciado nos conteúdos!

[@devjunioralves]

Valeu demais Heitor!

[@adlerspencer]

Top, Junior! Bom dar aquela 'bugada' na cabeça pra pensar mais um pouco fora da caixinha.

[@devjunioralves]

Haha show!!!

[@CodeBorges]

Cara eu gostei bastante, me ajudou muito e vou utilizar ainda mais nos meus components, as vezes acabo esquecendo pq é muito conteúdo sabe, mas ficou show. Uma dica de video seria utilizar o sanity que é uma API boa que faz a parte do backend com bastante facilidade para as pessoas utilizarem. Eu mesmo utilizo para criar e-commerce

[@devjunioralves]

Boa Gabriel, vou estudar mais sobre o Sanity e posso trazer um vídeo sim, valeu demais pela sugestão, anotado!

[@andrewarosario]

Excelente como sempre!

[@devjunioralves]

Valeu demais Andrew!!!

[@paulinha-19]

Muito bom. Faz outros design pattern aplicados no Nextjs

[@thiagohflima]

Cara, já tem tanto conteúdo nesse teu canal… Tenta depois sumarizar tudo num Notion, seria legal organizar, talvez colocar na ordem de prioridade, ou separar por temas, etc. hehe Parabéns por todo o empenho!

[@devjunioralves]

Fala Thiago! Sim, tem bastante conteúdo e ainda tem muito pra vir hehe Boa ideia, eu ja organizo em playlists, tudo separado por temas: React, Typescript, Next, Testes...

[@lucascoliveira3957]

Faz mais vídeos explicando os outros DP, aplicados a React/Next com ts. Esse conteúdo é muito bom

[@devjunioralves]

Sim, vou trazer mais DPs com certeza hehe

[@gutemberguemascarenhas7890]

Excelente

[@emanoelinfinity]

Um resumo que dificilmente encontraríamos aqui no tio Tube 😄e acho que a galera aguenta um pouco mais de complexidade, afinal esse assunto já não é para iniciantes. Gostaria de ver como você aborda outros DPs.

[@devjunioralves]

Boaaa Emanoel! De fato, conteúdo mais avançado é meio difícil encontrar principalmente em pt-br. Vou trazer sim mais conteúdo sobre DPs.

[@dev_vitorpereirafontes]

Esse pattern me lembrou aquela estratégia que existe em algumas libs de estilização, a de criar sub-componentes, onde existiria uma tag e dentro dele uma tag que receberia o componente de ícone. Acho essa uma estratégia bem interessante, não sei se chega a ser um pattern, mas é algo bem útil, inclusive acho que daria um bom tema pra um futuro vídeo. Me surpreendo cada vez mais com os temas incríveis que você aborda em seus vídeos, tem me agregado muito conhecimento.

[@devjunioralves]

Esse é outro pattern, chamada compound é bem interessante também, tem muitas libs que utilizam esse pattern, por exemplo o Ant Design utiliza bastante. Valeu demais Vitor, fico feliz demais em saber que o conteúdo esta te ajudando!

[@mtalves]

Radix usa bastante esse pattern

[@dev_vitorpereirafontes]

​@@mtalves Já vi e ouvi muito sobre, tô só esperando aparecer a oportunidade pra poder usar em algum projeto pessoal, gosto muito da proposta deles e acho que facilita muito o desenvolvimento das interfaces.

[@devjunioralves]

@@mtalves Simm, verdade!

[@andrebarbosa-marca]

Mano depois faz um vídeo explicando uma forma boa de fazer uma table list com checkbox e selecionar todos, etc.. um por um uma para exlucir, marca como lido etc...

[@devjunioralves]

Tu fala criando do zero ou usando uma lib, como o MUI da vida?

[@andrebarbosa-marca]

@@devjunioralves Do zero mesmo.

[@andrebarbosa-marca]

@@devjunioralves Acredito que em uma lista dessa, tem muito oque aprender sobre componetização, etc etc..

[@devjunioralves]

@@andrebarbosa-marca Sim com certeza Andre! Posso trazer sim, valeu pela sugestão!

[@bruno-dev]

Caraca isso e mto top

[@devjunioralves]

Né!

[@wandersonoliveira5830]

faz um vídeo sobre compositore

[@rafaelrmaier]

Muito bom cara! Queria entender por que na tipagem está como void o retorno, se tecnicamente o retorno é um JSX. Eu já usei algo parecido, mas geralmente eu passo o JSX direto :B nem sabia que era um pattern kk Parabéns pelo conteúdo, show de bola!

[@devjunioralves]

Valeu man! Nesse caso não faz diferença, por isso coloquei diferente, pra mostrar uma forma alternativa de fazer hehe Eu geralmente tipo como ReactNode, mas tem como fazer do jeito do vídeo também.

[@half7752]

no caso quando a gente passa a função anônima com o retorno do JSX e depois executa ela no componente pra pegar esse retorno e renderizar, tambem seria possivel passar diretamente esse retorno da função pra prop sem ter que passar func? pq de qualquer forma a gente ta pegando apenas esse retorno, é tipo ao inves de usar handleSubmit()} /> usar , essa forma que eu falei é má pratica? oq voce acha?

[@devjunioralves]

Quando são funções que você vai passar em eventos (onSubmit, onClick...) ambas vão funcionar igualmente, então é questão de escolha mesmo qual vai usar.

[@gevolgdev]

Que maravilha de video, nao para mano pf

[@devjunioralves]

Valeu! Vai ter mais conteúdo sobre DPs hehe

[@AdeilsonTube]

Manda mais parttners, as vezes usamos eles sem saber....

[@devjunioralves]

Exatamente kkk Com certeza, vai ter mais conteúdo de DPs!

[@lucashenrique8331]

Geralmente nos meus app eu crio um component para icon no iconLeft eu deixo com string nas props ai passo o nome do icon que eu quero

[@devjunioralves]

Boa, estratégia bem interessante também!

[@ReimundOficial]

Por que não utilizar o JSX direto ao invés de uma função que retorna um JSX? (ex: definir a tipagem do iconLeft/iconRight como JSX)

[@devjunioralves]

Perfeito Reimund, é uma alternativa também. No vídeo, quis mostrar outra forma de fazer, mas essa maneira que tu comentou é super válida e eu utilizo no dia a dia.

[@Wenner_]

Nesse caso dos icons receberem uma função, o componente não fica aberto demais para o dev colocar o que ele quiser e causar bugs? Nao seria melhor o componente receber um booleano, e até ter uma lista pré definida de icones?

[@devjunioralves]

Sim, por ficar mais genérico, pode sim ter esse problema, porém, não seria legal ter essa lista predefinida pois assim estaria ferindo o OCP do Solid.

[@doug8590]

Essa forma de passar função é melhor que passar um ReactNode como iconRight ?

[@devjunioralves]

Não, pode usar o type ReactNode também, não tem problema. Quis só mostrar uma forma diferente que geralmente a galera utiliza hehe

[@lifebodybuilding545]

mano, começa a trazer o código no git na descrição...

[@dianalobo3115]

pois é, dificil conteudo em port

[@raphael.portela]

DEV SENIOR ALVES