Criando UI no React na velocidade da luz! (shadcn/ui)
Вставка
- Опубліковано 25 січ 2024
- 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
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!
coda na velocidade da luz
se vc não entendeu pq esta faltando a base pra vc estuda mais mano e depois vc volta q td faz sentido.
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
@@felipecarneiro4723os vídeos do Diego são para quem sabe programa quem esta aprendendo tem que ver vídeo do Maykão
@@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. 🤯
Eu simplesmente AMEI ESSA LIB!!! Sofri usando MUI pq estilizar os componentes pra minha aplicação não era nada simples, essa é perfeita!
Sim, ainda mais por ser em conjunto com Tailwind. Super útil!
Parabéns pelo vídeo. Crie mais vídeos sobre essa biblioteca e outras.
Estava testando esses dias essa tecnologia, incrível! Sabia que ia sair no Rocketseat muito top!
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...
@@italoibismar8479 em quais canais/meios você consome esse conteúdo gringo em programação? Se puder compartilhar, seria valioso pra mim!
Muito bem explicado,muito obrigado . Se puder faz também do NextUi 😁
manoo, que foda. Além de ser rápido para um caramba. show de bola.
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
Interessantíssimo e nos ajuda a ser bem produtivo também!
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!
Eu costumo usar o Flowbite. Dá uma pesquisada depois.
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
Lib delicinha heim. Já tinha ouvido falar, mas não tinha visto na prática
Muito bom, programar assim é satisfatório
é disso que eu to falando!!
Dahora te ver o mestre codando ❤
sensacional, passou uma visão muito boa
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
Sensacional!
Que ferramenta massa! Eu estou desenvolvendo um projeto usando Material UI e como eu gostaria que fosse customizável dessa forma.
Parei de usar essa bibliotecas justamente por isso, são muito engessadas!
Depois utiliza o chakra UI altamente customizável e fácil de entender
Rapaz, topzera! Igual algoritmos e estruturas de dados com animes :D
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
Aonde acha uns bons pra comprar?
Tbm to querendo saber
@@jefersongabri Isomorphic e Voxuuy são mt bons
@@jefersongabri envato
começei a usar, a praticidade é otima
Engraçado é na hora da entrevista técnica a gente perde até a localização das teclas kkkk
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?
tenta recriar aquele mindmeister, com a funcionalidade parecida que tem de interatividade, igual você fez com o notion
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
surreal, vou testar ela com vue
O shadcn/ui ta usando em producao???
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).
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
Alguém sabe onde foi postado a continuação desse vídeo ou dessa live ?
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.
já saiu o vídeo, inclusive já apliquei em um projeto!
ua-cam.com/video/YJmcyvrJf20/v-deo.htmlsi=5vlaMxIW5Hkeicpl
Opa, valeu mano!@@veniciusfeitosa1160
vale a pena ser front? há mais oportunidade como free lancer, ou é relativo?
Diego é surreal 😅
Top
great video amazing.
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 :/
Pra quem deseja a solução de ponta aponta
PT 1 - ua-cam.com/video/er_QPBldsXE/v-deo.html
PT 2 - ua-cam.com/video/DA39qCGt6RE/v-deo.html
PT 3 - ua-cam.com/video/YJmcyvrJf20/v-deo.html
o homi é na velocidade da luz
Diegao, vc usa as setas do teclado? Isso nao atrapalha? Ter que ficar tirando a mao e movendo pras setas
Acho que num geral, quão menos você usar o mouse mais produtivo fica
Pode mostrar os lint HTML, TS, json, para deixar o código normatizado
Esses vídeos são de live onde?
Ainda usa o zsh? Qual custom?
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.
Meta!
Carai que vscode é esse? o meu é mac mais nao ta assim nao, e a ultima atualizacao 1.86? o meu ta no 1.80
Qual extensão de Snippets o Diego usa?
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?
da uma olhada no createContext, vai facilitar mt qd da esses erros de passar props
minha meta é programar como esse cara programa, nego nem pisca slk
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.
Não entendi nada, mas ficou muito bom 👍
q extensão é essa da árvore de projeto? pra "fechar" o package
Também quero saber
não usa mais prettier + eslint?
qual a opinião de vocês sobre Vite vs Next?
Sempre Next
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.
Sigo na mesma linha do @FlavioSilvaJs
Sempre NEXT
Se for upar na vercel é NEXT, do contrário tu é livre acredito eu.
Vídeo show! Q navegador é esse?
Safari. Só tem pra sistema Apple
Arc
Nao consigo achar de jeito nenhum o canal que ele faz essas lives na twitch, eh o oficial da rocket seat?
é o canal do diegao, o user é dieegosf
@@enzoolegario2383 obrigado de vdd
eu queria saber se esses components são costumizaveis, como troca de cor e etc
??
ele instala o codigo fonte no seu projeto entao vc pode customizar tudo que quiser
muito obrigado@@junior.santana
Para remover o modo 2x do Diego, selecione a velocidade de 0.5x.
olá poderia me dizer qual o navegador que você utiliza?
queria saber tambem
Arc, por enquanto só tem pra MacOS@@drgabbo1025
@@apxlxnix1 Já lançou para windows.
top mano, alguem sabe dizer qual é esse navegador ?
É o Arc Browser, atualmente só tem pra Mac mas vais sair também para outras plataformas no futuro
@@windows07 SAIU PRA VOCÊ WINDOWS!
Muito boa essa font.
Qual o nome completo?
JetBrains Mono
Qual editor de código vc está usando ?
VS Code porém customizado ele até tem um vídeo no canal mostrando como deixar desse jeito
Vendo o Diegão codar parece simples
Qual tema vc usa no VSCODE
Min Theme
como o cara consegue ser bonito e programador ao mesmo tempo kks
Lá ele kkkkk
a vida não está fácil
Que navegador é esse que ele usa?
to querendo saber tambem kkk
Arc, só tem pra MacOs por enquanto @@lLucassFerreira
Que tema é esse ?
O pnpm só pega no vite?
Não, qualquer projeto
@@dieegosf o meu não funciona tem que instalar algo? Porque eu não instalei nada
Tão bonitinho + tão lelé da cuca🤐
Poxa esse seus últimos vídeos estão fora de ordem?
kd o final do vídeo? rsrsrsrs
Como o asChild ? Alguém explica?
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.
@@thiagodiniz8224 obrigado, vou testar e ver se entendi..
Almost all of the words are English. As a gringo in Brazil, it's so easy to watch tech video.s
mas cortou assim do nada????
Que IDE é essa?
Man, você tá com uma cara de cansaço braba! Cuidado como excesso de trabalho
To safe!
Achei normal kkkkk
ei man, tu vive cheetado ne
carai, ele esta com depressão? esta acabado coitado!
melhoras ai, fica com deus!
kkkkk que viagem mano, bicho ta voandoo
não, ele só ta velho mesmo kkk
É sempre os mais bostas que falam merda!
1:30... nao instala ....
minutos depois... instala isso, aquilo, isso, mais isso... e mais aquilo...
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.
Porque não vejo ninguém falando do ant.design? dá de mil a zero em qualquer lib dessas que tão na modinha...
No minimo estranho né, se da de mil a zero nas lib e ninguém ta falando nada...
@@thiagodiniz8224 sim.. muito estranho.. creio que seja só modinha mesmo
shadcn-ui na minha opinião ganha de todas. Já usei Ant, MUI e Chakra UI.
@@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...
achei mais interessante a daisyui
MantineUI é bem mais produtivo que esse cara...
Mantine é construído em cima do Emotion não? Se sim, tem que ver porque Emotion ainda não suporte Streaming SSR do Next.
@@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.