É desse conteúdo que iniciantes precisam, os detalhes, uso das ferramentas, a lógica! Muito obrigado pelo excelente conteúdo!

@FrontBeginners

Жыл бұрын

Vlw Marcos, vamos trazer mais conteúdos assim com certeza ✌️

@rcf044

Жыл бұрын

real

Teste feito e compartilhado!!! Valeu Jorge, seus conteúdos são fenomenais.

Bora Jorge!!! Já animado pra ver o vídeo todo!! Muito obrigado pelo conteúdo!!

@FrontBeginners

Жыл бұрын

Esse vai ser longo kkkkk, mas vai valer a pena no fim

Que video enriquecedor, obrigado!

@FrontBeginners

Жыл бұрын

Tamo junto Luciano 🚀

Parabéns pela iniciativa, continue trazendo mais conteúdo. Abc

@FrontBeginners

Жыл бұрын

Vamos sim, pra semana q vem já temos mais um teste :)

Vídeo foda!! Esse é o melhor caminho na questão de ajudar pessoas que estão iniciando. Torcendo pra esse vídeo dar muitas views porque vc merece e pra que tenham mais desses hahaahah

@FrontBeginners

Жыл бұрын

Vlw Zolk, vamo junto 🚀

Parabéns pelo conteúdo, muito bom 🙌🙌

@FrontBeginners

Жыл бұрын

Vlw Maurício tmj🚀

finalmente conteúdo realmente útil pra iniciante

@FrontBeginners

Жыл бұрын

Tmj Gabriel, se tiver sugestões só mandar :)

Muito bom vídeo cai de paraquedas aqui procurando algo pra react e coisas do tipo!! Vídeo altamente explicativo, obviamente que precisa ter uma base, mas sensacional!! Mais 1 inscrito!!!

@FrontBeginners

Жыл бұрын

Vlw Guilherme, feliz em ajudar semana q vem temos mais testes

Muito bom o contúdo, bem didático.

@FrontBeginners

Жыл бұрын

Vlw Murilo tmj🚀

Parabéns pelo canal, sucesso!!!

@FrontBeginners

Жыл бұрын

Obrigado pelo carinho. vlw 🚀

Muito interessante esse desafio.

@FrontBeginners

Жыл бұрын

🚀🚀 Tentou fazer Felipe?

mt top a explicaçao,estou começando na area de progamaçao e me ajudou a intender bastante coisa,fico no aguardo de mais videos!!!ganhou mais um escrito

@FrontBeginners

Жыл бұрын

Vlw meu querido, obrigado pela inscrição. 🫶🏻🚀

Realmente é muito difícil encontrar esse tipo de conteúdo com tantos detalhes para quem está começando. Ganhou mais um inscrito!😉👍

@FrontBeginners

Жыл бұрын

Vlw meu querido, como muita gnt gostou viu gravar mais :)

Ótimo conteúdo cara, os detalhes, a lógica parabéns! Continua assim que vai ser sucesso, procura por mais testes e ajuda os juninhos kkk 🙌

@FrontBeginners

Жыл бұрын

Tmj Denzel, vamos ter mais video sim já preparando o próximo :)

Muito bom o conteúdo, acho que esses detalhes, detalhes das ferramentas, explicação da lógica usada são os principais pontos que quando comecei na carreira me fez falta nos cursos que fiz! Tive que quebrar mto a cabeça dps kkkkk

@FrontBeginners

Жыл бұрын

Boa Murilo, realmente ver outras pessoas fazendo ali e explicando ajuda muito a gnt né.

Muitoo bom.. show demais!! valeu por esse conteúdo.

@FrontBeginners

Жыл бұрын

Valeu Gabriel tmj irmão 🚀

@cssgabriel

Жыл бұрын

@@FrontBeginners Jorge, já tenho boms conhecimentos em HTML, CSS e JavaScript.. quais seriam as proximas tecnologias que indicaria? E qual caminho sugere? Tipo o que aprender primeiro, cursos, etc

caramba, muito massa, parabéns heheheeh 😁

@FrontBeginners

Жыл бұрын

Achei esse teste bem divertido tbm hehe, por isso resolvi trazer aqui pra vocês 🫶🏻

Que conteúdo maravilhoso!! Literalmente o melhor! Obrigado! Gostaria que falasse mais sobre como e quando usar cada funcionalidade do JS. Mas foi muito ver ver como pensou, etc...

@FrontBeginners

Жыл бұрын

Show Crystian feliz em ter ajudado, vamos ter mais resoluções assim é ai tentamos falar mais sobre.

fala jorge conteudo muito bom !! seria muito interessante trazer mais conteudo sobre isso !!!

@FrontBeginners

Жыл бұрын

Bom demais né Lucas, tive muitos bons feedbacks, vou gravar mais vídeos assim resolvendo essas questões de entrevistas :)

Só um detalhe no 15:22 você deveria estar passando uma função ao invés de utilizar o clickedPoints diretamente, para não ter problemas de race conditions: setClickedPoints(prevData => ({ ...prevData, {clientX, clientY} }));

@FrontBeginners

Жыл бұрын

Boa Vinicius, isso ai usar ali a callback seria mais adequado mesmo :)

Você explica de tal maneira que a gente que não entende de React consegue acompanhar facilmente! Parabéns pelo seu trabalho nesse vídeo!

@FrontBeginners

Жыл бұрын

Muito obrigado 😁 Marcello, tmj man 🫶🏻

dahora, sucesso

@FrontBeginners

Жыл бұрын

Valeu Roy, 🚀

Bom demaaaais slc, n sei react ainda mas deu uma animada 🚀🚀🚀

@FrontBeginners

Жыл бұрын

hahaha que bom Guilherme, mesmo não sabendo ainda tenta reproduzir pra já entender um pouco como as coisas funcionam.

muito obrigado, eu assisti um pouco, mas acho que vou estudar e quando sentir preparado vou voltar para tentar fazer. valeu mano

@FrontBeginners

Жыл бұрын

Jhean volta pra fazer ele mais pra frente :)

Parabéns pelo vídeo! Que bom que existem provas técnicas como essa.. Me deu esperança porque eu teria feito algo muito parecido... Na última vaga pra qual eu apliquei pra front Jr a prova técnica era criar um app fullstack de transferência de dinheiro entre contas com node, incluindo Jwt, BD postgree sql e react.. E pediram a aplicação já em container.. Fiquei muito desanimado em não saber metade do que foi pedido.. Ainda mais numa vaga frontend Jr

@FrontBeginners

Жыл бұрын

Caramba isso não é um teste front-end kkk é um full-stack + DevOps rsrsrs, acontece as vezes eles querem ver oq vc consegue construir tbm.

Muito bom o vídeo. Clássico problema de estrutura de dados. Frontend também precisa estudar algoritmos.

@FrontBeginners

Жыл бұрын

Boa Dani 🫶🏻 É isso aí hehe

@DevWillChannel

2 ай бұрын

Com certeza! No meu canal tem um vídeo que eu falo sobre isso, que o front-end é mais difícil do que parece

Pra mim que estou iniciando em react agora foi muito legal, estava igual uma criança cada vez que dava certo kkkkk... Muito obrigado pelo conteúdo!

@FrontBeginners

Жыл бұрын

Haha que legal Leandro, bom ter esse sentimento que tá rendendo.

Vídeo sensacional. Ajuda muito em ter outros olhos para os desafios.

@FrontBeginners

Жыл бұрын

Ja to subindo outro no canal, 🫶🏻 confere lá daqui a pouco.

@WillianCarvalho

Жыл бұрын

@@FrontBeginners Opa. já irei ver

Tem uma falha no código. Se você por exemplo: fizer 5 circulos e clicar em Undo 2 vezes, depois voltar a clicar na tela fazendo um novo circulo e clicar em Redo, você perde a sequência correta de apagar e reaparecer os circulos. Quando gera um novo circulo já tendo usado o Undo, vc teria que apagar a segunda lista(Reset) para continuar o novo caminho dos circulos sem conflito. Fiz antes como recomendou, ficou parecido até. Usei o state com a lista das coordenadas imutavel desde o início e criei um state numérico como indice para controlar a renderização das s.

Ao meu ver também seria interessante colocar um setUndoPoints([]) no evento de clique na tela, assim msm se vc voltasse os pontos, quando clicasse ele resetava o "save" do redu.

👏🏻👏🏻👏🏻

@FrontBeginners

Жыл бұрын

🫶🏻🚀

meu, achei geniaaaaaaal

@FrontBeginners

Жыл бұрын

hehe obrigado 🚀

Muito bom! Esse é o primeiro vídeo que eu acho de alguém resolvendo um problema real com nível de dificuldade aceitável, a maioria é só teoria e quando chega na prática os caras fazem 1+1=2 😑. Valeu!!

@venks1

Жыл бұрын

chega na pratica 90% copia e cola kkkk

@FrontBeginners

Жыл бұрын

Tmj 🫶🏻

Primeiramente parabéns pelo vídeo e pelo conteúdo top do canal. No começo eu não fazia ideia de por onde começar. A medida que vc foi fazendo fui entendendo a lógica mas confesso que achei um desafio dificil....talvez tenho que estudar mais! Uma dúvida, desafios como esse, com tela compartilhada, você tem que resolver tudo de cabeça mesmo? pega mal dar uma pesquisada no google ou chatGPT ? Desculpa a pergunta besta...

Contratado! Pode vir amanhã as 08:00!

@FrontBeginners

Жыл бұрын

Hahaha 🫶🏻

Acho incrível que quanto mais eu aprendo sobre T.I menos eu sinto que sei SAHASHUSUHSHUSA até me inscrevi depois dessa

Uma dica, seria ao invés de você subtrair 6px no top e left vc poderia usar a propriedade "transform: translate(-50%. -50%);" fazendo que o ponto ancora da DIV seja sempre o centro dela, independente do tamanho que você coloque!

@FrontBeginners

Жыл бұрын

Boa Lucas, deu branco na hora hehe

Esse vídeo serviu muito para mim, sei o básico do TypeScript e React, mas sou dev Back-end e estou me esforçando para aprender mais de Front-end para me tornar um dev fullStack. Então para mim é um pouco mais chatinho ter essa visão do front, pelo menos a parte de Array, que é estrutura de dados foi de boas, mas as sacadas visuais como fazer o círculo a base dos pixels é osso KKK. Confesso-te que em primeiro momento eu iria meter uma image de leves e fazer os evento de Undo e Redo. Enfim, vídeozão massa, mano, sucesso ai !

@FrontBeginners

Жыл бұрын

Vlw Daniel, tmj irmão, é só uma questão de prática mesmo, com o tempo pega o jeito.

Acho que se apenas você apenas clicar, ...e adicionar o circulo, ...sem criar um array !!, o React criava o circulo, e apagava o circulo anterior automaticamente, ...bem, pelo funciona assim em puro vanilla javascript 😁👍...mas gostei !! ótimo tutorial... obrigado por compartilhar.. 😎😎

Muito bom vídeo. Parabéns pelo conteúdo! Única coisa que talvez faria diferente do que você fez e do que já foi comentado aqui, é que você não precisa de um state pra controlar o que você chamou de undoPoints, podia tratar ele como um array normal já que as alterações nele não precisariam ser refletidas no DOM (e se precisassem, já teria um rerender do clickedPoints). Isso vendo de fora, talvez eu tivesse usado também enquanto estivesse resolvendo o desafio.

@FrontBeginners

Жыл бұрын

Boa sugestão! realmente hehe

Video top

@FrontBeginners

Жыл бұрын

Tmj Wesley 🚀

Ainda só estou no HTML, CSS e o início do JS com DOM, mas já acho muito legal React

@FrontBeginners

Жыл бұрын

Ta no caminho Lucas 🚀

Que ódio kkkkk. No começo travo e nem imagino como começar, aí na primeira linha que tu escreve eu já penso, "nossa, que facil, ja sei como fazer tudo, termino em 5 minutos", e sei mesmo, no começo do video eu já sabia o resultado todo, cada passo que tu iria fazer (ja trabalho na area). O problema é a pressão inicial que me trava e não consigo pensar em coisas obvias e simples, no começo mesmo pensei em pegar o elemento do dom, adicionar outro elemento com a codernada e etc, mas isso daria um puta trabalho pra gerenciar o "under" e talvez estourar o tempo, aí tu me lembra de algo simples como um "state" kkkkk. Vlw, tenho que trabalhar mais a faze inicial e ter mais calma.

@FrontBeginners

Жыл бұрын

A prática tbm ajuda tentar resolver problemas assim pode fazer seu raciocínio lógico ficar mais rápido, mas isso vem com o tempo tbm ainda mais vc q já está na área.

Massa, pensei apenas em um problema: suponhamos que o usuário crie 4 bolinhas, daí ele desfaz 2 e refaz apenas 1, logo depois ele cria uma nova, a lista de undoPoints ainda teria um desfeito, gerando um bug. Seria necessário que na função de criação das bolinhas zerasse a lista de undoPoints.

@FrontBeginners

Жыл бұрын

Faz sentido, vou testar depois, mas se quiser resolver esse pra gnt fica aí o desafio :) e posta no linkedin e me marca 🫶🏻

@brunolucask8

Жыл бұрын

Se o state undoPoints não estiver vazio quando houver um click. É só limpar o state, adicionando a seguinte condição na função getCoordinate() const getCoordinate = ({ clientX, clientY }: MouseEvent) => { if (undoPoints.length > 0) { // se o state undoPoints não estiver vazio setUndoPoints([]) // limpa o state } ......... }

Pera ai, eu nem sei como fazer isso, mas irei ver a resolução do seu e ir atrás de como fazer isso. Acredito que eu tenho que ir atrás dos seguintes items: - Como capturar o movimento do mouse e anotar as posições e anotar isso em um estado (melhor maneira para definir o pointer); - Para os botões seria só o manuzeio do estado, mas teria que me aprofundar para saber..

@FrontBeginners

Жыл бұрын

Boa isso ai, assistiu o vídeo?

Eu vi um gringo resolvendo esse problema, algumas coisas ele fez diferente mais o resultado é o mesmo! Muito bom o video também!!

@FrontBeginners

Жыл бұрын

Boa.. sempre tem né hoje a internet tem muita coisa kkkk difícil postar algo que já não esteja por ai, mas legal q dá pra ver panoramas diferentes e ajudar os BRs que ainda não falam inglês 😊

@vitorzbr9013

Жыл бұрын

@@FrontBeginners exatamente, tem muito conteudo em ingles, mesmo entendendo a lingua nada supera aprender na sua lingua nativa.

Video muito bom! na linha 4 do App.css tem o `padding: 1.5rem;` que vc setou novamente porém com 0 na div #root em Index.css.. Era só tirar do App.css..

@FrontBeginners

Жыл бұрын

Boa Eduardo 🚀🚀

Muito bom!!! Nota 5 faltou o código fonte!

@FrontBeginners

Жыл бұрын

Poxa esqueci amanhã coloco o link.

@junior1992a

Жыл бұрын

@@FrontBeginners kkk tá amanhã eu volto!

@FrontBeginners

Жыл бұрын

@@junior1992a tá na mão: github.com/front-beginners/react-challenge-dots-at-screen

Cara, primeiramente parabéns pelo seu conteúdo. Foi de grande valia para mim. Uma pergunta, seria possível passar props para o arquivo css para que eu possa passar o valor de clientX e clientY para o arquivo css em si? Assim eliminando a estilização do component ?

@FrontBeginners

Жыл бұрын

Sim é possível, mas aí vc teria que usar mais uma biblioteca, pra fazer isso eu usaria styled-components

Vídeo excelente. Mas tenho uma dúvida, na altura que os botões foram criados não faz parte da div 'App', ou seja, ao clicar lá a função "getCordenates" não é disparada, tem um jeito simples de deixar 100% da tela fazendo parte da div app?

@FrontBeginners

Жыл бұрын

Não entendi muito bem Sarmuns, ali a gnt deixou a tela 100%, o seu não está?

@sarmuns2684

Жыл бұрын

@@FrontBeginners Cara, foi uma bobagem que eu tinha feito aqui, não tinha colocado os botões dentro da div. Erro muito besta, que eu não tava conseguindo ver. Mas percebi um tempo depois e consegui corrigir! Não esperava que você fosse me responder, ainda mais tão rápido! Muito obrigado! Tá me ajudando bastante com a programação.

mais videos besse estilo

Se eu ficasse com duvida em algo e procurasse na internet, isso seria ruim com o entrevistador?

@FrontBeginners

Жыл бұрын

Depende, se fosse tipo algo que esqueceu como usar, ou se vai usar uma biblioteca q não conhece. Se procurar como resolve o problema em si as vezes pode não pegar muito bem hehe

Video muito bom mano, parabens! O que vc quis dizer quando falou sobre estilisar em linha ao inves do arquivo CSS? Minuto 18:25

@FrontBeginners

Жыл бұрын

Opa, valeu meu querido, então existem três forma de vc estilizar, de aplicar o CSS, no próprio elemento, ou seja, in line, no header do arquivo css, utilizando a tag style, ou em um arquivo externo.

@gadiesel2

Жыл бұрын

@@FrontBeginners Sim, to ligado. Mas ali vc optou por fazer in line pra evitar mexer com os props, nao entendi bem qual seria o problema de estilizar no arquivo css. Nao sei se me expressei bem 😅

@FrontBeginners

Жыл бұрын

@@gadiesel2 ahh nenhum, eu teria que criar uma outra classe e hora adicionar ela hora não, não quis ter esse trabalho hehe, mas nesses casos que usam props eu prefiro utilizar styled-components, inclusive o próximo teste q vai ser lançado dia 02/01 eu faço isso utilizando styled components. Começo do ano vão ser 100 dias de vídeos codando hehe. fica ligado.

@gadiesel2

Жыл бұрын

@@FrontBeginners Entendi! Valeu pela atenção meu mano, seu canal é fera!

Se fosse um teste eu teria permissão para pesquisar comandos que eu não conheça ou tenha esquecido?

@FrontBeginners

Жыл бұрын

A maioria 99% dos testes vc é livre pra fazer oq quiser inclusive ir no github e copiar código, mas a vdd é que tudo conta, então quanto menos fizer melhor, mas não tem problema vc pesquisar uma coisa ou outra, desde que não seja o básico.

Bom dia Jorge, tudo bem? fiz esse teste abaixo em uma empresa uns meses atrás e não consigo resolver. Se possível resolva por favor, obrigado! "Você e seu time estão desenvolvendo um sistema de indicações de postos de gasolina que ficam próximos da localização atual do veículo. No modo de direção "viagem", a funcionalidade a ser desenvolvida é de indicar ao condutor o posto mais distante possível dentro do limite atual de combustível. E caso não exista posto de gasolina, retornar -1. A Pessoa responsável por fazer a especificação do sistema informou que você terá as seguintes informações: consumo médio de combustível, quantidade de combustível, quantidade de combustível restante e um array contendo distâncias dos postos de gasolinas" Exemplo: Combustível(em litros): 2 Consumo médio (Km/l): 8 Postos de gasolina (km): [2, 15, 22, 10.2]

@FrontBeginners

Жыл бұрын

Legal mano, vou colocar na lista aqui, exercícios de distância são um clássico tbm, normalmente utilizamos o Algoritmo de Dijkstra para resolver esse tipo de problema, não sei se é o caso, mas vou dar uma olhada com tempo. Obrigado por enviar.

@diogotavares7203

Жыл бұрын

@@FrontBeginners quebrei a cabeça e não consegui resolver, sou iniciante na área. Obrigado pelo retorno, tmj!

Mas esse Júnior ae é um júnior top ,cá pra nós. 🤣🤣 Além de ter que fazer ainda tem o domínio do que vai acontecer lá na frente não é pra qualquer júnior não. Acho que dependendo do nível do júnior que o contratante esteja querendo pelo domínio até a metade do projeto o cara já iria falar. "Ta bom ta bom colega já vi que vc já sabe, está contratado🤣🤣.

@FrontBeginners

Жыл бұрын

Sim, de fato o projeto aqui, na minha opinião, foi um pouco avançado pra uma vaga Júnior tbm, mas vale lembrar q realmente foi um teste aplicado. hehe

crtl + y = refazer

@FrontBeginners

Жыл бұрын

Really?? vou testar isso aqui no meu acho q é Command + shift + Z

Cara, eu estou num teste pra entregar terça feira, se fosse Javascript seria de boa kkk, mas eu estava finalizando o typescript quando recebi esse teste pratico, daí agora estou estudando react pra ver se consigo fazer, mas acho que não vai dar tempo de conseguir, e eu não conheço uma alma que me ajude kkkk. O teste simplesmente é ## Problema Implementar funcionalidade de busca de filmes, com paginação. - Como usuário, eu conseguirei digitar o nome do filme, em um campo de busca, para conseguir achar um filme qualquer. - Além disso, para uma melhor usabilidade, dispensaremos a necessidade de clicar, ou confirmar a busca. A busca tem que ser feita assim que o usuário pare de digitar por alguns segundos (2 secs parece bom…), é importante que a busca não seja feita a cada digito. Estou amando o react, mas creio eu que não vai dar tempo de eu conseguir fazer isso.

@yure-ribeiro

Жыл бұрын

com javascript é só pegar o valor do input de busca, se tem relação com os titulos dos filmes, caso tenha.. aparecerá os filmes que estão inclusos no campo de filmes e correspondem ao valor do campo de busca, caso contrario sumira todos, acaba que usamos mais css pra realizar essa 'busca' kk ainda não estudei react mas parece ter mudança apenas na sintaxe

@raphaelcastro4048

Жыл бұрын

@@yure-ribeiro Eu to ligado kkkk se fosse com js puro tava de boa, mas o teste é com CRA + Typescript

@FrontBeginners

Жыл бұрын

Vc vai precisar de um debounce ai, cara existe muitos vídeos aqui no youtube implementando basicamente esse mesmo teste um search, de uma lista de algo, tenta achar um vídeo desses.

@Honorato-Dev

Жыл бұрын

kzread.info/dash/bejne/h6GNyKede6mvXag.html assista isso depois adapte ao TS com CRA

@denzelwashington9724

Жыл бұрын

Qual empresa mano?

por 1 minuto achei que era o Julio Balestrin

@FrontBeginners

Жыл бұрын

hahahaha só faltou o shape, mas 2023 vamos colocar ele em dia hahaha

resolvi de outro jeito T-T

@FrontBeginners

Жыл бұрын

Haha sério Macedo, manda o link do github, quero ver como fez. :)