Esse PATTERN do React pode te salvar (+ lib secreta)

[@maailoon]

Diego trás conteúdos pro backend também 😊 Tô esperando a att da trilha de node 💪🏻

[@dieegosf]

To preparando muita coisa de back-end, principalmente em dezembro vai rolar :)

[@josealexsandro9768]

@@dieegosf aí sim!

[@elvispalace]

@@dieegosf aeeeeeeeeeeeee

[@maykbrito]

Animal DEMAIS! 😍

[@MlfragaGameplays]

Qual é esse tema do vscode?

[@insightweb]

Legal, slot no vuejs já é nativo para usar justamente desta forma!

[@cryptoice7180]

Diegão trás um conteúdo mais avançado de NEXT eu posso ajudar com algum patrocínio se for interessante!

[@alangabriel1671]

Acessa o canal do Willian Justen, ele liberou um dos curso de Nextjs lá, talvez te ajude

[@kipperdev]

Muito bom! Ótimo conteúdo sempre 👏🏻

[@juansvrr]

juro por tudo que em 4:13 eu pensei que o diego ia soltar uma dancinha do tiktok

[@lucasrodriguesdove]

E se eu quisesse determinar que ele teria mais de um formato, como ficaria?

[@1BoxTV]

Mano, qual camera você usa?

[@alanfljesus]

Estou usando NextJS e Chakra UI, mas meu problema foi com o Slot, tem alguma forma de substituir o Slot do Radix UI?

[@gamaquad6765]

Saalve, muito bom. Me deparei com esse erro no console: Warning: React does not recognize the `asChild` prop on a DOM element. If you intentionally want it to appear in the DOM as a custom attribute, spell it as lowercase `aschild` instead. If you accidentally passed it from a parent component, remove it from the DOM element. Alguém sabe o queue pode ser?

[@rafaelalcantara5741]

3:15 tendinite?

[@ThePellizzetti]

"tenho tendinite" força Diegão, torcemos pela sua recuperação 😔✊🙏🙏

[@YagoVelosoo]

UAHHUAHAUAH programador que nunca teve tendinite não é programador

[@ivanvinicius8317]

Força Diego

[@dieegosf]

ASUudhasudhasudh

[@pedrol6193]

N é mais fácil só usar o A?

[@franklin.javier]

Boa dica Diego. O stitches faz isso usando a prop `as`, como no styled-components/emotion/etc

[@dieegosf]

Exato, e funciona muito bem, mas usando Slot fica uma API mais simples principalmente pra quem ainda tem conhecimentos mais iniciais no React e TypeScript.

[@pupos3]

Alguém me corrija se eu estiver errado por favor. Mas na lib Styled-Components é feito utilizando a propriedade "as" como o Diego demonstrou, e funciona sim o intelisense para as propriedades do elemento que vc passou no "as" porém o que pegava lá era o estilo, parece que por trocar o elemento os estilos mudam então vc teria que duplicar seus estilos para funcionar tanto no "button" quando no "a" (seguindo os exemplos do vídeo), então vejo como radix sendo mais eficiente q SC nesse sentido. Gostei vou ter meu primeiro contato com Radix nesse evento de agora. Valeu rocketseat

[@dieegosf]

Funciona sim, o ponto de usar o Slot funciona pra quem estiver criando seus componentes dentro do React, fica uma API mais simples do que usar polimofirsmo pela propriedade "as", que torna mais complexo o TypeScript do componente.

[@viniciussantana7934]

Dica muito massa Diegão, não sabia que o radix dava esse suporte

[@danilovieira4442]

Cada aula é um mind blowing diferente 🤯 Por mais dicas como essa, Diegão!

[@udimbas]

Maneirasso!

[@LuanHenrique-pc3nn]

É mt bom saber q além disso ser mt foda, eu tbm já to conseguindo entender o React em si

[@clemilsonazevedo2183]

Massa.

[@marlonmnz]

No inicio achei que era magia e no final vi que era tecnologia... Massa demais essa dica Diegão.

[@PLifes]

Top!

[@Matheus_1582]

Alguém da Rocket usa ou ja usou o StencilJs. Se ja usou conte sua experiencia com o StencilJs.

[@drgabbo1025]

uma provocação, na minha visão se for só por intellisense não faz sentido adicionar mais complexidade, alguém tem algum caso de uso que compense esse esforço?

[@aprendaacodaryt]

Primeiro

[@gabrielserejo848]

em pensar que o vue.js já vem com slot padrão 🤣 que rolo meus amigos

[@eriklucas8998]

Uso de slot interessante e poderoso, mas se não utilizado com responsabilidade pode virar umas monstrozidades.

[@LUIZ0798]

Boa tarde

[@raulrozza]

Engraçado que essa semana mesmo eu tava vendo o Slot e outros componentes de utility do radix hahaha quanta coincidência

[@rafaelbernardino4615]

gente qual eh esse tema do diegão???

[@dieegosf]

Min Theme

[@sam95905]

tá de hack kk, ótimo vídeo Diego 👏🏻

[@nicolasmoises2720]

Brabo demaiss matador de chimpanzé

[@allandepaivaribeiroPP]

Excelente Curso 😜✨

[@allefdouglas9693]

Fala, Diego. Cara, já usou o twin.macro junto com o emotion para separar o css do tailwind em um arquivo separado (como index.tsx e styles.tsx)? Eu tenho usado há 3 meses, e acho incrível. O código fica lindo e limpo. Seria bom trazer um conteúdo sobre, caso te interesse

[@dieegosf]

Fala Allef, sim, mas se for pra separar prefiro usar algo como o windstitch.vercel.app/

[@LucasAlbertoFulano]

granda dica. directamente de Moçambique

[@edu_amr]

Isso até que é bem útil se for ver …

[@RenatoSilva-vb8kq]

Mas nesse caso o estilo só herdou do pai por conta de estar usando className, certo? Se for usar CSS in JS ficaria sem estilo nenhum, teria que fazer outra estilização

[@RenatoSilva-vb8kq]

Com stitches seria mais ou menos assim const headingStyles = css({ fontFamily: '$sans', textDecoration: 'none' }) export const Heading = styled('h2', headingStyles) export const Child = styled(Slot, headingStyles) const Component = asChild ? Child : Heading

[@ricardoalmeida7607]

Fantástico, Diego

[@cryptoice7180]

VC é F*** Demais Piaaa! Parabéns!

[@principe.borodin]

Antigamente as pessoas reclamavam do dinamismo, veio a tipagem e todo mundo gosto....Agora que precisa de dinamismo, vc precisa usar "recursos"...viva o dinamismo.

[@vitorcouto1465]

dúvida: pq não usar a tag de link direto ao invés de fazer esse polimorfismo?

[@juniormusics]

Semanticamente, um Botão pode ser escrito com as tags "button", "a", "input"... no video ele fez uma maneira "generica" para ter um botão e facilmente alternar a tag final que o representará....

[@ladybug5285]

acho que ele herda as classes da tag pai na filha

[@jobsongilbertobarrosamorim2516]

Esse exemplo do Diego foi mais simples, mas eu já vi um caso um pouco mais complexo em que isso poderia ser útil: Havia um sistema com testes que exigiam que um certo componente, em uma página/dimensão de tela, fosse exibido como uma lista de opções (Radio Group) e, em outra página/dimensão de tela, como um menu suspenso (Select). Isso que o Diego mostrou ajudaria a simplificar o código sem precisar tratar ambos os componentes de forma totalmente separada/independente (lembrando que você não precisa passar somente primitivas, pode passar também seus próprios componentes, que já tenham algumas estilizações adicionais e/ou saibam lidar com os props extras que eventualmente sejam passados).

[@drgabbo1025]

@@jobsongilbertobarrosamorim2516 ótimo exemplo, eu tava pensando num caso de uso que não fosse só por intellisense, o que não faz sentido pra mim

[@thiagosolstafir]

Alguem sabe como chama aquele plugin que ele vai digitando no terminal o nome do pacote e vai aparecendo sugestões?

[@enricopozzi3657]

FIG, é só para macOS por enquanto.

[@nestortonanez4752]

Obrigado Diego! É bom Tip

[@thiagomiranda3424]

Diegão, primeiramente parabens pelo trabalho, sou muito fã de react, mas nunca tive a oportunidade de trabalhar com ele, infelizmente. Mas fiquei com uma duvida, por que você esta usando npm em vez de yarn? Valew mais uma vez :D

[@dieegosf]

Acho que apenas porque ambos ficam igualados hoje em dia em funcionalidades e assim fica uma coisa a menos pra ensinar aos alunos.

[@thiagomiranda3424]

@@dieegosf Bom saber, muito obrigado pela resposta :D

[@victorfacilita7749]

Só dicas fodas!!

[@ytalodev]

Dica muito boa

[@mouravocal]

Pelo que vi eu terei de fazer outra estilização para diferenciar o link usando asChild como condicional, neste caso não seria interessante criar um novo componente?

[@dieegosf]

Podes criar quantos componentes quiser, mas o componente que fica abaixo do Slot recebe todo CSS do Slot em si, tudo que tiver de propriedade no Slot vai ser repassado ao componente filho.

[@mouravocal]

@@dieegosf entendi, então é interessante somente se o child herdar as props e estilização do componente pai

[@oriumi]

gostei mt, pena que utilizo vue e não tem como rodar o radix nele :/ alguem tem alguma alternativa?

[@dieegosf]

O Vue possui o Slot nativamente, mas n sei sobre uma lib igual o Radix pra Vue.

[@oriumi]

@@dieegosf eu uso o headless ui, tem pra react e vue :) não deve ser exatamente igual, mas é uma boa opção

[@ivanvinicius8317]

Diego 5x kkkk

[@StephenWillians]

Muito show!

[@thallesgarbelotti4218]

Ué, não era proibido usar conceitos de OO no React ? Jajá vão voltar com classes..

[@dieegosf]

Polimorfismo foi apenas o nome dado, nem existe relacionamento com OO na sintaxe.

[@eliasjnior]

Na verdade, o Intelisense continua funcionando normalmente caso você utilize Typescript. Porém, pra preparar a tipagem correta é um tanto quanto complexo, vai exigir um conhecimento um pouco mais avançado pra fazer isso funcionar. Lembro que da primeira vez quebrei a cabeça um tempão pra acertar essa tipagem.

[@sergioluiscruzfilho]

Qual o tema do vscode?

[@dieegosf]

Min Theme