REFATOREI UM CÓDIGO REACT USANDO CLEAN CODE
Вставка
- Опубліковано 1 гру 2024
- ✅ Maratona Explorer: Dê seus primeiros passos na programação.
→ Cadastre-se no link gratuitamente: rseat.in/marat...
Todo ano eu seleciono devs que ainda não tiveram sua primeira oportunidade no mercado de trabalho para atuar como estagiário(a) aqui dentro da Rocketseat. É uma maneira de proporcionar uma primeira experiência profissional que, além de tudo, aplica nosso método de estudo (7-2-1) já comprovado por milhares de alunos.
Nesse vídeo vou mostrar como foi o processo de análise e refatoração do código de um desses mentorados, que desenvolveu o projeto move.it desenvolvida no #NLW4 Vem comigo que vou mostrar o passo a passo de como eu desenvolveria esse projeto usando React.js.
Acesso o repositório do move.it: github.com/roc...
💜 Acompanhe a Rocketseat nas redes sociais:
Twitter: @rocketseat
Facebook: @rocketseat
Instagram: @rocketseat_oficial
Linkedin: @rocketseat
🎧 Nos ouça também no Spotify:
Podcast Faladev
![AUTOMATIZAMOS A EDIÇÃO DO REELS DO INSTAGRAM [feat. Mayk Brito]](http://i.ytimg.com/vi/i6EcAV0yhqg/mqdefault.jpg)
Caso o cronometro necessite de precisão, usar o setTimeout para medir o tempo não é a melhor forma. O setTimeout não garante que a função seja chamada exatamente no tempo especificado. Ela pode ser chamada depois caso outra função esteja sendo executada no momento. Chamar o setTimeout dessa forma pode ir acumulando erro a cada segundo.
Uma alternativa seria guardar no state a data de início do cronometro usando um Date e a cada iteração calcular o tempo decorrido dessa data. Lembrando que o Date tem precisão de até milissegundo.
O setTimeout seria usado apenas para atualizar a interface. O cálculo do tempo decorrido poderia ser feito subtraindo a data de agora com a data de início. Dessa forma mesmo que o setTimeout tenha passado mais de um segundo o tempo decorrido vai refletir exatamente isso. Ele será o tempo exato entre as duas datas.
Inclusive com essa alternativa ficaria fácil exibir os milissegundos. Seria só chamar o setTimeout a cada 200 ms, por exemplo e adicionar os milissegundos na interface. Da forma do vídeo não daria para chamar o setTimeout a cada milissegundo pra ir decrementando.
Claro que o Diego fez assim pra simplificar, mas só deixando o comentário aqui como curiosidade.
Lembro que nessa NLW eu percebi o mesmo problema, e é pior ainda quando vc vai pra outra aba do navegador
O timeout de 1 segundo pra janela em background demorava tipo, bem mais de um segundo, lembro que comparei com o cronômetro do celular e tava perdendo de um a dois segundos a cada 20, mais ou menos
Eu fiz desse jeito que vc falou, de salvar o tempo inicial, mas isso acabou dando um outro problema (que eu acabei não conseguindo resolver sem uma gambiarra)
O que acontece é que, como o timeout de 1 segundo não executa a cada 1 segundo, tem uma diferença entre a passagem de segundos na atualização da interface e o tempo em si
Na interface acabava ficando no mesmo segundo por dois segundos e dps atualizando de uma vez (resolvi isso colocando um valor menor no timeout, tipo, 100ms, pra compensar esse erro, mas isso acaba executando muito mais coisa do que o necessário)
@@adryelbarros3250 desacoplar a parte que atualiza o valor da data para uma função que faça apenas isso, então seu timeout tocará apenas em executar a função e atualizar os valores na tela
Perfeita colocação, Vinícius!
Boooooooa, mandou muito!
Eu não sou nenhum especialista em JS, mas tinha pensado isso também.
Logo no começo do vídeo, como eu não estava com o PC, pausei para pensar como eu faria. Eu pensei algo assim;
Pegar a data atual com new Date().getTime() que retornaria o valor em ms, então somar com o valor do timer para saber quando a contagem iria terminar.
Tendo isso, a cada setTimeout, eu calcularia o estado atual da contagem subtraindo o valor do final da contagem menos o now.
Diego você é um cara excepcional, imagino a felicidade desses programadores em ter você como mentor. As vezes a forma como você fala conta muito pra quem tá começando. E o bom educador não é aquele que chega e fala "faz melhor", mas sim aquele que pega e fala "deixa eu te ensinar como ser melhor". Isso faz toda diferença e por isso te admiro tanto.
Poxa, obrigado demais pelo comentário!
É tão satisfatório quando voce vê o video e entende TUDO que está sendo feito. Sensaçao de que seu esforço está valendo a pena 😭
realmente mano 😭
Diego eu sou Dev a 10 anos e nunca vi ninguém ensinar da forma que vc ensina, sua didática é muito boa, sempre colocando a mão na massa mesmo, meu primeiro contato com vcs foi agora que o NLW Return indicação de um amigo, e estou achando demais. Parabéns pelo seu trabalho.
Diegao é uma pessoa incrivel. Ainda bem que existem pessoas assim pra nos inspirar e fazer acreditar que vale a pena estar nesse mundão
Poooow, obrigado
Eu gosto de aprender sozinho porque nao tenho paciencia em assistir video aulas, o diegão e o unico que me prende na tela e assistir seus videos. muito bom conteudo
Esse fig, que lindo cara!!
eu nem comecei a estudar react ainda e entendi esse vídeo perfeitamente. sua didática é ótima, mano. parabéns!
Primeira vez que vejo Diego digitar menos de 50 dígitos por segundo. E isso foi sensacional!
Sim mano ele já digitava rápido agora com esse macbook novo mesmo nem carro de formula um alcança. kkkkkkkk
@@fabricio6586 kkkkkk
a babação de ovo é mais rápida ainda
parabens diegon tu é o unico bixo que eu nao preciso colocar no 2.0 pra estudar, obrigado.
Ótimo conteúdo pessoal, curtindo bastante esse novo modelo 😍🚀
adorei esse formato descontraído e mesmo assim passou os conhecimentos, gostaria de mais desses conteúdos 🤝🤌
Valeu Welly!
Nossa como enrolei para assistir isso e no final era super tranquilo kkkk! Valeu pelo vídeo, eu estou nesse ponto de procurar mais sobre como melhorar códigos que já funcionam... Tanto legibilidade, quanto eficiência
Aaaaaah primeira aparição de um membro do EC no vlog! Amei 🤗🎩
QUE SAUDADE DE VOCÊ!!
@Luan Tonin Galvan 😍
Eu nunca te vi analisando um código iniciante. E agora posso dizer com certeza da humildade e maestria que você tem! Com certeza não chegou onde está agora à toa. Parabéns!
Obrigado Josué
Muito legal ter usado fail-first e/ou return-first, isso evita muita cascata de else e diminui muito a complexidade cognitiva, além de evitar a execução de código que seria inútil... Topzera!
Top!!
Amei a sua análise e estratégia!
Esse tipo de vídeo nos ajuda a rever os conceitos e reavaliar nossas estratégias!!
Parabéns!! Já Quero mais!!
Obrigado Eliane!!
Muito show Diegão, mesmo já tendo conhecimento consegui captar vários insights para aplicar no dia a dia! Valeu ótimo vídeo
Só um aditivo, 250000ms = 250s, aproximadamente 04min10s ☺️
Agora fica a dúvida... porque o cara escolheu esse valor muito aleatório?! kkkkk
@@ViniciusVille Ele deveria ao menos comentar no código ksksksksksk
Ele deve ter achado q era 25 min
ele pode ter conseiderado que 1min = 10s, (porque quase todas as unidades seguem essa padrão DECImal, e o tempo é uma exeção, ent é facil confundir)
porquê 25 minutos é um valor recomendado de produtividade da técnica Pomodoro
esse tipo de conteudo é mt massa, da ate pra tirar algumas visoes de leitura de codigo e logica que as vzs nao tive.
Quem fez a NLW04 de React/Next lembra bem dessa lógica de countdown!
Massa esses vídeos estilo vlog. Faz mais ae
E eu que nem de frontend sou, mas to aqui curtindo demais seu vídeo! hahaha fera demais
Hahahahah que massa, Rafael!
Show, Diego! Vc é demais cara :)
Obrigaaaaado
Dica boa demais de ferramentas Diegao!!!
Sou fã desse cara, projeto massa eim mano!
Alternativa para screenshot no Linux: Flame Shot
Bem parecido com esse que o Diego apresentou.
Por mais vídeos assim! Aprendi muito com essa refatoração, Diegão manda muito!
Baita approach, Diego! Top essa atitude de não criticar negativamente mas sim de forma construtiva e com consideração.
oq eh approach?
Esse state => state é importantíssimo. Para a performance e warnings no console.
Demais, quero fazer um vídeo só falando sobre closures e como isso funciona no React :)
@@dieegosf boaaa.. Voaa 🚀
Seria muito massaaa um vlog como esse realizando um projeto de debugging de um projeto. Fica a sugestão!
• Muito interessante, e massa essa refatoração 🔥
🙂🙂🙂 aprendi muita coisa neste vídeos!! parabéns
Que bom!!
Mano, que vídeo FO#!@ !!
Parabéns pela contribuição para comunidade !
Gostaria muito de ver um vídeo sobre algo correspondende às ferramentas apresentas, porém no windows.
Valeuu !
Obrigado Fernando, infelizmente uso pouquíssimo o Windows pra conseguir te indicar algo.
Diego é mestre!
Não sei se alguém citou, mas também existe o método Math.trunc(), que ignora as casas decimais e retorna apenas o número inteiro, também iria servir para o exemplo.
uma coisa que passou batido, é sempre importante "limpar" o setTimeout/setInterval que foi invocado no useEffect
supondo que o usuário saísse da página de pomodoro faltando 1 min e fosse pra de página perfil, depois de 1 min o timeout executaria o setState que possivelmente já saiu da memória e ocasionaria num erro
Esses videos estilo vlog dele é mt bom
O Diego é mt impressionante mds
Osh, obrigado
Nossa aprendi muito hoje e já parti para 70% 20% 10% criei no expo o CountDown.
Algumas vezes queria ter a mente do Diego para me ajudar em horas de sufoco...
Esses vlogs estão maneiros demais :D
Que massa! Vou colocar meu código do jogo da velha em C++ que eu fiz há 20 para refatorar kkkk
Eu adoraria que o Diego fizesse esse tipo de refatoração com meus códigos XD
Sensacional 👏🏻
Melhor formato de vídeo
Muito massa esse estilo de vídeo!
Pra adicionar sobre o software de multitool de screenshot, tem tambem o ShareX
Vídeo foi tão maneiro que quando eu comecei a ver eu tava com aquele pensamento "vou pôr na playlist assistir mais tarde" mas aí fui assistindo e assistindo e quando me dei conta, o vídeo já tinha acabado kk
Hahahahahahaha acontece, igual os vídeos da galera construindo casas no meio da floresta apenas com gravetos!
Muito bom o vídeo 👏👏👏
mt bom conteúdo e dostei demais da ideia de video tipo daily vlog
Muito boa essa aula, já mandei pro pessoal do grupo de estudos. Deve ser uma experiência incrível ter você como tutor. Esse seu projeto de ensinar alguém é algum projeto social seu, Diego?
Acho muito legal esse formato de vídeo fora de estúdio e lidando com coisas do dia a dia. Acompanho a Rocket a um tempo e vocês sempre tão buscando evoluir na proposta de vocês, parabéns.
Isso, é um projeto meu que sigo querendo executar cada vez com mais pessoas. Só não faço mais pelo tempo que preciso dedicar para essas pessoas :)
Meu sonho uma call com o Diego pra ele me guiar no que tenho que evoluir!
Faz música diegão ? Vi uma scarlett ali hein ! ótimo vídeo
Tenho alguns em java e em C, na época em que comecei a programar,. Eram bem pra iniciantes mesmo, gostaria de ver eles na live pra demonstrar como se sairiam hoje.
Esperava um video de clean code, recebi um de dicas para mac kkkkkkk.
Eu acho que pra melhorar mais ainda vc teria que ter criado uma variável pra armazenar timeout e qdo o valor chegar a zero vc chamaria clearTimeout com o timeout e tbm no useEffect como clear function (a função q vc retorna no effect). Isso pra garantir q caso o componente seja "desmontado" o timeout tb seja cancelado
Boa, dá pra melhorar muito sim!
testa o lightshot... tem para windows e mac... muito bom.. e acho mais pratico que o cleanshot
o problema de usar o setTimeout é que a próxima interacao vai comecar depois que a primeira acaba. entao se o codigo pra reduzir o amount demorar 0.001 segundo, a interacao toda vai ter 1.001 segundo, e nao 1 segundo exato. sei q a diferenca é minima mas como queremos fazer um countdown, o certo sao os 25 segundos serem exatos.
o setInterval vai comecar cada interacao exatamente a cada 1 segundo. assim no final dele terao passados exatamente 25 segundos, e nao 25.0025
Aquela tosse pós Covid uahsuahsuhas. Ótimo conteúdo.
Diego me leva e me ensina railroad error handling por favor😩😩😩
Brincadeiras a parte, vídeo muito bom
Velhos, já sou dev a algum tempo e sempre que preciso de lógicas com timer ou tempo é sempre um quebra cabeça, mas tive uma experiência com timer que precisava de restart do cronometro quando dava refresh da tela ou reiniciava o sistema ou simplesmente minimizava o navegador usando um técnica chamada worker nativa do javascript.
Cara, com que você descobre esses apps?
Normalmente a única coisa que é válida no cleancode é quando você tem um projeto e as entidades tem nomes específicos. ex: "Person" para "Pessoa". Uma pessoa terá um "CPF" ou "CNPJ" e não há uma tradução global única para esse tipo de sigla ou referência.
Me chama pra ensinar sobre smart contracts 😊
Poderia compartilhar onde você geralmente descobre essas ferramentas para macOS?
Isso é no dia a dia. Muito das coisas que ele usa ele da uma star no GitHub. So seguir ele la
muito bom!!
Mas vem cá Diego, esse setTimeout não vai acumular a cada update não???
Quando vai volta os cursos de programação?
Você diz os NLW, em breve volta aqui :)
No cron já tinha um spoiler do reality hasuhasuhs
Faz um hook de event listener com typescript!
Gostaria de saber se vocês pegam pessoas acima dos 50 anos que nunca programou... Ando muito de aplicativo 99 e Uber e todos me perguntam porque não tem pessoas que podem ensinar a programar.
Se vocês tem projetos react native (versões abaixo de 0.60.x) ou flutter em seus macs não instalem o Fig. A principio pareceu lindo e mágico mas com o 2 dias de uso meus projetos começaram a dar problemas na hora que tentava dar build ou start para instanciar no simulador.
Gostei das dicas dos outros apps mas esse FIG só me deu dor de cabeça =T
Qual seria a melhor abordagem caso eu tivesse botões: Start, Stop e Reset?
Manter um estado chamado isActive e dentro do useEffect verificar se esse estado está como true, dai manter rodando, se não, simplesmente ignorar. No caso do reset precisamos apenas voltar os segundos para o valor inicial ali no estado.
Qual tema o diego está usando no vs code?
Omni
@@dieegosf Ty
Muito bom
Na parte do % e padEnd não sabia que existia, seria legal um vídeo falando sobre o % não entendi muito bem o que ele fez.
o operador de % (remainder operator) é usado para retornar o resto de uma divisão, então por exemplo 10 % 3 retornaria 1
Utilidade publica, somente começa a refatorar msm no 16:30
Falaa Diego! Qual é a versão e o ano do seu MAC?
Mac M1 Max 2021.
Ideia de refatoração do video, retirar essa parte de curiosidades do mac e ir direto pro clean code
Muito bom, duvido refatorar um código meu kkkkkkk
Se topar refatorar tenho um jogo feito em javascript e a lib Phaser.
Daria para usar o RETURN do useEffect para verificar se o valor do secondsAmount é igual a 0.
ou não?
tu pode usar uma expressão, secondsAmount == 0 && return...
Pq quando o Diego clara a const "countdown initial time in seconds" ele declara tudo em maiúscula e usando sneaker_case convention?
Porque essa é uma convenção pra declarar constantes globais e imutáveis (algo que sempre terá aquele valor em todas as fases da aplicação)
Gatinho 🐱
Fala galera, muito bom o vídeo, fiquei só com uma dúvida, no uso do uppercase para declarar a const dos segundos iniciais, é alguma convenção/regra?
Sim. É uma convenção bem comum. Se tratando de constantes com valores explícitos e imutáveis como no caso do exemplo. Algo q sempre vai ter aquele valor durante todo ciclo da aplicação.
@@decovitorio perfeito sua explicação, muito obrigado 👊🏻
Qual fonte ele usa?
Jetbrains Mono
@@dieegosf obrigado! Acho meio estranho que no VS Code a fonte fica muito boa, mas nas IDEs da IntelliJ (PHPStorm), parece que não fica boa.
Quero aprender a programar
Entra no Discover rocketseat.com.br/discover
Achei que tava jogando watch dogs 14:40
ixi, essas mesas não estão no padrão da NR17.
Então, quanto aos apps de calendário e reuniões n sei. mas no Linux o zsh+zinit faz isso com muita facilidade!
(Fiquem longe do ohmyzsh)
Por que ficar longe do ohmyzsh?
Qual seria essa fonte do VSCODE, achei ela massa demais
Parece Jetbrains Mono
Onmi Theme
@@LeonardoOliveira-wd8gy Valeu
tu é mt bom kkkkkkk
Como funciona pra conseguir trabalhar na sede do Google como o Diego sempre curte fazer? 😄 Não é qualquer dev que consegue, é?
ele não esta no google, esta no cubo Itaú, é um local para aceleração de startups e network, semelhante ao Google for startups, não sei como funciona no cubo, mas no google pode ir qualquer um, basta preencher um formulario no site do google for startups
@@FelipeRibeiroguitar muito obrigado!
@@FelipeRibeiroguitar O Cubo é um coworking, a empresa precisa passar uma entrevista e depois pagar mensalmente o número de cadeiras
Diego... paga para mim $$$$
HAHAHA
Essa ferramenta de captura me lembra do FlameShot, quando eu estava usando linux, para linux ainda não achei um melhor. xD
diego, e você?
quando tu vais ter mentoria pra aprender a ser estiloso ?
vai lá na zara rapá kkk brinks ta amigo
1 setInterval vs. 1500 setTimeout...
Você poderia só ter usado o setInterval...
Se alguém puder responder, pq o curso de NodeJS no Ignite é todo feito com classes e não usando paradigma funcional ? To meio que quebrando a cabeça pq fiz vários cursos de NodeJS e todos fizeram API de forma totalmente diferente da feita no Ignite, isso está me deixando confuso.
Porque o IGNITE nao está te passando apenas conhecimento de NodeJs. No IGNITE você tem um curso de programação Orientada objetos, com Solid, TDD entre outros, é completo amigo.
Se fosse só para executar métodos com funções não atenderiam para os conceitos acima passados. Na minha opinião é isso e acho fantástico. Aprendi mais do que na minha graduação logo se acostuma!
@@franciscomenezes6970 Sinto muito que sua graduação foi superada por um curso de 36 horas :(, mas se o curso ajudou então tudo bem.
@@franciscomenezes6970 excelente colocação. No ignite você aprende arquitetura, padrões de projeto, solid, etc. De uma forma que é aplicável no mercado visando maior escalabilidade. Eu sinceramente acho que ele é um ótimo curso.
@@andreaugusto3851 nao quis dizer que é melhor do que uma graduaçao longe disso so quis dar um exemplo para tentar ajudar na sua pergunta, desculpe se não era o que gostaria de ouvir!
@@andreaugusto3851 huaehuehuahuehue sim, com certeza. Poem o curso de 36hrs no github e portifolio e espera sentadinho :)
video ta muuuito bom. Só faltou vc beber uma aguinha pra n ficar esse barulho de boca colando que acaba dando uma agoniadinha
oxi... pra que dar o nome da constante e depois o comentário? Era só dar o nome de COUNT_DOWN_TWENTY_FIVE_MINUTES.