Тёмный

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

Rocketseat
Подписаться 362 тыс.
Просмотров 22 тыс.
50% 1

NLW Copa | Inscreva-se gratuitamente para participar do evento completo: rseat.in/ingresso-nlw-copa
Se você trabalha com React no dia a dia, provavelmente já precisou criar componentes reutilizáveis.
Agora, você já imaginou fazer um componente que pode se comportar como outro sem precisar começar algo do zero?
No Radix isso é possível usando o princípio de polimorfismo.
Hoje eu quero te mostrar na prática como aplicar essa feature secreta para melhorar a acessibilidade do seu código e criar componentes que se transformam por baixo dos panos.
Bora codar?
-----
Conecte-se a 200mil devs e avance para o próximo nível com a nossa plataforma: rocketseat.com.br/
Cadastre-se na nossa plataforma: app.rocketseat.com.br/signup
Junte-se a mais de 392mil devs em nossa comunidade no Discord: / discord
Acompanhe a Rocketseat nas redes sociais:
Twitter: @rocketseat
Facebook: @rocketseat
Instagram: @rocketseat_oficial

Опубликовано:

 

31 май 2024

Поделиться:

Ссылка:

Скачать:

Готовим ссылку...

Добавить в:

Мой плейлист
Посмотреть позже
Комментарии : 79   
@insightweb
@insightweb Год назад
Legal, slot no vuejs já é nativo para usar justamente desta forma!
@maailoon
@maailoon Год назад
Diego trás conteúdos pro backend também 😊 Tô esperando a att da trilha de node 💪🏻
@dieegosf
@dieegosf Год назад
To preparando muita coisa de back-end, principalmente em dezembro vai rolar :)
@josealexsandro9768
@josealexsandro9768 Год назад
@@dieegosf aí sim!
@elvispalace
@elvispalace Год назад
@@dieegosf aeeeeeeeeeeeee
@LuanHenrique-pc3nn
@LuanHenrique-pc3nn Год назад
É mt bom saber q além disso ser mt foda, eu tbm já to conseguindo entender o React em si
@kipperdev
@kipperdev Год назад
Muito bom! Ótimo conteúdo sempre 👏🏻
@danilovieira4442
@danilovieira4442 Год назад
Cada aula é um mind blowing diferente 🤯 Por mais dicas como essa, Diegão!
@viniciussantana7934
@viniciussantana7934 Год назад
Dica muito massa Diegão, não sabia que o radix dava esse suporte
@MaykBrito
@MaykBrito Год назад
Animal DEMAIS! 😍
@marlonmnz
@marlonmnz Год назад
No inicio achei que era magia e no final vi que era tecnologia... Massa demais essa dica Diegão.
@cryptoice7180
@cryptoice7180 Год назад
VC é F*** Demais Piaaa! Parabéns!
@raulrozza
@raulrozza Год назад
Engraçado que essa semana mesmo eu tava vendo o Slot e outros componentes de utility do radix hahaha quanta coincidência
@allandepaivaribeiro5690
@allandepaivaribeiro5690 Год назад
Excelente Curso 😜✨
@nestortonanez4752
@nestortonanez4752 Год назад
Obrigado Diego! É bom Tip
@ricardoalmeida7607
@ricardoalmeida7607 Год назад
Fantástico, Diego
@LucasAlbertoFulano
@LucasAlbertoFulano Год назад
granda dica. directamente de Moçambique
@alanfljesus
@alanfljesus Год назад
Estou usando NextJS e Chakra UI, mas meu problema foi com o Slot, tem alguma forma de substituir o Slot do Radix UI?
@StephenWillians
@StephenWillians Год назад
Muito show!
@victorfacilita7749
@victorfacilita7749 Год назад
Só dicas fodas!!
@1BoxTV
@1BoxTV Год назад
Mano, qual camera você usa?
@cryptoice7180
@cryptoice7180 Год назад
Diegão trás um conteúdo mais avançado de NEXT eu posso ajudar com algum patrocínio se for interessante!
@alangabriel1671
@alangabriel1671 Год назад
Acessa o canal do Willian Justen, ele liberou um dos curso de Nextjs lá, talvez te ajude
@MlfragaGameplays
@MlfragaGameplays Год назад
Qual é esse tema do vscode?
@udimbas
@udimbas Год назад
Maneirasso!
@ytalodev
@ytalodev Год назад
Dica muito boa
@lucasrodriguesdove
@lucasrodriguesdove 8 месяцев назад
E se eu quisesse determinar que ele teria mais de um formato, como ficaria?
@sam95905
@sam95905 Год назад
tá de hack kk, ótimo vídeo Diego 👏🏻
@PLifes
@PLifes Год назад
Top!
@franklin.javier
@franklin.javier Год назад
Boa dica Diego. O stitches faz isso usando a prop `as`, como no styled-components/emotion/etc
@dieegosf
@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.
@clemilsonazevedo2183
@clemilsonazevedo2183 3 месяца назад
Massa.
@gamaquad6765
@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?
@pupos3
@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
@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.
@juanssilveira
@juanssilveira Год назад
juro por tudo que em 4:13 eu pensei que o diego ia soltar uma dancinha do tiktok
@allefdouglas9693
@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
@dieegosf Год назад
Fala Allef, sim, mas se for pra separar prefiro usar algo como o windstitch.vercel.app/
@thiagomiranda3424
@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
@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
@thiagomiranda3424 Год назад
@@dieegosf Bom saber, muito obrigado pela resposta :D
@drgabbo1025
@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?
@gabrielserejo848
@gabrielserejo848 Год назад
em pensar que o vue.js já vem com slot padrão 🤣 que rolo meus amigos
@mouravocal
@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
@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
@mouravocal Год назад
@@dieegosf entendi, então é interessante somente se o child herdar as props e estilização do componente pai
@thiagosolstafir
@thiagosolstafir Год назад
Alguem sabe como chama aquele plugin que ele vai digitando no terminal o nome do pacote e vai aparecendo sugestões?
@enricopozzi3657
@enricopozzi3657 Год назад
FIG, é só para macOS por enquanto.
@rafaelalcantara5741
@rafaelalcantara5741 Год назад
3:15 tendinite?
@ThePellizzetti
@ThePellizzetti Год назад
"tenho tendinite" força Diegão, torcemos pela sua recuperação 😔✊🙏🙏
@YagoVelosoo
@YagoVelosoo Год назад
UAHHUAHAUAH programador que nunca teve tendinite não é programador
@ivanvinicius8317
@ivanvinicius8317 Год назад
Força Diego
@dieegosf
@dieegosf Год назад
ASUudhasudhasudh
@edu_amr
@edu_amr Год назад
Isso até que é bem útil se for ver …
@eriklucas8998
@eriklucas8998 Год назад
Uso de slot interessante e poderoso, mas se não utilizado com responsabilidade pode virar umas monstrozidades.
@LUIZ0798
@LUIZ0798 Год назад
Boa tarde
@oriumi
@oriumi Год назад
gostei mt, pena que utilizo vue e não tem como rodar o radix nele :/ alguem tem alguma alternativa?
@dieegosf
@dieegosf Год назад
O Vue possui o Slot nativamente, mas n sei sobre uma lib igual o Radix pra Vue.
@oriumi
@oriumi Год назад
@@dieegosf eu uso o headless ui, tem pra react e vue :) não deve ser exatamente igual, mas é uma boa opção
@nicolasmoises2720
@nicolasmoises2720 Год назад
Brabo demaiss matador de chimpanzé
@Matheus_1582
@Matheus_1582 Год назад
Alguém da Rocket usa ou ja usou o StencilJs. Se ja usou conte sua experiencia com o StencilJs.
@RenatoSilva-vb8kq
@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
@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
@pedrol6193
@pedrol6193 Год назад
N é mais fácil só usar o A?
@principe.borodin
@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.
@rafaelbernardino4615
@rafaelbernardino4615 Год назад
gente qual eh esse tema do diegão???
@dieegosf
@dieegosf Год назад
Min Theme
@vitorcouto1465
@vitorcouto1465 Год назад
dúvida: pq não usar a tag de link direto ao invés de fazer esse polimorfismo?
@juniormusics
@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
@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
@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
@sergioluiscruzfilho
@sergioluiscruzfilho Год назад
Qual o tema do vscode?
@dieegosf
@dieegosf Год назад
Min Theme
@eliasjnior
@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.
@ivanvinicius8317
@ivanvinicius8317 Год назад
Diego 5x kkkk
@kayooliveiradev
@kayooliveiradev Год назад
Primeiro
@thallesgarbelotti4218
@thallesgarbelotti4218 Год назад
Ué, não era proibido usar conceitos de OO no React ? Jajá vão voltar com classes..
@dieegosf
@dieegosf Год назад
Polimorfismo foi apenas o nome dado, nem existe relacionamento com OO na sintaxe.
Далее
O ERRO mais comum no React (você já fez isso)
13:26
Просмотров 117 тыс.
SITUATION IN FAST FOOD
00:19
Просмотров 1,6 млн
3 Tips for Scaling React Apps with TailwindCSS
15:21
Просмотров 37 тыс.
Server Components Done Right! (New React Feature)
25:34
O DESIGN SYSTEM DA ROCKETSEAT (DA UI AO CÓDIGO)
52:20
Просмотров 109 тыс.
My Aliases on Git | Code/Drops #07
15:38
Просмотров 36 тыс.
SITUATION IN FAST FOOD
00:19
Просмотров 1,6 млн