RESOLVENDO DESAFIO de entrevista REACT.JS #1 - Você consegue?

Neste vídeo resolvi um desafio muito encontrado em processos seletivos para vagas de programadores React.js por aí.
Você consegue achar uma solução melhor? Deixa nos comentários e vamos nos ajudar! :)
Descritivo do desafio para tentar resolver em casa:
liberating-key...
Link do reposítório para estudos:
github.com/nan...
ATENÇÃO, quer receber uma oferta exclusiva de 50% de desconto quando eu lançar meu curso de React?
Preencha o formulário abaixo, para entrar na minha lista de early adopters:
bit.ly/fernand...
ig: @fernandev1
#reactjs #interview-challenge #frontend

[@Oaluiser]

Baita vídeo! Minha dúvida é em relação a manipulação das arrays, não seria mais interessante, por exemplo, usar push() pra inserir o objetos e também os outros métodos de manipulação, ao invés de criar uma função que faz exatamente isso?

[@fernandev1]

fala Oaluiser, tudo bem? então cara, no react para se atualizar a state devemos usar a função de setState que criamos, no caso desse vídeo a 'setList()', portanto você não pode simplesmente usar um push no array 'list'. dentro de setList nos criamos uma cópia da state original com spread operator e aí incluímos então o novo dado. você poderia fazer algo do tipo também: setList((prev) => { const newArray = [...prev]; newArray.push(newDot); return newArray; }) espero que tenha ficado claro 🥳 qualquer coisa chama aí!

[@raphaeldasilva9548]

@@fernandev1 Para complementar, no react se usa a ideia de estados imutáveis, ou seja, não alteramos o valor do estado, criamos um novo valor, por isso pegamos o prev, que é o valor anterior e então colocamos o valor a mais que queremos. Isso por que é mais fácil deletar um valor e criar um novo do que alterar o valor e ter que realocar na memória. Essa ideia de imutabilidade deixa a performace da aplicação melhor. Por isso usamos a função para "alterar" o valor do estado e não usamos o push direto no estado por exemplo!

[@fernandev1]

@@raphaeldasilva9548 muito bem observado Rahpa, coberto de razão!

[@adrielschmitz]

Desafio legal. E pra quem está começando, repare como o Fernando vai quebrando o problema maior em problemas menores e vai resolvendo esses problemas menores um por vez, "passinhos de bebes". Como dito no vídeo, no futuro tu vai conseguir simular o comportamento do seu código na sua cabeça e não vai precisar printar tudo, mas no início, para ter uma visão geral, ajuda muito!

[@szlima]

Muito obrigada pelo vídeo! 😊 Uma outra forma seria ter um vetor 'histórico' para armazenar cada versão de 'list', assim os círculos exibidos correspondem ao vetor que está na última posição do histórico. Seria um vetor de vetores.

[@daniloctg2007]

Excelente conteúdo, muito bom para se preparar para as entrevistas. Tem pontos ali no vídeo que eu tinha dúvidas, e agora ficou mais claro

[@fernandev1]

Show Danilo! Fico feliz que tenha te ajudado!

[@renanlimaxs]

Top! Me incentivou bastante em continuar os estudos. Sucesso ao canal.

[@fernandev1]

vamoooo Kestrel! o segredo é nunca desistir! eu não vou descansar até você aprender a programar! 😎

[@samwuelgd]

Cara vc é fera nesse negócio, até me deu vontade de voltar a estudar programação

[@fernandev1]

fala Samuel! que alegria ler seu comentário, garanto que você não vai se arrepender de voltar! 🥳

[@gevolgdev]

Cara, primeira vez que eu assisto um video de react com mais de 30min sem pausa. E passou rápido ainda, bom que tem mais videos no canal kkkkk ja vou pro proximo

[@fernandev1]

hahahah que legal saber disso Impactus! 🤓

[@Gabriel-hk9jv]

Tive a mesma sensação cara, o @fernandev1 explica de uma forma tão didática que fica super leve pra assistir por 40 min

[@edivan7552]

Legal de mais, vou começar a aplicar meu currículo para vagas com tecnologia que eu já tenho um minímo de conhecimento, só pelos desafios.

[@diogodias_]

Acabei de descobrir esse canal por conta da recomendação do youtube. Não estudo programação web e sim Data Science, mas, assisti o vídeo e vou assistir outros também, é legal ver você quebrando os problemas e solucionando, acompanhar seu pensamento e aprender coisas novas. Não pare de trazer conteúdos!

[@fernandev1]

fala Diogo! cara, obrigado pelo comentário, isso me dá forças para continuar! 🥳

[@carloseduardonogueira4937]

Não desista dos vídeos!! Você ainda vai muito longe!! Sua didática é incrível!! Parabéns.

[@fernandev1]

fico feliz que esteja gostando Carlos! obrigado!

[@andersoncarvalho8551]

Esses vídeos de resolução de problemas é muito top, eu acredito que vai ajudar muita gente. Parabéns!

[@joemersonpires1615]

Fala Fernandev muito obrigado pelo conteúdo ficou bem completo parabéns. Ainda não estou estudando React.js mas esse vídeo me passou muito conhecimento, valeu

[@fernandev1]

que massa Joemerson, bons estudos!

[@felipeamorim1196]

Vídeo incrivel cara! Bem didático. Única coisa que mudaria seria o redo. No lugar de um novo state usaria um useRef inserindo uma estrutura de dados stack dentro, dessa forma poderia evitar renderizações desnecessárias no component.

[@JonathanDjavan]

Massa, deu pra entender mesmo eu que ainda n manjo nada de React haha a lógica por trás. Massa.

[@fernandev1]

que massa Jonathan, fico feliz que conseguiu compreender. bora aprender juntos! 👊🏼

[@JonathanDjavan]

@@fernandev1 Vamos sim, estou me atualizando. Já faço Front alguns anos, mas sempre pulei alguns estudos. Sou formado em Design tbm, faço de forma entusiasta UX também. Então, vamos indo pra evoluir.

[@caetxnso]

muito massa o vídeo! acabei de entrar no segundo ano do ensino médio e vou começar a fazer um curso profissionalizante de C# que inclui também html, css, angular, react... Por enquanto sei o básico do básico de python, mas mesmo não entendo quase nada achei o vídeo muito intuitivo e interessante, parabéns pelo conteúdo! edit: terminei de assistir o vídeo agora, deu pra entender algumas coisas pela lógica e o jeito que você explica ajuda demais!

[@fernandev1]

aaah fico feliz demais meu amigo! obrigado pelo comentário e seja bem-vindo ao canal! 🥳

[@vini_palma]

na função jandçeUndo, eu poderia ter feito um setList contendo ...prev.pop() ?

[@fernandev1]

fala vini tudo bem? de certo modo consegue sim, mas fique atento, pois o método .pop() altera o prório array que você está chamando, removendo o último item deste array; porém o retorno desse método é o próprio item removido, portanto cuidado para não bagunçar a sua state. possivelmente você pode fazer algo assim: setList((prev) => { prev.pop(); return prev; })

[@ricardosea1]

muito legal teu estilo, pra quem esta começando é um conteúdo MUITO interessante! Tuas explicações bem fáceis de entender tambem, parabens pelo conteudo!!

[@fernandev1]

fala Ricardo! que alegria ler o seu comentário cara! seguiremos em frente com esse tipo de conteúdo 🤓

[@v2power921]

Caraca... que didática sensacional! Obrigado pela aula!

[@fernandev1]

obrigado pelo carinho V2power 👊🏼 tamo junto!

[@TheVt99]

estou estudando há um ano, consegui fazer o desafio e consegui também armazenar no localStorage

[@alefflow850]

vídeo maravilhoso. comecei a gostar de programar, antes n conseguia nem abrir o vscode.muito obrigado!

[@fernandev1]

uhuuuul 🥳, quem não pegou nojo do vscode alguma vez na vida que atire a primeira pedra Alef! hahaha continua acompanhando que eu tenho certeza que vamos crescer juntos! 🤓

[@ninaaraldi]

mto bom! 👏🏼👏🏼👏🏼

[@fernandev1]

que bom que gostou marina!

[@ezequiel5150]

Conteúdo muito bom!!!

[@fernandev1]

opa, obrigado Ezequiel! pretendo trazer mais conteúdos do campo de batalha pra comunidade! :)

[@heitormbonfim]

Cara, continua fazendo esses videos com diversos desafios. Muito show!!! Os outros canais de programação tão ficando entediantes. Acho que esse quadro não ficaria.

[@fernandev1]

fala Heitor, que legal saber sua opinião cara. eu ainda quero deixar os vídeos com temáticas mais dinâmicas, estou bolando novidades por aqui 🤓 obrigado pelo apoio!

[@alexandreinacio9625]

Excelente conteúdo parabéns e gratidão

[@fernandev1]

valeu pelo apoio alexandre! fico feliz que pude ajudar.

[@tiagofuhrmann]

Sensacional o vídeo! Alguns incrementos que eu faria na entrevista, bem na linha que você disse de incrementar pra mostrar que domina mais o React: 1- O botão Desfazer ficaria "disabled" caso o array "list" tivesse length 0. 2- O botão Refazer ficaria "disabled" caso o array "undid" tivesse length 0.

[@fernandev1]

Tiago, perfeito cara! muito bem observado 🤓

[@jmaurojr]

Estou iniciando o estudo em programação, gostei muito do vídeo e me ensinou muito mais do que apenas código. A forma de fazer é essencial. Obrigado!

[@fernandev1]

isso aí José, meu objetivo é fazer vocês pensarem e não somente dar a resposta pronta. acredito que assim o desenvolvimento acontece real!

[@victorBrapp]

eu sei muitas maneiras de fazer isso, mas o jeito que vc fez e explicou me ajudou a enxergar novos horizontes e achei bem interessante sua didática.

[@fernandev1]

e isso é a maravilha da programação. diversas maneiras diferentes de resolver um mesmo problema! que massa que você curtiu Victor, valeu! 🥳

[@mateussoares7599]

conteúdo foda mano, tu explica muito bem

[@fernandev1]

que massa Mateus, obrigado demais pelo apoio cara! 🥳

[@ivanrabelo1558]

Muito bom mano. Show demaisssssssssssss!!!

[@fernandev1]

valeu Ivan! obrigado pelo apoio.

[@vesipode]

Eu gostei muito do jeito que você faz os desafios, faz desafios usando JS em si, bom conteúdo e boa lógica, parabéns

[@fernandev1]

fala Natael, obrigado pelo apoio cara! farei alguma coisa sim, tenho focado no react agora por conta que é o que as empresas pedem e esperam dos candidatos, sabe? 😊

[@lucasfelix2235]

Vídeo super legal e didático! Seria legal trazer desafios para nível pleno.

[@futuroDevJohn]

Fernandev, sinto muito mais você foi reprovado. Pedimos circulos, e vc fez com quadrardos kkkk Eu ainda não estudei REACT, mas entendi bastante coisa da lógica, só comecei a me perder um pouco no Redo. Mas quando eu entrar em react venho aqui denovo pra fazer esses testes.

[@fernandev1]

hahahha verdade, fui reprovado 😢 você é mais que bem-vindo John!

[@LuanHenrique-pc3nn]

Mano, que didática excelente q tu tem, parabéns pela aula

[@fernandev1]

valeu Luan! obrigado pelo apoio 🥳

[@manoellopes]

Muito bacana o vídeo, poderia trazer mais desafios. É uma forma bacana de ver a solução de um problema usando lógicas diferentes.

[@fernandev1]

isso mesmo que eu penso Manoel! fico feliz que esteja gostando.

[@astropetslove6137]

Faltou só o "border-radius: 50%", para ficar redondinho kkk, mas vlw pelo vídeo, conteúdo muito top e bem explicado, estou estudando e buscando uma oportunidade no mercado e esse vídeo me esclareceu muitas coisas, continue c o bom trabalho mano!

[@fernandev1]

fico feliz demais em ajudar Astro! que maravilha! obrigado pelo apoio.

[@sinvalfelisberto]

Que legal, cara! Muito sucesso pra vc!

[@wolfgang843]

Muito maneiro seu vídeo, cai aqui de paraquedas, nem sou ainda dev e comecei um curso gratuito que achei na internet, é o curso em vídeo do Professor Gustavo Guanabara, comecei tem uns dias mas to devorando todo tipo de conteúdo sobre html5 e css3 já tenho feito algumas coisas em html5 sempre tenho ideias de coisas pra fazer. Eu sempre achei muito interessante essa área de programação e desenvolvimento, mas sempre tive medo de cursos de internet e tal, tenho em mente de fazer o curso da alura, mas por enquanto vou fazer esse grátis pra pegar o jeito das coisas. Comecei meio que por conta própria e nunca consegui uma visão de alguém que já trabalha, já até tentei perguntar pra pessoas no insta seguindo perfis de devs. Enfim, parabéns pelo vídeo espero conseguir chegar nesse nível um dia e fazer coisas legais igual a essa :)

[@fernandev1]

opa, seja bem-vindo então Wolfgang. espero que você curta cada vez mais o conteúdo! 🤓

[@bellrodrigues8250]

Não assisti ao video completo oara não saber a solução, mas vou tentar fazer o desafio. Volto quando terminar.

[@fernandev1]

show de bola Bell! mas não deixa de fazer! depois volta aqui me contar nesse comentário :)

[@flavioedu-dev]

Aula sensacional!

[@fernandev1]

valeu Flááávio! 🤓

[@JosePedroSm]

caraca que video legal, parabéns! voto para mais videos assim 👍🏻

[@fernandev1]

valeeeeu José! continuarei trazendo mais por aqui.

[@biigattu]

Parabéns cara! Muito boa sua didática, muito obrigado por isso!

[@fernandev1]

valeu pelo apoio Roberto! 🥳 tamo juntoooo!

[@julio6377]

UNDID foi foda kkkkkkkkkkkkkkkkkkkkkkk bom video

[@fernandev1]

😢

[@tiagomarmitt928]

Bem legal a ideia de resolver desafios, vi almoçando, o interessante foi que toda a lógica que pensei para resolução do problema antes mesmo de você começar a desenvolver foi exatamente ao que se tornou a aplicação no final do vídeo, até mesmo nome de elementos e funções kkkkk. +1 inscrito

[@fernandev1]

opaaa, que massa Tiago; chegamos na mesma linha de raciocínio então! 🥳

[@paulofroes4607]

Reprovado: Motivo? São círculos, não quadrados! KKKKKKKKK' Eu mataria esse recrutador.

[@fernandev1]

bem observado Paulo! 🤣

[@leofrancow]

Só reparei isso, esperei ele transformar os quadrados em círculos

[@AlexSoaresGtr]

Cara, que didática velho!! Eu ainda não estudei React pq ainda estou em Html Css e js, mas de alguma forma consegui entender um pouco da lógica. Vc tem algum curso? Se tiver já passa aí pow. Segurança absurda nas explicações.

[@fernandev1]

fala Alex, tudo bem? cara, muito obrigado pelo apoio! por enquanto não tenho curso, mas é tanta gente pedindo que vou arranjar um tempo mês que vem pra produzir algo bacana! 😎

[@viny4815]

Perfeito, só faltou mesmo ser círculos ao invés de píxels, pea seguir a risca os requisitos. Parabéns.

[@fernandev1]

🤣 verdade né, mas é tanta coisa pra lembrar na hora de gravar o vídeo, que algumas coisas passam batido infezlimente.

[@DenisioRodrigues]

Muito bom esse tipo de conteúdo! Obrigado!

[@fernandev1]

fico feliz que tenha gostado Denisio 🥳

[@jccintr]

Muito bom. Parabéns pelo vídeo.

[@Gabriel-hk9jv]

Cara, sensacional esse vídeo!!!! Muito obrigado.E eu sei que pode ficar cansativo, mas por mim você pode entrar nos pormenores e demorar o quanto for necessário kkkkkkkkkkk

[@fernandev1]

valeu pelo apoio Gabriel, fico contente que meu conteúdo esteja sendo útil 😄

[@canerityalv5214]

genial, que video bom

[@lucasfonseca4329]

Muito bom Fernando! parabéns

[@fernandev1]

valeu o apoio Lucas 🥳

[@pedrobonifacio538]

Se redimensionar a tela os pontos ficaram fora da posição relativa, sugiro adicionar um reposicionamento quando a tela mudar de tamanho ou limitar à area de clique

[@fernandev1]

interessante Pedro, muito bem analisado, poderíamos calcular e colocar a posição relativa dos pontos, seria uma abordagem diferente porém bem legal!

[@rubenfontes7085]

Você ensina bem dms!

[@fernandev1]

que massa saber disso Ruben, obrigado pelo apoio!

[@GregoryGustavo]

Muito bom. Só faltou o border radius 50% pro elemento de fato ser círculos como no desafio proposto.

[@fernandev1]

exatamente Gregory 🥳

[@rodrigosalinet]

Show de bola

[@s1mpleeXL]

fera demais !!!

[@fernandev1]

valeu Lucas!

[@guilhermecheng]

Bem legal esse desafio em! Peguei para fazer antes de ver a resolução, e me senti bem mais confiante depois de ter feito. E bem daora ver a resolução depois, bater com como eu fiz. Conteúdo top cara, parabéns!

[@fernandev1]

uhuuuul 🥳, que massa Gui! parabéns!

[@AlexandreSilvaGoogle]

Parabéns, excelente conteúdo!

[@fernandev1]

fala Alexandre, obrigado pelo apoio! 🥳

[@michaelgomes4185]

Top esse vídeo. Ainda não sei programar, mas estou iniciando nesse mundo da programação que acho simplesmente magnífico e pretendo futuramente trabalhar com programação, claro não entendi quase nada do que foi falado kkkkk mas algumas coisinhas conseguir pegar. creio que meu maior problema está sendo usar a lógica mas espero com o tempo não ter tanta dificuldade assim. Mas parabéns pelo vídeo.

[@fernandev1]

a prática sempre leva a perfeição Michael! continue tentando que tudo fica mais fácil com o tempo. agradeço demais o apoio, e se você tiver sugestões de vídeos que possam te ajudar nessa jornada, compartilha comigo! quem sabe eu não possa te ajudar? 🥳

[@danilopalmeira]

Show, parabéns

[@fernandev1]

valeu Danilo!!!

[@ricardoluisconte976]

Video massa demais, mano! 👏

[@fernandev1]

aaaah obrigado demais Ricardo!

[@lucasduarte1603]

Desafio bacana, já fiz algo parecido na facul com python. Só q os círculos deviam crescer e encolher qdo colidir com outro círculo.

[@fernandev1]

poxa que legal Lucas! pra trabalhar com python tem que ser ninja. 🥷🏻 dessas artes eu não manjo haha

[@nandoztx_rq]

Gosto de videos assim, bem didatico, soube se expressar bem, parabens cara ! mais um inscrito; Eu soh separaria fisicamente a div dos btns da div dos eventos, pois resolveria via estrutura o problema do propagarion; ou ainda, pegaria eventos do teclado do tipo "ctrl+z" mas dai seria bonus rsrs

[@fernandev1]

poxaaa, o ctrl+z ficaria show hein! tem hooks prontos já que tratam isso pra gente. ótima ideia Fernando!

[@AurelioCastrolk]

Top Video !!!

[@fernandev1]

🤙 valeu Aurelio!!!

[@volneyrodriguessilva]

Vídeo muito bom

[@brunolandim]

Excelente, so faltou ser um circulo 😂. Didática muito boa!

[@fernandev1]

pois é 😔 acho que reprovei. hahahha valeu Bruno!

[@manoelfarias9386]

cara ... que video bom ! Parabens ... :D

[@fernandev1]

valeu Manoel! obrigado pelo apoio 🥳

[@jorgeferrari1151]

Outra forma de resolver seria marcar os itens em uma lista só como desfeitos ou não. Daria um pouco mais de trabalho só para mapear.

[@fernandev1]

boa Jorge! realmente, sua solução também funciona, assim a gente manteria tudo em uma state só!

[@wesleyoliveira1233]

MT bom o vídeo! Perdeu um pontinho por falta do border-radius:50% RS. Pediram um círculo, não um quadrado. Hahah

[@fernandev1]

😢 hahahah valeu Wesley!

[@lucasdamasceno7068]

Videozao top dms lol ainda tô longe de um nível JR viu 🤣🤣✌️

[@fernandev1]

valeu Lucas! é só persistir que cada vez fica mais fácil 🥳

[@samukarbrj]

cara que legal a abordagem mostrada, eu não pensei na mesma forma de realizar a tarefa.

[@fernandev1]

e aí Samuka! e essa é a melhor parte da programação, podemos achar várias soluções diferentes para um mesmo problema! 🤓

[@samukarbrj]

@@fernandev1 acho que até me expressei mal. algumas partes da tarefas eu não pensaria igual vc, no passo a passo. em outras partes eu vi que em python seria mais fácil com o .append, eu acho kkk

[@jonasgoes3846]

Não manjo de js, mas assisti o vídeo todo n sei porquê tô aqui nem pq me recomendaram mas mt bom o vídeo

[@fernandev1]

hahaha show Jonas, fico feliz que gostou e seja bem-vindo ao canal!

[@AndreLuiz-cd8ml]

Muito bom o vídeo, por incrível que pareça a única coisa que ficou faltando foram realmente os círculos (ficaram quadrados kkkkkk). Valeu pelo conteúdo mano.

[@fernandev1]

hahahahah boa André. acho que eu teria falhado 😅 obrigado pelo apoio!

[@henrique_https]

Achei seu canal incrível! Muito foda!! Deixa seu IG como link no perfil do canal

[@fernandev1]

fala Henrique, acho que vou seguir sua dica, vou colocar nos próximos! @fernandof.dev

[@micaelph_]

Uma coisa a mais para incrementar é não deixar clicar no botão quando tiver === 0

[@fernandev1]

boa dica Micael, com certeza faz sentido!

[@ianfranca8974]

Faala, Fernandev. Mais um conteúdo top no seu canal. Como eu já disse, didática monstruosa! kkk Quase terminei o desafio, porem esta ocorrendo um erro ao apertar o botão de redo. O meu codigo tirando os nomes das variáveis, esta exatamente igual ao seu, porem da esse erro: Uncaught TypeError: Cannot read properties of undefined (reading 'clientY'). Como eu disse somente ocorre quando aperto o botão de redo. Que esta nessa parte do codigo: {cordenadas.map((item, indice) => ( ))} seria de grande aprendizado se conseguisse me ajudar, talvez seja até pra outra pessoa. Abraço!

[@fernandev1]

fala Ian, desculpe a demora na resposta, ainda estou de férias. cara, posta seu código no codesandbox.io que eu dou uma olhada para você! 😎 me manda aqui...

[@ianfranca8974]

Consegui resolver. Como eu tinha dito aí em cima, eu esqueci de utilizar o método length no array listUndo. Kkk 😁✌️

[@Lucas_1919]

Que aula, muito obrigado

[@fernandev1]

valeu Lucas, tamo junto!

[@MegaXDBrasil]

Eu nem curto React, estou vendo video por ver, eu prefiro Java Script, html e css

[@fernandev1]

uhul, agradeço mais ainda a audiência então MegaXD 👊🏼

[@cotonn]

no #page eu coloquei width e height 100vw e vh e cobriu a tela inteira

[@Jack-ss4re]

18:38 mano existe alguma forma de fazer isso sem usar a prop style?

[@fernandev1]

fala jack, tudo bem? cara, a prop style é a mais simples e direta de se fazer; mas também funcionaria com qualquer outra maneira que você consiga manipular propriedades css dinamicamente, como por exemplo styled-components. só que nesse caso, seria como matar uma formiga com uma bazuca, meio desnecessário sabe? rsrsrs

[@Jack-ss4re]

@@fernandev1 sim, entendi, gostei da ideia do styled-components, eu uso Tailwind CSS então provávelmente seria essa minha alternativa hahaha ótimo vídeo, amigo :)

[@kaiorodrigo4231]

O cara é bonito, rico e inteligente. Porque eu não nasci assim meu Deus? 😢

[@fernandev1]

que isso Kaio, são seu olhos 😍🤣

[@futuroDevJohn]

Eu não sabendo nada de REACT ainda, vendo 40 min de video sobre react

[@fernandev1]

hahahah feliz demais que você curtiu John!

[@Brkzgamer]

👏👏👏

[@Buskopan]

Ao invés de usar slice() não poderíamos usar pop()?

[@feliperibon8127]

esse inspecionar do react eu consegui apertando aqui, mas nao sei oq eu fiz

[@ericalmeida2979]

nice video

[@mvmes23]

so ficou faltando transformar em circulo que é o que o teste pede, só isso ja comeria uma boa parte da nota, apesar de as funcionalidades estarem ok, nao atingiu o cerne do problema. acredito que no proprio css usando um borderRadius da pra brincar em tentar construir um circulo, porém o circulo não se formaria exatamente no meio do click, mas daria pra contornar isso tirando a metade do tamanho do heigh e widht na hora de fazer o style dinamico, no mais, excelente vídeo, ja uso react a um tempo pro frontEnd, e vi uns métodos ali que eu não conhecia como o stopPropagation, só isso ja vale a inscrição, mas senti falta de uma explicação de cada coisa que você usou ali, , tendo em vista que vc está fazendo este vídeo para iniciantes ajudaria demais, poderia resumir como funciona esse stopPropagation? agora uma dúvida invéz do slice seria válido usar o pop? ou na sua opnião daria mais trabalho fazer com o pop?

[@fernandev1]

fala Marcos, a stopPropagation() tem um comportamento parecido com a preventDefault(). mas nesse caso, ela impede que o evento gerado no elemento filho 'se propague' para o elemento pai, evitando então um duplo evento de onClick. faz sentido? o .pop() também pode ser usado, mas ele tem comportamento diferente, ao chamar ele, o array onde você disparou é alterado no momento; então cuida com esse comportamento e manda bala. 🥳

[@newgate5193]

Cara, juro que eu reprovaria nesse teste apenas por 1 DETALHE , juro que minha cabeça foi a zero quando li o botão REFAZER.. (Pra mim seria um reset) por conta disso iria dar ruim pra mim kk' Mas bem simples! tem mil formas de fazer essa tarefa e ficou muito legal! parabéns

[@fernandev1]

e aí NewGate! realmente os testes as vezes bugam nossa cabeça. alguns casos você pode saber criar a solução, mas da maneira que o problema lhe foi apresentado, as vezes você pode não fazer a conexão na sua cabeça entre os dois. dica: caso você não entenda um teste em algum processo desses, seja franco com o recrutador e peça para ele te explicar usando outras palavras. as vezes uma simples palavra, pode fazer a diferença nesses casos! 🥳

[@ImpurosSerie-hz7bm]

Dificil pra caralho!!1 🤣🤣

[@williamfernando3579]

👌

[@leoaguiar7127]

conteudo muito bom, é recomendável usar typescript no react? ou tanto faz

[@fernandev1]

e aí Leo, tudo bem? cara, se você já se sentir seguro no react, eu super recomendo avançar para o typescript. no começo ele dá vontade de chorar, mas depois você não vive sem ele 🤣

[@pedrol6193]

Qual a extensão q mostra os erros de código na tela do IDE?

[@fernandev1]

fala Pedro, Error Lens no vs code. ela é maravilhosa! 🥳

[@lucasbarros4923]

Fui me candidatar pra uma vaga de estágio em uma empresa e eles me deram esse teste técnico KKKKK, depois fui ver a ver no linkedin se tratava de fullstack e não estágio KKKKKKK. Todos os cadastro devem conter as operações básicas. -Inserir; Editar; Visualizar; Deletar. LINGUAGENS Front End Utilizar as linguagens: 'Javascript ou frameworks, ex.Jquery; -CSS; -HTML; BACK END -preferencialmente utilizar o C#; -Mas pode utilizar outras; BANCO DE DADOS -preferencialmente utilizar o SQL server; -Mas pode utilizar outras como MYSQL,mariaDB etc... Aplicação deverá ter 5 paáginas no mínimo que são -Login -Lista de Produtos -Cadastro de Produtos -Lista de Cliente -Cadastro de Cliente LOGIN Na tela de login deverá ter os campos de usuário, senha e o confirmar; Fazer as validaçoes básicas para logar; Ao efeturar o login redirecionar para a tela que deve conter a opção de ir para a tela de produto e de cliente LISTA DE PRODUTOS Ao direcionar para a tela de lista produto. -Mostar a lista com os produtos adicionados; -Ter a opção para adicionar um novo produto; -Ter a opção de editar; -Ter a opção de deletar; -Ter a opção de Visualizar; CADASTRO DE PRODUTO Ao abrir a tela de cadastro de produto deverá ter os seguintes campos -Codigo -Inteiro -Descrição - TExto -Codigo de barras - texto -Valor da venda - Númerico com casas decimais -Peso Bruto - Númerico com casas decimais -Peso líquido -Númerico com casas decimais Oque tu acha ? difícil ? amigo meu que trampa como back end do mercado livre acha que é nível Pleno esse teste.

[@fernandev1]

fala Lucas, tudo bem? cara, para estágio eu achei pesado. para um júnior acredito que estaria mais aceitável. mas é um desafio bem interessante pra quem está começando! meu conselho pra você é, tenta fazer cara, independente do tempo que você levar. ao terminar esse desafio, você vai estar melhor do que quando o começou! :) apesar de trazer conhecimentos de back também, acredito que eu possa resolver ele aqui no canal uma hora dessas, o que você acha?

[@lucasbarros4923]

@@fernandev1 Seria legal se você mostrar pro pessoal de como resolver essa tarefa ai. Meu conhecimento é bem limitado por enquanto so Front end ;/. Mas agradeci a empresa por pelo menos me responder e ter dado o tempo deles de mandar esse desafio ao contrário das outras que sequer me responde kkkkkkk

[@motinha6185]

@@lucasbarros4923 essas empresas de Desenvolvimento Web estão com essa malandragem, contratando estagiário e PJ pra não pagar muito nem pra você e nem pro governo e lucrando milhões nas suas costas...

[@cesaraugusto9109]

@@motinha6185 Graças a Deus, que fiquem Bilionárias... precisamos de cada vez mais emprego, quanto mais dinheiro circulando mais emprego qualificado.

[@vitor.azevedo]

Alguém sabe qual extensão ele tá usando para o erro aparecer na linha em que ele digita?

[@fernandev1]

fala Vitor! error lens se eu nao me engano! 😎

[@robsmeireles]

Mas não deveriam ser círculos, em vez de quadrados?

[@fernandev1]

pois é Robson, falhei na prova 😔🤣

[@agathamagnus3439]

isso seria pra uma vaga junior?

[@fernandev1]

oi Ágatha, tudo bem? esse eu acredito que seja para um pleno já. eu tenho esse vídeo aqui kzbin.info/www/bejne/hHLXl2aKbsx6bdU que é um desafio júnior, dá uma conferida!

[@agathamagnus3439]

@@fernandev1 Obrigada pela atenção !

[@leofumeitors1]

Quando eu olho alguem programando assim eu vejo que nunca vou conseguir a metade disso.

[@fernandev1]

e se eu te falar que já estive no seu lugar e pensava igual (ou até pior) como você está pensando Leo? meu conselho pra você é, respeite o seu tempo, busque se tornar 1% melhor todos os dias e com o tempo tudo dá certo. o segredo é a persistência e repetição. 😎 acredito em você, bora!

[@leofumeitors1]

@@fernandev1 Deus te ouça cara, estou no segundo semestre de ADS porém, não consigo focar, trabalho em casa e faço free lancer a noite, meio que o tempo livre que tenho estou doido para fazer alguma coisa de lazer como jogar. Mas é foda, estou tentando, espero conseguir aprender a desenvolver, na faculdade o foco é C mas na minha vida eu quero e focar em full stack java. Mas vamos ver se consigo com o tempo. Obrigado pelo apoio, todo sucesso do mundo para você

[@eduardooliveira5257]

Muito bom, achei um pouco fácil o exercício!

[@fernandev1]

e aí Eduardo, como vai? trarei uns testes mais avançados em paralelo também! 🤓

[@imandrewslk7043]

eu fico vendo esses desafios e acho deboas, no meu primeiro de programador front end JR mandaram eu fazer pokédex consumindo uma api

[@fernandev1]

Fala Andre, tudo bem? Esse é clássico né cara? haha se você ainda tiver o descritivo desse desafio, manda pra mim que eu crio um vídeo com ele aqui no canal. Meus contatos fernandoferrari.dev.br 🥳

[@marcelocampos_developer]

fala amigo vou começar segunda na programação e me recomendaram fortemente ja que estou começando do 0 absoluto, estudar HTML e CSS3 por uns 2 meses e depois partir pro Java.. e olha eu nem sei oque to falando direito pra ter noção, só quero começar de alguma forma.. fui ver um curso online no Trybe e o valor é 24mil reais o curso e infelizmente não consigo e nem sei se vou realmente aprender mesmo, então vou começar com playlists no KZbin e etc .. se alguem tiver dicas porque realmente estou começando do 0 agora que descobri qual programa que muitos usam q é o Visual Studio Code mais vou te falar não sei nada |!! kkk

[@fernandev1]

fala Marcelo, tudo bem? que maravilha cara, seja bem-vindo ao mundo da programação! eu vou preparar também conteúdos para quem está iniciando do absoluto zero, e pretendo no próximo mês lançar algum treinamento de html e css. eu concordo que começar por html e css seja o correto e depois você parte pro javascript. manda bala! vai ser a melhor escolha da sua vida.

[@marcelocampos_developer]

@@fernandev1 obrigado de coração, sou apaixonado pela informatica concerto CPU's e otimizo pra games mais quero algo realmente expetacular como a programação me deseje sorte kk um abraço