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/ENt90...
Conecte-se a 500mil devs e avance para o próximo nível com a nossa plataforma: rocketseat.com...
Cadastre-se na nossa plataforma: app.rocketseat...
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

[@rocketseat]

No aniversário da Rocketseat, quem ganha uma OFERTA EXCLUSIVA é você! Descubra mais: rseat.in/ENt90Atzj

[@SuperRenatoduarte]

Caramba, muito bom mesmo. Pena que não entendi nada, mas é muito bom!

[@FelipeSilva-kw4yo]

coda na velocidade da luz

[@fibeck2613]

se vc não entendeu pq esta faltando a base pra vc estuda mais mano e depois vc volta q td faz sentido.

[@felipecarneiro4723]

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]

@@felipecarneiro4723os vídeos do Diego são para quem sabe programa quem esta aprendendo tem que ver vídeo do Maykão

[@felipecarneiro4723]

@@fibeck2613 Maykão tem uma didática excelente

[@eorafasantos]

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. 🤯

[@leticiasantanna4801]

Eu simplesmente AMEI ESSA LIB!!! Sofri usando MUI pq estilizar os componentes pra minha aplicação não era nada simples, essa é perfeita!

[@randerins]

Sim, ainda mais por ser em conjunto com Tailwind. Super útil!

[@danielweb]

ajudou de mais, estou aqui numa correria para entregar um produto ao cliente, esssa lib acelerou a productividade. Muito obrigado

[@m4c1el]

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]

Eu costumo usar o Flowbite. Dá uma pesquisada depois.

[@cyberpunktuber]

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

[@fabiofreitasbr]

Estava testando esses dias essa tecnologia, incrível! Sabia que ia sair no Rocketseat muito top!

[@italoibismar8479]

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]

@@italoibismar8479 em quais canais/meios você consome esse conteúdo gringo em programação? Se puder compartilhar, seria valioso pra mim!

[@GMP93]

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]

Aonde acha uns bons pra comprar?

[@victoroliveira-nj9jm]

Tbm to querendo saber

[@sousaweb]

@@jefersongabri envato

[@giovanio.3581]

Que ferramenta massa! Eu estou desenvolvendo um projeto usando Material UI e como eu gostaria que fosse customizável dessa forma.

[@lucashoffmannn]

Parei de usar essa bibliotecas justamente por isso, são muito engessadas!

[@lucascerqueira1132]

Depois utiliza o chakra UI altamente customizável e fácil de entender

[@chameguinhos2522]

é disso que eu to falando!!

[@marcosgarcia8313]

manoo, que foda. Além de ser rápido para um caramba. show de bola.

[@cyberpunktuber]

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

[@Felpopinho]

Muito bom, programar assim é satisfatório

[@fabricio.damasceno]

Parabéns pelo vídeo. Crie mais vídeos sobre essa biblioteca e outras.

[@rkn1271]

Pra quem deseja a solução de ponta aponta PT 1 - kzbin.info/www/bejne/m6PCgoN4ocmmjqc PT 2 - kzbin.info/www/bejne/enKWaqR5fNlpiKc PT 3 - kzbin.info/www/bejne/j3vQlKysp6-ZaJI

[@Eofab1nnevida]

Muito obrigado!

[@samueljuniorsjc]

Sabe Muito

[@onildo_costa]

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]

já saiu o vídeo, inclusive já apliquei em um projeto! kzbin.info/www/bejne/j3vQlKysp6-ZaJIsi=5vlaMxIW5Hkeicpl

[@onildo_costa]

Opa, valeu mano!@@veniciusfeitosa1160

[@EstudantesdeElite]

Rapaz, topzera! Igual algoritmos e estruturas de dados com animes :D

[@ManoMax]

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]

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

[@nathannogueirar]

Muito bem explicado,muito obrigado . Se puder faz também do NextUi 😁

[@oliveirafocs]

Lib delicinha heim. Já tinha ouvido falar, mas não tinha visto na prática

[@lucasargate]

Dahora te ver o mestre codando ❤

[@FelipedosSantosAssis]

Interessantíssimo e nos ajuda a ser bem produtivo também!

[@gustavofernandes5275]

sensacional, passou uma visão muito boa

[@cyberpunktuber]

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

[@kauemagalhaes2176]

tenta recriar aquele mindmeister, com a funcionalidade parecida que tem de interatividade, igual você fez com o notion

[@arturvalex]

Engraçado é na hora da entrevista técnica a gente perde até a localização das teclas kkkk

[@rafaelteodorodemoraes1978]

Alguem sabe qual é a ferramenta que o Diego usa nos videos de front (quando vai mostrar a tela mesmo...)?

[@fheonix5]

ta porra diego, o cara fez rapidao os bagui e eu aqui apanhando

[@evandrovalente948]

Sensacional!

[@patricksantos6800]

O shadcn/ui ta usando em producao???

[@JoséDev-k9e]

minha meta é programar como esse cara programa, nego nem pisca slk

[@SteamingLiveCreating-hq7nj]

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.

[@dani9153blue]

começei a usar, a praticidade é otima

[@jeffersonfelixdev]

Para remover o modo 2x do Diego, selecione a velocidade de 0.5x.

[@Caiomsilva]

qual a opinião de vocês sobre Vite vs Next?

[@tamicktom]

Sempre Next

[@FlavioSilvaJs]

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]

Sigo na mesma linha do @FlavioSilvaJs

[@EsdrasCastroFerreira]

Sempre NEXT

[@gusdev0258]

Se for upar na vercel é NEXT, do contrário tu é livre acredito eu.

[@raul945]

Diegao, vc usa as setas do teclado? Isso nao atrapalha? Ter que ficar tirando a mao e movendo pras setas

[@PedroHenriqueRodrigues-vr7jh]

Acho que num geral, quão menos você usar o mouse mais produtivo fica

[@JulioGarcia-yc3kl]

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 :/

[@JefersonRamos-fi9bl]

Meta!

[@gabsodev]

Diego é surreal 😅

[@mds.Gabriel]

vale a pena ser front? há mais oportunidade como free lancer, ou é relativo?

[@atcc5635]

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?

[@JoséMarioPinheiroMeira]

da uma olhada no createContext, vai facilitar mt qd da esses erros de passar props

[@luanramalho8174]

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.

[@yurioliveira2041]

surreal, vou testar ela com vue

[@eduardoandrade7312]

o homi é na velocidade da luz

[@alexandrejunior4775]

Como você organiza componentes oriundos dos componentes do shadcnui que vão ser muito utilizados no projeto mas que preciso personalizar ele mais ainda?

[@Joanneswsquim]

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

[@byteraro]

Top

[@bluestorm1898]

Vídeo show! Q navegador é esse?

[@krultu]

Safari. Só tem pra sistema Apple

[@apxlxnix1]

Arc

[@tiagoc9754]

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?

[@gabrielcarballo7825]

Alguém sabe onde foi postado a continuação desse vídeo ou dessa live ?

[@peeksz]

Nao consigo achar de jeito nenhum o canal que ele faz essas lives na twitch, eh o oficial da rocket seat?

[@enzoolegario2383]

é o canal do diegao, o user é dieegosf

[@peeksz]

@@enzoolegario2383 obrigado de vdd

[@ChrisAxxwell]

Carai que vscode é esse? o meu é mac mais nao ta assim nao, e a ultima atualizacao 1.86? o meu ta no 1.80

[@arozendojr]

Pode mostrar os lint HTML, TS, json, para deixar o código normatizado

[@jamerson.aguiar]

não usa mais prettier + eslint?

[@hardplaypt]

great video amazing.

[@VitorSantos-yt7xv]

olá poderia me dizer qual o navegador que você utiliza?

[@drgabbo1025]

queria saber tambem

[@apxlxnix1]

Arc, por enquanto só tem pra MacOS@@drgabbo1025

[@miguelpradow]

@@apxlxnix1 Já lançou para windows.

[@isaaclourenco9254]

Que navegador é esse que ele usa?

[@lLucassFerreira]

to querendo saber tambem kkk

[@apxlxnix1]

Arc, só tem pra MacOs por enquanto @@lLucassFerreira

[@TiagoDark]

Esses vídeos são de live onde?

[@alchemist6508]

Qual extensão de Snippets o Diego usa?

[@thiagoleite3255]

Vendo o Diegão codar parece simples

[@danielsampaio9295]

Ainda usa o zsh? Qual custom?

[@morenetworth]

Almost all of the words are English. As a gringo in Brazil, it's so easy to watch tech video.s

[@leoz14]

Não entendi nada, mas ficou muito bom 👍

[@kab3l0w]

q extensão é essa da árvore de projeto? pra "fechar" o package

[@oberdanorris]

Também quero saber

[@paulohenriquedacostabarros8987]

kd o final do vídeo? rsrsrsrs

[@Thauan7020]

a vida não está fácil

[@TrendTokSuper]

Poxa esse seus últimos vídeos estão fora de ordem?

[@guilhermevicente2903]

pow, top demais, pena que não entendi nada kkkk

[@witallorodrigues2909]

como o cara consegue ser bonito e programador ao mesmo tempo kks

[@miguelpradow]

Lá ele kkkkk

[@wesleyrafaelp7865]

eu queria saber se esses components são costumizaveis, como troca de cor e etc ??

[@junior.santana]

ele instala o codigo fonte no seu projeto entao vc pode customizar tudo que quiser

[@wesleyrafaelp7865]

muito obrigado@@junior.santana

[@RaposaLunarr]

Tão bonitinho + tão lelé da cuca🤐

[@flaviosalgado229]

Qual editor de código vc está usando ?

[@miguelpradow]

VS Code porém customizado ele até tem um vídeo no canal mostrando como deixar desse jeito

[@jandersonfcosta]

Muito boa essa font. Qual o nome completo?

[@UmFilipe]

JetBrains Mono

[@JoaoCarv30]

Que tema é esse ?

[@Abreusproductions]

top mano, alguem sabe dizer qual é esse navegador ?

[@windows07]

É o Arc Browser, atualmente só tem pra Mac mas vais sair também para outras plataformas no futuro

[@miguelpradow]

@@windows07 SAIU PRA VOCÊ WINDOWS!

[@bxl_lopes]

Qual tema vc usa no VSCODE

[@dieegosf]

Min Theme

[@WisleyASousa]

1:30... nao instala .... minutos depois... instala isso, aquilo, isso, mais isso... e mais aquilo...

[@sauloaccaio]

mas cortou assim do nada????

[@miguelpradow]

O pnpm só pega no vite?

[@dieegosf]

Não, qualquer projeto

[@miguelpradow]

@@dieegosf o meu não funciona tem que instalar algo? Porque eu não instalei nada

[@adrianomourao3272]

Que IDE é essa?

[@kaianvasconcelos1999]

Como o asChild ? Alguém explica?

[@thiagodiniz8224]

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]

@@thiagodiniz8224 obrigado, vou testar e ver se entendi..

[@LuanCodeplays]

Man, você tá com uma cara de cansaço braba! Cuidado como excesso de trabalho

[@dieegosf]

To safe!

[@Brenosalv]

Achei normal kkkkk

[@user-re2me1nj4c]

carai, ele esta com depressão? esta acabado coitado! melhoras ai, fica com deus!

[@raphaelmelo]

kkkkk que viagem mano, bicho ta voandoo

[@guh0493]

não, ele só ta velho mesmo kkk

[@iNoblle]

É sempre os mais bostas que falam merda!

[@David_Brito_Developer]

ei man, tu vive cheetado ne

[@henriquezolini]

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]

No minimo estranho né, se da de mil a zero nas lib e ninguém ta falando nada...

[@henriquezolini]

@@thiagodiniz8224 sim.. muito estranho.. creio que seja só modinha mesmo

[@Brenosalv]

shadcn-ui na minha opinião ganha de todas. Já usei Ant, MUI e Chakra UI.

[@henriquezolini]

@@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...

[@rodrigooliveira6224]

acho um desaforo isso.

[@dioncley000]

achei mais interessante a daisyui

[@KingNFT_oficial]

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í.

[@JoseLucasestrela]

Não

[@KingNFT_oficial]

@@JoseLucasestrela ta suave to trampando numa empresa de games como dev. Boa sorte pra quem fica.

[@smanzoli]

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.

[@edymbhify]

MantineUI é bem mais produtivo que esse cara...

[@dieegosf]

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]

@@dieegosf Na versão 7 ou posterior, o Emotion não é mais utilizado; em vez disso, é empregado o PostCSS.