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.
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
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.
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
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
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?
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?
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.
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
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?
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.
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á....
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).
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.
Diego trás conteúdos pro backend também 😊 Tô esperando a att da trilha de node 💪🏻
To preparando muita coisa de back-end, principalmente em dezembro vai rolar :)
@@dieegosf aí sim!
@@dieegosf aeeeeeeeeeeeee
Animal DEMAIS! 😍
Muito bom! Ótimo conteúdo sempre 👏🏻
Boa dica Diego. O stitches faz isso usando a prop `as`, como no styled-components/emotion/etc
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.
É mt bom saber q além disso ser mt foda, eu tbm já to conseguindo entender o React em si
Dica muito massa Diegão, não sabia que o radix dava esse suporte
Legal, slot no vuejs já é nativo para usar justamente desta forma!
No inicio achei que era magia e no final vi que era tecnologia...
Massa demais essa dica Diegão.
Cada aula é um mind blowing diferente 🤯
Por mais dicas como essa, Diegão!
Engraçado que essa semana mesmo eu tava vendo o Slot e outros componentes de utility do radix hahaha quanta coincidência
VC é F*** Demais Piaaa! Parabéns!
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
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.
Obrigado Diego! É bom Tip
granda dica. directamente de Moçambique
Fantástico, Diego
Diegão trás um conteúdo mais avançado de NEXT eu posso ajudar com algum patrocínio se for interessante!
Acessa o canal do Willian Justen, ele liberou um dos curso de Nextjs lá, talvez te ajude
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
Acho que apenas porque ambos ficam igualados hoje em dia em funcionalidades e assim fica uma coisa a menos pra ensinar aos alunos.
@@dieegosf Bom saber, muito obrigado pela resposta :D
Excelente Curso 😜✨
Mano, qual camera você usa?
Maneirasso!
Estou usando NextJS e Chakra UI, mas meu problema foi com o Slot, tem alguma forma de substituir o Slot do Radix UI?
tá de hack kk, ótimo vídeo Diego 👏🏻
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
Fala Allef, sim, mas se for pra separar prefiro usar algo como o windstitch.vercel.app/
Só dicas fodas!!
E se eu quisesse determinar que ele teria mais de um formato, como ficaria?
Massa.
Dica muito boa
Muito show!
Top!
juro por tudo que em 4:13 eu pensei que o diego ia soltar uma dancinha do tiktok
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?
Qual é esse tema do vscode?
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?
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.
@@dieegosf entendi, então é interessante somente se o child herdar as props e estilização do componente pai
Isso até que é bem útil se for ver …
em pensar que o vue.js já vem com slot padrão 🤣 que rolo meus amigos
3:15 tendinite?
"tenho tendinite" força Diegão, torcemos pela sua recuperação 😔✊🙏🙏
UAHHUAHAUAH programador que nunca teve tendinite não é programador
Força Diego
ASUudhasudhasudh
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
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
Uso de slot interessante e poderoso, mas se não utilizado com responsabilidade pode virar umas monstrozidades.
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?
Alguém da Rocket usa ou ja usou o StencilJs.
Se ja usou conte sua experiencia com o StencilJs.
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.
Boa tarde
Brabo demaiss matador de chimpanzé
dúvida: pq não usar a tag de link direto ao invés de fazer esse polimorfismo?
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á....
acho que ele herda as classes da tag pai na filha
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).
@@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
Alguem sabe como chama aquele plugin que ele vai digitando no terminal o nome do pacote e vai aparecendo sugestões?
FIG, é só para macOS por enquanto.
gostei mt, pena que utilizo vue e não tem como rodar o radix nele :/
alguem tem alguma alternativa?
O Vue possui o Slot nativamente, mas n sei sobre uma lib igual o Radix pra Vue.
@@dieegosf eu uso o headless ui, tem pra react e vue :) não deve ser exatamente igual, mas é uma boa opção
gente qual eh esse tema do diegão???
Min Theme
N é mais fácil só usar o A?
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.
Diego 5x kkkk
Primeiro
Ué, não era proibido usar conceitos de OO no React ? Jajá vão voltar com classes..
Polimorfismo foi apenas o nome dado, nem existe relacionamento com OO na sintaxe.
Qual o tema do vscode?
Min Theme