Criando UI no React na velocidade da luz! (shadcn/ui)
No aniversário da Rocketseat, quem ganha uma OFERTA EXCLUSIVA é você!
Descubra mais: rseat.in/ENt90Atzj
Conecte-se a 500mil 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
Пікірлер: 153
No aniversário da Rocketseat, quem ganha uma OFERTA EXCLUSIVA é você! Descubra mais: rseat.in/ENt90Atzj
Caramba, muito bom mesmo. Pena que não entendi nada, mas é muito bom!
@FelipeSilva-kw4yo
5 ай бұрын
coda na velocidade da luz
@fibeck2613
5 ай бұрын
se vc não entendeu pq esta faltando a base pra vc estuda mais mano e depois vc volta q td faz sentido.
@felipecarneiro4723
5 ай бұрын
Eu só aprendi pq faz tempo que mexo com isso, mas ele coda muito rápido! Tá igual eu no dia que eu fui aprender violão com o vídeo do Jorge vercilio, não entendi nada
@fibeck2613
5 ай бұрын
@@felipecarneiro4723os vídeos do Diego são para quem sabe programa quem esta aprendendo tem que ver vídeo do Maykão
@felipecarneiro4723
5 ай бұрын
@@fibeck2613 Maykão tem uma didática excelente
Ajuda demais que conforme ele vai codando ele narra as ações e explica a origem das coisas. Ajuda demais pra gente conseguir acompanhar. Mesmo sendo rápido fica muito explicativo. Conteúdo nível master. 🤯
Rapaz, topzera! Igual algoritmos e estruturas de dados com animes :D
Muito bom, programar assim é satisfatório
Interessantíssimo e nos ajuda a ser bem produtivo também!
Muito bem explicado,muito obrigado . Se puder faz também do NextUi 😁
Eu simplesmente AMEI ESSA LIB!!! Sofri usando MUI pq estilizar os componentes pra minha aplicação não era nada simples, essa é perfeita!
@randerins
2 ай бұрын
Sim, ainda mais por ser em conjunto com Tailwind. Super útil!
manoo, que foda. Além de ser rápido para um caramba. show de bola.
@cyberpunktuber
4 ай бұрын
EMPRESA LIXO ENTREI EM CONTATO PRA FALAR SOBRE O CERTIFICADO QUE NÃO FOI EMITIDO E NÃO OBTIVE NENHUMA RESPOSTA, E NENHUMA RESOLUÇÃO DE PROBLEMA POR PARTE DELES, ESTÃO SE LIXANDO PARA OS ALUNOS, A PARTIR DE HOJE VOU FALAR PARA O MÁXIMO DE PESSOAS QUE PUDER PARA QUE NÃO SE MATRICULEM NESSA BOSTA DE ESCOLA QUE NÃO DÁ A MÍNIMA PARA OS ALUNOS
Parabéns pelo vídeo. Crie mais vídeos sobre essa biblioteca e outras.
Lib delicinha heim. Já tinha ouvido falar, mas não tinha visto na prática
Estava testando esses dias essa tecnologia, incrível! Sabia que ia sair no Rocketseat muito top!
@italoibismar8479
5 ай бұрын
Muito bom mesmo, Rocketseat sempre trazendo oq tem de melhor pra gente. Eu tive acesso a essa tecnologia meses atrás pq consumo muito conteúdo gringo de programação, e só agora isso tá se propagando aqui no br...
@enricoluizsecco339
4 ай бұрын
@@italoibismar8479 em quais canais/meios você consome esse conteúdo gringo em programação? Se puder compartilhar, seria valioso pra mim!
Sensacional!
Dahora te ver o mestre codando ❤
sensacional, passou uma visão muito boa
@cyberpunktuber
4 ай бұрын
EMPRESA LIXO ENTREI EM CONTATO PRA FALAR SOBRE O CERTIFICADO QUE NÃO FOI EMITIDO E NÃO OBTIVE NENHUMA RESPOSTA, E NENHUMA RESOLUÇÃO DE PROBLEMA POR PARTE DELES, ESTÃO SE LIXANDO PARA OS ALUNOS, A PARTIR DE HOJE VOU FALAR PARA O MÁXIMO DE PESSOAS QUE PUDER PARA QUE NÃO SE MATRICULEM NESSA BOSTA DE ESCOLA QUE NÃO DÁ A MÍNIMA PARA OS ALUNOS
Engraçado é na hora da entrevista técnica a gente perde até a localização das teclas kkkk
é disso que eu to falando!!
iniciante de react + tailwind aqui! com muita gente falando do shadcn eu queria ver como exatamente era isso na prática, e seu vídeo perfeitamente me fez entender o porquê das pessoas gostarem tanto de usar shadcn. ótimo vídeo!
@l0cass
5 ай бұрын
Eu costumo usar o Flowbite. Dá uma pesquisada depois.
@cyberpunktuber
4 ай бұрын
EMPRESA LIXO ENTREI EM CONTATO PRA FALAR SOBRE O CERTIFICADO QUE NÃO FOI EMITIDO E NÃO OBTIVE NENHUMA RESPOSTA, E NENHUMA RESOLUÇÃO DE PROBLEMA POR PARTE DELES, ESTÃO SE LIXANDO PARA OS ALUNOS, A PARTIR DE HOJE VOU FALAR PARA O MÁXIMO DE PESSOAS QUE PUDER PARA QUE NÃO SE MATRICULEM NESSA BOSTA DE ESCOLA QUE NÃO DÁ A MÍNIMA PARA OS ALUNOS
começei a usar, a praticidade é otima
Que ferramenta massa! Eu estou desenvolvendo um projeto usando Material UI e como eu gostaria que fosse customizável dessa forma.
@lucashoffmannn
5 ай бұрын
Parei de usar essa bibliotecas justamente por isso, são muito engessadas!
@lucascerqueira1132
5 ай бұрын
Depois utiliza o chakra UI altamente customizável e fácil de entender
surreal, vou testar ela com vue
O http até substitui o uso do zustand ou outro gerenciador global? Pergunto porque vi vc dizer que talvez não precise usar estados globais no react e como seria para tratar isso para layout ou qualquer outra coisa. Loja, carrinho de compra
Como você organiza componentes oriundos dos componentes do shadcnui que vão ser muito utilizados no projeto mas que preciso personalizar ele mais ainda?
Alguém sabe me dizer se Graphql ainda faz sentido num app NextJS? Com o front e back próximos, podendo usar server components, server actions, etc. Qual a necessidade de adicionar Graphql e Apollo?
ta porra diego, o cara fez rapidao os bagui e eu aqui apanhando
Alguém sabe onde foi postado a continuação desse vídeo ou dessa live ?
tenta recriar aquele mindmeister, com a funcionalidade parecida que tem de interatividade, igual você fez com o notion
Top
Procurando por oportunidades como Full Stack (não descartando oportunidades exclusivas para Frontend ou Backend), esse vídeo me mostra a diferença de nível quando alguém se especializa em uma das duas áreas (por mais que Diego tenha conhecimento de ambas as trilhas).
@cyberpunktuber
4 ай бұрын
EMPRESA LIXO ENTREI EM CONTATO PRA FALAR SOBRE O CERTIFICADO QUE NÃO FOI EMITIDO E NÃO OBTIVE NENHUMA RESPOSTA, E NENHUMA RESOLUÇÃO DE PROBLEMA POR PARTE DELES, ESTÃO SE LIXANDO PARA OS ALUNOS, A PARTIR DE HOJE VOU FALAR PARA O MÁXIMO DE PESSOAS QUE PUDER PARA QUE NÃO SE MATRICULEM NESSA BOSTA DE ESCOLA QUE NÃO DÁ A MÍNIMA PARA OS ALUNOS
Melhor que isso, é comprar um template React com componentes genéricos pro nicho de app que vc vai atuar, já vem até exemplos de UI/UX. 20 dolares me resolve 1 mês de trabalho
@jefersongabri
4 ай бұрын
Aonde acha uns bons pra comprar?
@victoroliveira-nj9jm
4 ай бұрын
Tbm to querendo saber
@void-inc
Ай бұрын
@@jefersongabri Isomorphic e Voxuuy são mt bons
@sousaweb
22 күн бұрын
@@jefersongabri envato
o homi é na velocidade da luz
Diego é surreal 😅
great video amazing.
vale a pena ser front? há mais oportunidade como free lancer, ou é relativo?
O shadcn/ui ta usando em producao???
Diegao, vc usa as setas do teclado? Isso nao atrapalha? Ter que ficar tirando a mao e movendo pras setas
@PedroHenriqueRodrigues-vr7jh
5 ай бұрын
Acho que num geral, quão menos você usar o mouse mais produtivo fica
Qual editor de código vc está usando ?
Diegão, por favor coloca no YT também a lógica que você utilizou pra poder fazer a filtragem dos itens! Se não me engano a filtragem dos itens acontece ao mesmo tempo pelo nome e ID.
@veniciusfeitosa1160
5 ай бұрын
já saiu o vídeo, inclusive já apliquei em um projeto! kzread.info/dash/bejne/i36hxduvoq3MYpM.htmlsi=5vlaMxIW5Hkeicpl
@onildo_costa
5 ай бұрын
Opa, valeu mano!@@veniciusfeitosa1160
Pra quem deseja a solução de ponta aponta PT 1 - kzread.info/dash/bejne/l6aTs7J7nMfZiKg.html PT 2 - kzread.info/dash/bejne/dnVnm9N8d9ecgqg.html PT 3 - kzread.info/dash/bejne/i36hxduvoq3MYpM.html
Esses vídeos são de live onde?
Meta!
Diegão faz um vídeo ensinando como fazer aquele tuturial de utulização da aplicação quando o usuario entra na página, como existe no site da rocket para alunos. não encontrei nada a respeito de como fazer no youtube :/
Pode mostrar os lint HTML, TS, json, para deixar o código normatizado
Para remover o modo 2x do Diego, selecione a velocidade de 0.5x.
Estou a aprender react pelo tutorial deles (react.dev) e quando cheguei a parte do handleClick para o botão dá-me este erro " Event handlers cannot be passed to Client Component props in NextJs " já tentei resolver mas a única opção que funciona é colocando " "use client"; " mas vi também que isso não é bom de se fazer. Alguém sabe como resolver?
@user-wu7sf7ki7k
5 ай бұрын
da uma olhada no createContext, vai facilitar mt qd da esses erros de passar props
Fiz junto umas 3 vezes e não consigo estilizar o tailwind como ele faz. {....} esse trecho de estilizações não estão rodando pra mim. Instalei tudo certinho, e até usei o pnpm. Tudo igual até esse trecho, mas por algum motivo não captura a estilização.
Não entendi nada, mas ficou muito bom 👍
Ainda usa o zsh? Qual custom?
Carai que vscode é esse? o meu é mac mais nao ta assim nao, e a ultima atualizacao 1.86? o meu ta no 1.80
minha meta é programar como esse cara programa, nego nem pisca slk
@SteamingLiveCreating-hq7nj
5 ай бұрын
O Diego manja muito, mas toma cuidado com as expectativas que você coloca nas pessoas para você não se frustrar. Muitas vezes vemos vídeos que parecem perfeitos, onde o cara parece não errar um ponto e vírgula, e tendemos a achar que o cara não comete erros. Tem edição de vídeo, roteiro por trás, na grande maioria das vezes tem outra telinha ali com uma colinha feita previamente. Nada disso que falei tira o mérito do criador de conteúdo é mais um alerta para não colocar ninguém em um altar. p.s.: Não estou afirmando que você fez nada disso, mas provavelmente muitos tem essa visão equivocada de que somos perfeitos. E ficam demando muito energia tentando atingir esse nível de perfeição que aparenta existir. Aproveite a jornada e tenha boas referências como o Diego, e se dê a liberdade de errar.
q extensão é essa da árvore de projeto? pra "fechar" o package
@oberdanorris
Ай бұрын
Também quero saber
Qual extensão de Snippets o Diego usa?
Nao consigo achar de jeito nenhum o canal que ele faz essas lives na twitch, eh o oficial da rocket seat?
@enzoolegario2383
5 ай бұрын
é o canal do diegao, o user é dieegosf
@peeksz
5 ай бұрын
@@enzoolegario2383 obrigado de vdd
olá poderia me dizer qual o navegador que você utiliza?
@drgabbo1025
5 ай бұрын
queria saber tambem
@apxlxnix1
5 ай бұрын
Arc, por enquanto só tem pra MacOS@@drgabbo1025
não usa mais prettier + eslint?
Vídeo show! Q navegador é esse?
@krultu
5 ай бұрын
Safari. Só tem pra sistema Apple
@apxlxnix1
5 ай бұрын
Arc
eu queria saber se esses components são costumizaveis, como troca de cor e etc ??
@junior.santana
5 ай бұрын
ele instala o codigo fonte no seu projeto entao vc pode customizar tudo que quiser
@wesleyrafaelp7865
5 ай бұрын
muito obrigado@@junior.santana
Vendo o Diegão codar parece simples
a vida não está fácil
qual a opinião de vocês sobre Vite vs Next?
@tamicktom
5 ай бұрын
Sempre Next
@FlavioSilvaJs
5 ай бұрын
Depende muito do projeto que você está desenvolvendo, é verdade que hoje o react recomenda a utilização de um framework (next, remix, etc...), mas na minha opinião existem projetos que não necessitam de um framework tão completo, nesses casos eu sempre opto por utilizar vite.
@patricksantos6800
5 ай бұрын
Sigo na mesma linha do @FlavioSilvaJs
@user-el2hs1ef8g
5 ай бұрын
Sempre NEXT
@gusdev0258
5 ай бұрын
Se for upar na vercel é NEXT, do contrário tu é livre acredito eu.
como o cara consegue ser bonito e programador ao mesmo tempo kks
@Sleidde
5 ай бұрын
Lá ele kkkkk
top mano, alguem sabe dizer qual é esse navegador ?
@windows07
5 ай бұрын
É o Arc Browser, atualmente só tem pra Mac mas vais sair também para outras plataformas no futuro
Qual tema vc usa no VSCODE
@dieegosf
5 ай бұрын
Min Theme
Tão bonitinho + tão lelé da cuca🤐
Muito boa essa font. Qual o nome completo?
@UmFilipe
5 ай бұрын
JetBrains Mono
Que tema é esse ?
kd o final do vídeo? rsrsrsrs
Que navegador é esse que ele usa?
@lLucassFerreira
5 ай бұрын
to querendo saber tambem kkk
@apxlxnix1
5 ай бұрын
Arc, só tem pra MacOs por enquanto @@lLucassFerreira
O pnpm só pega no vite?
@dieegosf
5 ай бұрын
Não, qualquer projeto
@Sleidde
5 ай бұрын
@@dieegosf o meu não funciona tem que instalar algo? Porque eu não instalei nada
Poxa esse seus últimos vídeos estão fora de ordem?
Como o asChild ? Alguém explica?
@thiagodiniz8224
5 ай бұрын
Pelo que entendi é pra usar o filho como trigger pra função, ao invés de criar um elemento genérico envolta só pra disparar a função.
@kaianvasconcelos1999
5 ай бұрын
@@thiagodiniz8224 obrigado, vou testar e ver se entendi..
Man, você tá com uma cara de cansaço braba! Cuidado como excesso de trabalho
@dieegosf
5 ай бұрын
To safe!
@Brenosalv
5 ай бұрын
Achei normal kkkkk
mas cortou assim do nada????
carai, ele esta com depressão? esta acabado coitado! melhoras ai, fica com deus!
@raphaelmelo
5 ай бұрын
kkkkk que viagem mano, bicho ta voandoo
@guh0493
5 ай бұрын
não, ele só ta velho mesmo kkk
@iNoblle
5 ай бұрын
É sempre os mais bostas que falam merda!
Que IDE é essa?
ei man, tu vive cheetado ne
Então quer dizer que se eu entendi o video posso dizer tranquilamente que sei codar? Isso é um sonho pra mim. Alguém me dá um emprego de dev jr aí.
acho um desaforo isso.
1:30... nao instala .... minutos depois... instala isso, aquilo, isso, mais isso... e mais aquilo...
achei mais interessante a daisyui
Porque não vejo ninguém falando do ant.design? dá de mil a zero em qualquer lib dessas que tão na modinha...
@thiagodiniz8224
5 ай бұрын
No minimo estranho né, se da de mil a zero nas lib e ninguém ta falando nada...
@henriquezolini
5 ай бұрын
@@thiagodiniz8224 sim.. muito estranho.. creio que seja só modinha mesmo
@Brenosalv
5 ай бұрын
shadcn-ui na minha opinião ganha de todas. Já usei Ant, MUI e Chakra UI.
@henriquezolini
5 ай бұрын
@@Brenosalv a diferença é gritante, o ant design é incomparavelmente completo em relação a qualquer um desses. O Ant Design tem componentes sólidos e muito bem estruturados para atender a qualquer tipo de situação, tem momentos que eu mesmo fico impressionado, sempre que eu preciso de alguma coisa muito especifica em algum componente eu encontro algum atributo que resolve o problema. Tudo é muito bem pensado, isso sem contar a consistência do projeto e a quantidade de componentes que ele tem. Estas outras libs, são boas, não tenho nada contra, mas o ant design é muito mais completo e posso citar uma lista de componentes que o ant design tem e que esses não tem: o Form (para gerenciamento de formularios), o TreeSelect (para seleção de itens em uma estrutura de árvore), o Transfer (para transferir itens entre duas listas), o Upload (que tem funcionalidades avançadas para upload de arquivos), o Steps (para guiar os usuários por um processo passo a passo) e até mesmo o Grid e a Table que são infinitamente maiores em questões de adaptabilidade. Enfim, é sobre organização e grandeza... Tem um penhasco de diferença entre eles...
MantineUI é bem mais produtivo que esse cara...
@dieegosf
5 ай бұрын
Mantine é construído em cima do Emotion não? Se sim, tem que ver porque Emotion ainda não suporte Streaming SSR do Next.
@edymbhify
5 ай бұрын
@@dieegosf Na versão 7 ou posterior, o Emotion não é mais utilizado; em vez disso, é empregado o PostCSS.
Pra quem programa GUIs pra desktop, usando um Designer arrastando os widgets (seja com C#, Python, whatever), programar pra web parece algo de décadas atrás... que horror, qta perda de tempo.