Recriando interface do Github com ReactJS | UI Clone #8

[@leonardovales7637]

Tá faltando agora sair algum UI Clone com React Native hein rsrsrs. Conteúdo sensacional, parabéns.

[@vinihvc]

Que distro é essa?

[@gabrielmatos4660]

incrível! só vou terminar a nlw e vir correndo fazer esse projeto também, valeu rocketseat!

[@beroodev]

Oloks, quase 3h, gostei de ver, a galera não brinca em serviço

[@pedro_trx]

Ensine-nos à personalizar o Linux desse seu jeito ai, por favor. Obrigado pelos conteúdos! PS: fiz usando o Plank, o GTK Theme (Big Sur também), mas ainda sim não ficou da forma que queria :/

[@maykbrito]

Rodz MONSTEEERRR!!!

[@suanevallim5891]

Caso alguém esteja com problema para instalar o react-calendar-heatmap, é porque o pacote esta desatualizado e não funciona (até o presente momento) com a versão 17 do react. No package, mude react e react-dom para a versão "^16.13.1" (a mesma versão usada neste tutorial) e tudo deve funcionar normalmente.

[@lucasitikawa6368]

Pode me ensinar como faz isso, não estou conseguindo

[@GabrielBlindado]

Pra mim não estavam aparecendo as cores usando var Se alguem tive quebrando a cabeça com isso, eu resolvi tirando as aspas das variaveis no :root

[@GabrielBlindado]

:root { --primary: #fff; --black: #1b1f23; --gray: #586069; --gray-light: #6a737d; --gray-dark: #24292e; --orange: #f9826c; --logo: #fff; --header: #24292e; --username: #666; --search: rgba(255, 255, 255, 0.13); --search-placeholder: hsla(0,0%,100%,.75); --icon: #6a737d; --link: #0366d6; --border: #e1e4e8; --ticker: rgba(209,213,218,.5); --calendar-scale-0: #ebedf0; --calendar-scale-1: #9BE9A8; --calendar-scale-2: #3FC463; --calendar-scale-3: #30A14E; --calendar-scale-4: #216E3A; --javascript: #f1e05a; --typescript: #2b7489; --other-language: #8257e5; }

[@itsalltwobits]

Nem acredito mano, estava ficando maluco já! Muito obrigado!

[@MaybeBL1TZ]

Listen i don't know wtf is this language but am gonna watch and learn this

[@Reactbrasil_1]

A Rocketseat é muito foda, só galera top, conteúdo de muita qualidade, caramba mano. Vcs estão de PARABÉNS

[@waltnj]

Mais uma vez muito obrigado pelo ótimo conteúdo pessoal da Rocketseat! Guilherme, esse ThemeProvider foi a cereja sobre o bolo, valeu!!!🚀👍

[@rocketseat]

Valeeeeeu pelo feedback, Walter! 💜💜

[@teliiz]

@@rocketseat Opa Guilherme! Poderia dizer a versão do OS? Abraço

[@GabrielAraujoLima22]

Estou tendo um problema na hora de importar o Routes, Alguém pd me ajudar ??

[@willian.schenkel]

Eu tive este problema também na hora de usar. Aqui para mim (23/09/2020) instalou a versão 5.1.5, então ajustei fazendo como consta na doc. Segue o código: gist.github.com/wschenkel/6af1b813d51e51422424c6bb7407f5c1

[@rocketseat]

Fala, Gabriel! Tenta o ajuste que o Willian sugeriu acima! Deve resolver! 💜

[@paulorcvieira]

Esse quadro é sensacional simplesmente isso!

[@rodrigoribeiro7235]

Qual extensão você usa para aparecer a cor quando utliza o var() do css?

[@caiofernandes5074]

npm install react-router-dom@next history react-icons date-fns styled-components react-calendar-heatmap

[@cristubek2416]

53:06 você que colocou a margin-left de 24px, não foi por padrão Guilherme !!!

[@razaahmad1899]

Love from Pakistan💓

[@tbass.p3480]

Man... Não acredito, vou acessar o github através do meu próprio app 😎

[@vitu_7776]

OLOKILTSON, o espirito DiegoFalar5x é o core da Rocket... :P. Zoeiras a parte, mais um conteúdo sensacional. SHOW DEMAIS !!!!

[@brendadasilvapereira8837]

estou com dificuldade para colocar o tema no localstorage alguem poderia me ajudar?

[@antonioulundo5765]

ASSINSTINDO... MUITO MASSA

I challenge you clone MacOS Big Sur!!!

[@GuirdyYT]

o background do input no Header não está funcionando...

[@GuirdyYT]

Bom... Se alguém estiver com o mesmo problema eu resolvi trocando os ' ; ' do rgba no GlobalStyles por ' , '

[@UmFilipe]

Fala Rodz, achei essa barra superior do seu Linux muito estilosa, como faço pra deixar a minha assim também? (aliás, que distribuição você usa?)

[@FernandoHenrique-pq6un]

é conteúdo de qualidade atrás de conteúdo de qualidade! tão de parabéns, bora pro próximo nível galera!!!!

[@rarumaru555]

O OS desse video é linux?

[@PenguiinFPS]

É recriando interfaces da Rocketseat, eu clico na hora!

[@LucasSilva-rs3yr]

Minha sugestão para o próximo UI Clone seria um clone de algum programa Desktop, por exemplo Whatsapp, utilizando Electron.

[@rocketseat]

Valeeeu pela sugestão, Lucas! Anotado! 💜 😍

[@GabrielBlindado]

minha nossa é muito conteúdo daqui a pouco eu viro um mestre da clonagem xD

[@gabrielmatos4660]

isso que é foda kkkkkkkk

[@viictrp]

Que distro é essa? é o Deepin?

[@viictrp]

@@rodz valeu

[@othiago.fernando]

Bom dia. Ótimo vídeo. Eu instalei a extensão vscode-styled-components e todas as outras do vídeo. Mas quando coloco no css alguma cor, a instrução não exibe a cor como no seu vscode... sabes como resolver?

[@LucasSantos-fr7mh]

Mais um desafio.. muito bom valeu #rocketseat

[@marcelolimav]

Olá parabéns. Cara eu gostaria de ver um layout de um cadastro usado em sistemas de cem ( consulta, grid e neste algumas funcionalidades como edição , seleção,multi- seleção )

[@YuriMatheusGomes]

Isso é Linux ou Mac? Gostei da personalização do ícone da Rocketseat lá no topo superior esquerdo.

[@apholo8308]

Podia rolar um UI Clone da página da Rocketseat hahahhahah

[@joaopaulolacerda911]

Venha aqui agradecer a Rocket seat ela simplesmente muda a vida das pessoas graças a esses tipo de conteúdo meu sim chegou super recomendo essa empresa graças a ela meu sim chegou...

[@cridizarro]

Esse da foto é o professor ?

[@Joao-oo8yj]

Sim

[@murchmurch7678]

Meu ganharam mais um inscrito. Que video bom. Mas preciso ver pausando pois tem algumas partes que preciso dar uma pesquisada . Conteudo rapido... mas acho que é uma coisa boa

[@JoaoVitor-gh2es]

Wow, em plena NLW#2 vocês postando MAIS conteúdo gratuito e de qualidade, mas, não vou deixar acumular hein, manda mais que está incrível!

[@arquitetodasgalaxias]

Bem legal! Parabéns pelo vídeo!

[@sandersonsoares]

Mano, gostei demais de como tu personalizou o Linux, tem como passar o que tu ta usando tanto? o tema, pack de icones, dock e como deixou as opções dos programas na barra que nem no mac?

[@JabbatheHut5]

Não é possível escrever código React ou esses outros componentes/frameworks usando o Netbeans?

[@Ehopope]

Sensacional! Guilherme, poderia fazer um passo a passo pra deixar o KDE dessa forma lá no blog, achei foda! Abraço.

[@Ehopope]

@@rodz Opa, achei. Já está igual! 😂😂😂 Valeu!

[@rocketseat]

💜💜

[@dioneibianchati]

Salve amigo! Demorei uma semaninha pra terminar o projeto, porém aprendi muito. Brigadão :D

[@evertonfernandes143]

Olha esse cara, não tem limites que ele não consiga ultrapassar. Nice 💜

[@pedrojavierpanecacordova2226]

Conteúdo muito bom, deu para aprender e reforçar muitos conceitos!!!

[@yagosilva9189]

Alguem sabe como ele deixou a distro desse jeito?

[@xxevandrooliveiraxx]

Ai mata papai

[@caiovinicius5631]

Conteúdo sensacional galera, muito bom mesmo

[@LucasAndrade-lx9sx]

Terminando a NLW, esse será o primeiro conteúdo da Rocketseat q vou consumir.

[@alessandrocardoso4908]

Este vídeo vai ficar disponível ?

[@thiagoalencar3237]

Porque react-router-dom@next?

[@thiagoalencar3237]

@@rodz Acessar funcionalidades do tipo, no components, já inserir o componente renderizado ?

[@vasc0nce110s]

Topppp! A rocketseat é a razão por eu amar programação ❤️

[@rocketseat]

Woooow! 💜 Valeeeu, Mark! 😍 Comentários assim que nos fazem ver que estamos no caminho certo! 💜 🚀

[@GenaroDev]

baita vídeo. o problema que meu ouvido apita sempre que tem um erro no english. tenta perder aqueles vícios de linguagem antigos tipo esse Profile. Não é crítica, é só pra melhorar, eu mesmo quando jovem cometia inumeros desses erros. no mais show de bola.

[@GenaroDev]

@@rodz imaginei que poderia ser isso também. Eu sou acostumado com US. Safe

[@elyunterim]

Cara que foda vcs são! Essa sacada de tiro rápido para ensinar a criar layouts treinando com os layouts dos gigantes é muito massa! A gente cresce muito com essas temalizações!

[@felipekinoshita]

praticando a primeira aula da nlw2 kkk

[@leoronne]

Um olho aqui e outro na NLW

[@matheusvilela1637]

Excelente

[@rocketseat]

Valeeeu, Matheus! 💜 😍

[@lucasdevapredender]

Qual pacote de icones usa em seu linux?

[@mateushenrique6421]

É legal usar os themes do styled-components

[@agleyx]

qual o nome dessa extension que da zoom no code?

[@renansouza351]

Conteúdo de qualidade, quando terminar a NLW, já vou partir pra esse UI clone!

[@gfco6236]

Qual e esse sistema operacional?

[@anddersonrds]

Mano, simplesmente incrível. Pense numa correria que vai ser essa semana, job, nlw, bootcamp... Go que o foguete não tem ré

[@Pedro-no7hd]

Seria ótimo criar uma interface com alguma biblioteca para usar gráficos

[@rocketseat]

Faaaaala, Pedro! Sugestão anotada! Valeeu! 💜 😍

[@nicolascarvalho4005]

top demaisss!!! ta na playlist pra mais tarde ja 🚀

[@rocketseat]

Boooa, Nícolas!! Depois fala pra gente o que achou! 💜 😍

[@brdnsousa]

e um mais foda que o outro, são desenrolados d+

[@vagnerwentz1189]

Em, os arquivos de estilizações que foi passado na descrição tem alguns que tem ponto vírgula, e o certo é uma vírgula e isso acabou não pegando as cores. Se puderem mudar :D

[@rocketseat]

Opa! Verdade Vagner! Já ajustamos por aqui 💜

[@guilhermemarcelinodasilva5370]

como eu colocaria localstorage para o dark mode?

[@guilhermemarcelinodasilva5370]

@@rodz obg meu querido

[@guilhermemarcelinodasilva5370]

Parabéns pelo vídeo vc explica muito bem e trouxe muito conteúdo

[@guilhermemarcelinodasilva5370]

@@rodz eu fiz essa funcao ela armazena no localStorage, fica salvo quando eu atualizo a pagina porem nao muda o tema porderia me ajudar? function toggleTheme() { if (themeName === 'light') { window.localStorage.setItem('theme', 'dark'); setThemeName('dark'); } else { window.localStorage.setItem('theme', 'light'); setThemeName('light'); } } useEffect(() => { const localTheme = window.localStorage.getItem('theme'); if (localTheme) { setThemeName(themeName); } else { window.localStorage.setItem('theme', 'ligth'); } }, []);

[@andremof]

top, parabens

[@purcell9473]

Muito obrigado devs

[@vitorpinheiro2576]

Sem palavras para descrever o quanto amo os vídeos dessa série. Devoro todos!

[@wallaceviterbino992]

Mais um video show!! Parabéns Guilherme pelo conteúdo.

[@rocketseat]

Valeeeeu, Wallace! 😍 💜

[@justfelipe7542]

Faz um video personalizando o ubuntu igual o seu mano

[@justfelipe7542]

@@rodz valeu mano!

[@principe.borodin]

So um lembrete, o chromium eh open, o google chrome nao

[@rocketseat]

Faala, Igor! Valeu pelo lembrete! 💜

[@programacaocomcerveja4736]

qual esse icon themes?

[@Saria864]

Tenho quase certeza que é o Tela.

[@programacaocomcerveja4736]

@@Saria864 aonde eu baixo?

[@Saria864]

@@programacaocomcerveja4736 github.com/vinceliuice/Tela-icon-theme

[@programacaocomcerveja4736]

@@Saria864 obrigado

[@nelsonkenmochi9353]

Primeiro vídeo que eu vejo do Thiago hehe :P

[@nelsonkenmochi9353]

@@rodz Puuuts cara! Não reparei que é tu Guilherme 🤣🤣🤣 foi mal!!

[@CaioLesnock]

Que aula! Muito obrigado!

[@rocketseat]

Valeeeu, Caio!! Rodz manda bem demais, né?! 💜 😍

[@zevdvlpr]

Muito nice gui. :)

[@rocketseat]

Valeeeu! 💜

[@leemueel]

Showw

[@rocketseat]

Valeeeu, Lemuel! 💜

[@samuelcabral2192]

Fala Rocketseat, por favor, façam uma versão do vídeo consumindo a API do Github com graphQL e Material-UI ao invés de styled-components.

[@rocketseat]

Faala, Samuel! Valeeu pela sugestão! 💜💜