- Видео 743
- Просмотров 2 510 212
Roger Melo | JavaScript
Бразилия
Добавлен 18 июн 2018
Ajudo programadores e aspirantes a programador a construírem projetos com JavaScript e React JS.
Como funciona a criação de página e layout iniciais no Next.js #cortes
Este vídeo é uma parte de uma aula do Bônus Aprenda Next.js, do meu treinamento fechado de React JS.
Aprenda como funciona a criação de uma página e layout inicial no Next.js.
#javascript
#reactjs
Aprenda como funciona a criação de uma página e layout inicial no Next.js.
#javascript
#reactjs
Просмотров: 2 026
Видео
A forma recomendada de tratar erros no React JS: Error Boundaries #cortes
Просмотров 1 тыс.8 месяцев назад
Aprenda a forma recomendada de tratar erros no React JS. #javascript #reactjs
Otimização de Performance no React JS: evitando re-renderizações com memo #cortes
Просмотров 4368 месяцев назад
Aprenda como usar memo no React JS. #javascript #reactjs
Uma forma incrível de visualizar o cache no React JS: React Query Devtools #cortes
Просмотров 7418 месяцев назад
Aprenda a visualizar o cache no React JS. #javascript #reactjs
Uma forma mais elegante de fazer requests no React JS: Hook useQuery #cortes
Просмотров 4,1 тыс.8 месяцев назад
Aprenda a usar o hook useQuery no React JS. #javascript #reactjs
Uma técnica de otimização surpreendente para resolver lentidão em um componente React JS #cortes
Просмотров 3368 месяцев назад
Aprenda uma técnica de otimização surpreendente no React JS. #javascript #reactjs
Um Hook para te ajudar a validar formulários no React JS #cortes
Просмотров 1,6 тыс.8 месяцев назад
Aprenda a validar forms no React JS com o hook useActionData. #javascript #reactjs
Quando é necessário usar React Query (TanStack Query) em uma aplicação React JS #cortes
Просмотров 6 тыс.8 месяцев назад
Uma introdução ao React Query. #javascript #reactjs
A ferramenta certa para encontrar possíveis otimizações de performance no React JS #cortes
Просмотров 2598 месяцев назад
Aprenda a usar a ferramenta certa para encontrar possíveis otimizações de performance no React. #javascript #reactjs
Como proteger rotas no React JS #cortes
Просмотров 3,1 тыс.9 месяцев назад
Aprenda a proteger rotas no React JS. #javascript #reactjs
Um Design Pattern muito usado com context no React JS #cortes
Просмотров 6619 месяцев назад
Aprenda este Design pattern muito útil no React JS. #javascript #reactjs
O que é Global Pending UI e por que usar essa técnica em sua aplicação React JS #cortes
Просмотров 2839 месяцев назад
Aprenda o que é Global Pending UI e como você pode usar em suas aplicações. #javascript #reactjs
O erro comum de muitos Devs na hora de fazer deploy de uma aplicação React JS #cortes
Просмотров 5 тыс.9 месяцев назад
O erro comum que muitos Devs cometem na hora de subir uma aplicação React JS para produção. #javascript #reactjs
Opções de estilização CSS para projetos React JS #cortes
Просмотров 5659 месяцев назад
Entenda quais são as opções de estilização para projetos React JS. #javascript #reactjs
Quando é necessário usar React Router em uma aplicação React JS #cortes
Просмотров 6579 месяцев назад
Uma introdução ao React Router. #javascript #reactjs
Como otimizar imagens em uma aplicação React JS #cortes (Vite)
Просмотров 4929 месяцев назад
Como otimizar imagens em uma aplicação React JS #cortes (Vite)
O que é uma Single Page Application (SPA) #cortes
Просмотров 3639 месяцев назад
O que é uma Single Page Application (SPA) #cortes
Como funciona o hook useReducer no React JS #cortes
Просмотров 4699 месяцев назад
Como funciona o hook useReducer no React JS #cortes
Aumentando a produtividade em projetos React JS com Vite através de aliases em imports #cortes
Просмотров 3999 месяцев назад
Aumentando a produtividade em projetos React JS com Vite através de aliases em imports #cortes
Como garantir que a limpeza do form execute na hora certa no React JS #cortes (hook useRef)
Просмотров 5029 месяцев назад
Como garantir que a limpeza do form execute na hora certa no React JS #cortes (hook useRef)
Por que você não deve usar localStorage nos seus projetos React JS #cortes (localForage)
Просмотров 7129 месяцев назад
Por que você não deve usar localStorage nos seus projetos React JS #cortes (localForage)
O jeito certo de fazer requisições HTTP no React JS #cortes (useEffect)
Просмотров 4339 месяцев назад
O jeito certo de fazer requisições HTTP no React JS #cortes (useEffect)
Como limpar um form controlado no React JS #cortes
Просмотров 33810 месяцев назад
Como limpar um form controlado no React JS #cortes
O que é o ciclo de vida de um componente React JS #cortes
Просмотров 1 тыс.10 месяцев назад
O que é o ciclo de vida de um componente React JS #cortes
O que faz a prop children no React JS #cortes
Просмотров 58310 месяцев назад
O que faz a prop children no React JS #cortes
O que são hooks no React JS e quais as suas regras #cortes
Просмотров 30510 месяцев назад
O que são hooks no React JS e quais as suas regras #cortes
O jeito certo de criar eventos no React JS (onClick, onMouseEnter) #cortes
Просмотров 58510 месяцев назад
O jeito certo de criar eventos no React JS (onClick, onMouseEnter) #cortes
Inscrições abertas para a Formação JavaScript e React JS Roger Melo
Просмотров 21510 месяцев назад
Inscrições abertas para a Formação JavaScript e React JS Roger Melo
A melhor aula que eu já dei sobre useEffect e useCallback no React JS #cortes
Просмотров 82710 месяцев назад
A melhor aula que eu já dei sobre useEffect e useCallback no React JS #cortes
Props x State no React JS - Qual é a diferença? #cortes
Просмотров 58310 месяцев назад
Props x State no React JS - Qual é a diferença? #cortes
Kkkkkkk sim vou fazer um javascript pra criar gatos . Muito útil 😂
Cara, eu gostei da ideia do factory , mas não sei se pode substituir o uso de classes, as classes tem algumas coisas que facilitam bastante o dia-a-dia. por exemplo , propriedades que só tem getter ... em qualquer lugar que eu usar essa propriedade eu simplemente uso User.nomeCompleto e no getter , ele concatena o primeiro nome com segundo nome ... nas functions eu teria que devolver uma funcao dentro da propriedade nomeCompleto para obter o nome completo e então chamar User.nomeCompleto() mesma coisa no setter , acho que ficaria pior tratar isso com functions ... até o momento não vi vantagem em factory substituir as classes ... Sem falar que quando se usa Typescript , você pode usar a classe como Tipagem de um parâmetro que chega na função ou variável...
Em certos contextos é bem útil esse recurso de acessar propriedade de objetos dinamicamente. Tem várias linguagens que não permitem esse acesso dinâmico de maneira fácil como JS. Só uma ressalva, no exemplo do getCarSales() você usa o objeto 'cars' como se fosse um MAP ou SET (key/value pairs) pra evitar fazer a lógica do IF. Totalmente válido, até comum achar nos códigos que a gente vê por aí, mas acho que seria melhor usar um MAP/SET, e tem mais vantagens deste formato como: iterar num Map ser mais eficiente, além de métodos específicos pra lidar com estrutura key/value, etc. De qualquer forma, a sua maneira é mais didática de repassar conteúdo para os novatos, uma MAP/SET adiciona uma camada extra de complexidade pra quem está aprendendo.
Tudo bem Roger? Tem previsão de quando abrira turma para o curso de JS agora em 2025?
Os cursos de JS geralmente tratam muito superficialmente o sistema de módulos do JS. Sua abordagem é muito esclarecedora e preencheu várias lacunas no meu aprendizado. Acho que só faltou falar da importação por meio do require(...) Mas parabéns pela bela didática.
Acho que o getScore() ficou difícil de ler, mas é possível usar uma abordagem funcional mais legível pra produzir o mesmo código (separando o filter e o reduce em vez de usar ternário): const getScore = (userAnswers = []) => userAnswers .filter((userAnswer, index) => userAnswer === correctAnswers[index]) .reduce((acc, _) => acc + 25, 0);
gostei da forma que esse cara ensina. obg pelo video
Melhor explicacao que encontrei ate agora, obrigada
depois desse vídeo me tornei um senior em fazer pop-ups kkkk
Posso separar as variáveis de nome composto com underscore?
Isso aí é convenção em outras linguagens. JS é camel case
Excelente vídeo
A melhor explicação que já vi sobre como separar o joio do trigo no uso do React. Agora posso dizer que é possível usar o React de forma limpa e obter bons resultados com uma excelente DX na manutenção. Parabéns pela excelente aula!
Estou passando por esse dilema. Sou dev php vindo do java entao tenho a mente fortemente acostumada com programação orientada a objetos e com isso aprendi vários conceitos como SOLIELD e clean code. Contudo agora estou estudando javascript mas o problema é essa adaptação para a linguagem que tem outros conceitos totalmente diferentes do paradigma orientadado a objetos. Tudo é funcao, high order function clousures e tal. É desafiador e intimidarorio no inicio mas vamos que vamos...
simplesmente o "mago" do Javascript vanilla !
Aula incrível !!!
Eu discordo por causa dessa referencia: ruclips.net/user/livekCSiGeUFi_U?si=FAqc9Ue-1-zujy56&t=8066
Excelente explicação
Simplesmente fantástico!!!!
Achei que você fosse liberar pra comprar o curso de JS e React na black friday. Não vende mais?
Em black-friday, não. Mas pode rolar uma nova turma no início do ano que vem =)
Eu desisto aqui. Tô lendo um livro sobre isso (entendendo algorítimos), tô usando o Gemini para me dar exemplos super detalhados dessa função, e vi esse vídeo que o professor explicou perfeitamente. Simplesmente não consigo entender como funciona essa função, eu entendo a teoria, mas não sei criar uma na prática, tô me sentindo a pessoa mais burra do mundo, meu deus.
Se eu escrever as funções dos componentes em arrow function no React e no arquivo App.js precisa estar a função como arrow function ?
pior que tem gente que paga por isso
Aula top de verdadee! Me salvou!! Tava entendendo nada sobre função recursiva.
mn tu me fez entender um negocio que eu não entendia de jeito nenhum lendo as documentações
4:33 Alguém poderia me explicar o porquê do + 1? Não consegui compreender.
vc ja deve ter descoberto, mas pra quem for ver o video no futuro, basicamente sem o +1, 0 código iria de 0 a 2 só, pq o Math.floor "exclui os decimais", vc ao invés disso pode colocar 4 pq ai vai de 0 a 3, pessoalmente eu prefiro fazer assim: Math.floor(Math.random()*(3+1)); assim eu sei qual era a intenção original do código, mas da pra fazer assim tbm : Math.floor(Math.random()*4)
Boa tarde. Melhor explicação. Parabéns
Qual você indicaria para usar ?
Depende do tamanho do projeto. O tamanho do projeto é uma das variáveis mais significativas a serem consideradas. No vídeo eu dou recomendações sob esse viés =)
Excelente vídeo!!
sensacional. Roger Melo, vc tem curso de javascript em alguma plataforma ? sua didática e incrível. sem palavras
Valeu Jairo! Tenho sim, mas no momento as inscrições estão fechadas
@@RogerMelo ok, estamos no aguardo. vlw prof
muito bom!!!!
Esse cara descreveu a minha situação atual
Não tenho aquele entusiasmo pra estudar programação mas não me vejo fazendo outra coisa. Não tenho motivação pra estudar pelo RUclips.
O Roger é muito bom pqp!
🙏🏻
Opa! Eu tenho aplicacao react e rodo um serve -s build para servir a aplicacao. Acontece que quando vai no inspecionar, ele alem de servidor a pasta build, aparece todo o fonte da aplicacao. Ja viu a respeito?
1 minuto super objetivo, muito obrigado pelo vídeo!
Faca um curso de next js professor.
Meu treinamento fechado de React tem um curso bônus gigantesco sobre Next.js. Inclusive, este vídeo é um pequeno corte de uma das aulas =)
@@RogerMelo quando irá abrir vaga no curso?
Em novembro
Alguém sabe me informa se essa api ainda funciona? não estou localizando ela na web, código do github a parte do script está sem nada.
Eu gostei do note.js porem gostaria fazer interfaces .
mais claro que isso, impossível ! obrigado
que canal incrível
Qual a diferença entre essa e a outra forma ensinada em um vídeo mais antigo sobre como fazer scroll infinito?
Que aula meus amigos, que aula. Meus parabéns Roger, sua didática foi excelente.
Conseguiu fazer muito em pouco tempo, diferente de alguns que não fizeram nada em muito...
Cara muito obrigado! Tive esse problema.
qual o tema do vscode?
Nessa aula é o One Dark (Sublime Babel), um tema que foi descontinuado.
Professor, estou enfrentando um problema no meu código relacionado à aula. Quando faço scroll até o final da página, múltiplas requisições estão sendo disparadas de forma inesperada. Por exemplo, ao tentar carregar a página 2, o sistema às vezes faz requisições para as páginas 3, 4 e até 5. A quantidade de requisições varia e não segue um padrão. Será que o problema é só aqui ou em seu exemplo está assim também?
Pra descobrir o problema, de fato, só olhando o código. Mas atualmente existe uma abordagem mais moderna e mais precisa pra fazer infinite scrolling. Mostrei essa abordagem neste vídeo: ruclips.net/video/uTNKsgJHboo/видео.htmlsi=zP7aWjwWJdA58Hmc
Isso esclarece muuuita coisa
Cara, muito bom. Excelente conteúdo.
Faz 3 anos e essa foi a melhor explicação.
🤌👏