React Hooks na prática | Diego Fernandes
ฝัง
- เผยแพร่เมื่อ 26 ส.ค. 2024
- ✅ Maratona Explorer: Dê seus primeiros passos na programação.
→ Cadastre-se no link gratuitamente: rseat.in/marat...
Os React Hooks compõe a nova maneira de escrevermos componentes dentro do React. Com eles podemos evitar a verbosidade das classes e garantir a performance de componentes funcionais.
Nesse vídeo criamos dois exemplos utilizando os hooks useState e useEffect. Você pode conferir uma lista de conteúdos e bibliotecas que já estão utilizando hooks aqui: github.com/reh...
Código da aplicação: github.com/Roc...
-----
Acompanhe a Rocketseat nas redes sociais:
Site: www.rocketseat...
Twitter: / rocketseat
Facebook: / rocketseat
Instagram: / rocketseat_oficial
Comunidade: comunidade.rock...
Blog: rocketseat.com...
Vídeo muito bom. Obrigado por compartilhar.
Uma nota construtiva: a tua imagem ocupa a metade da tela e por vezes esconde o código, que eu penso ser o conteúdo principal do vídeo. Talvez um retangulo menor no canto da tela com a tua imagem possa resolver.
Abraço.
É o primeiro canal que assisto em velocidade reduzida kkkkkkkkk quase sempre é mais rápida. Excelente vídeo, parabens Diego!
Aqui foi no 2x. Ótimo vídeo!
Diego já fala naturalmente na velocidade 2x aushauhsuahs
é impossivel escapar do 2x kkkk
Verdade kkk
professor nato, didática perfeita, não tem mais o que ser dito
Nunca assisti um tutorial com tanta emoção... Foi incrível a sensação
16:14 Voce pode utilizar arrow function sim, só esqueceu do const... const handleFavorite = id => { .......... }
Caraca acho que foi a melhor explicação que achei na internet, parabéns
É simplesmente impressionante a quantidade e qualidade do conteúdo gratuito vocês oferecem no canal. Parabéns!!!
Video top demais, nao sei como alguem tem coragem de descurtir um videos desses!
Curtiu, Rodrigo? Que show! Valeu demais pleo feedback! 💜 😍
Cara a sua didática é impressionante! Parabéns
Valeu, Diego! Dois anos depois continua ajudando. E muito! Sua explicação é clara e objetiva. Obrigado.
Atualmente não é indicado que a função do hook useEffect(O primeiro parâmetro) seja Async, no caso é necessário criar uma função async internamente e realizar a chamada logo em seguida.
useEffect(() => {
async function getRepositories(){
const response = await fetch('api.github.com/users/diego3g/repos');
const data = await response.json();
setRepositories(data);
}
getRepositories();
}, []);
dessa maneira pra ser mais exato :3
@@uaiLeleu Home, se eu coloco o repositories dentro do array ele atualiza infinitamente, enquanto se eu não coloco ele me dá o seguinte erro: React Hook useEffect has missing dependencies: 'repositories'. Either include them or remove the dependency array react-hooks/exhaustive-deps
qq eu faço? D:
@@uaiLeleu quando abre o console, ele ja dá um warning sugerindo essa alteração
@@negasuja th-cam.com/video/jMWNNSx-mcU/w-d-xo.html
@@uaiLeleu Pq não é indicado?
Muito foooooda, direto ao ponto e sem enrolação, gostei muito ja dei subscribe
Wooow! Que massa que curtiu! Valeu demais pelo subscribe! 💜 🚀
Aprendi Redux por causa de você e agora, aprendi Hooks por sua causa também. Obrigado xará, gosto muito da sua didática.
Parabéns pela clareza e objetividade do conteúdo. Se possível gostaria de ver uma demonstração de como os hooks trocam informações entre componentes pai-filho/filho-pai.
Achei que ficou impecável, eu sou bem crítico quanto a vídeos do tipo, mas vc foi fenomenal. Meus parabéns
Vídeo perfeito, fiquei 2 anos sem desenvolver em React e to precisando me atualizar com os novos conceitos, amei!!!!
Muito obrigado por mais um excelente vídeo Diego, comecei estudar React recentemente menos de um mês e já me sinto privilegiado por chegar agora que existem os Hooks dei uma olhada em como funcionava as coisas antes e realmente é uma diferença gigantesca. #FalaDev
Vaaaleu pelo feedback, William! 💜
Incrível a simplicidade que explica conteúdos completos. Obrigado mais uma vez!
Cara sem palavras para vocês, video que mastiga totalmente o conteúdo, Rocketseat
Valeeeu Bruno!! 💜😍
Nunca tinha pensado nisso, 20:12, !repo.favorite retornar true se false e false se true 😅😅😅. Eu teria feito duas condições dentro da condição. Vivendo e aprendendo...
Hahaha então.. 😍
Que aula top man, parabéns! Porém gostaria que a aula ocupasse mais espaço na tela kk (por mais que vc seja mto bonito). Poderia seguir aquele modelo de cam que é só um quadrado pequeno no canto da tela, ficaria melhor.
Primeiro video tutorial que assito em velocidade normal hahahaha excelente, e muito obrigado por compartilhar seu conhecimento
Cara, seus vídeos são sensacionais. Sou totalmente de backend e tenho consigo e me animado a aprender React através de seu conteúdo, tando aqui no YT como no site da Rocketseat. Mas tenho uma dúvida, onde encontro mais cursos sobre React com vc explicando? Sua didatica é mto boa! Vlw e grande abraço!!
Carai Diegão, manda muito na didática e no domínio do conteúdo, deixa mto produtor de conteúdo ai anos luz pra trás. Forte abraço e mantenha sempre esse ótimo trabalho!! Assisti aos vídeos da skylab da rocketseat sobre js, es6, node e react e cara vc manda muito bem. É difícil de acreditar como consegue passar tanto conteúdo em tão pouco tempo! Parabéns fera, manda muito!
Sensacional irmão! muito massa, extremamente bem explicado e super dinâmico, até para os iniciantes, como eu. Muito obrigada!
Didática impecável, parabéns e mt obrigado Diego
Parabens pela didatica. Video muito bom e bem explicativo.
Cara, sua didática é impecável, parabéns!! Ótimo vídeo! :)
Diego é fera!! Ele tem um dom, né!? Valeeeu! 💜 😍
Excelente didática Diego você é fera demais.
Muito show o vídeo, Diego! Bem simples para ensinar como usar os Hooks!
Gostei muito da forma direta e simples de como explicar hooks.
Mil likes merece. Agora sim estou entendo o useState e useEffects
Noosa Diego gostei de mais... muito top.... Parabéns
Parbéns pelo conteúdo, ajudou demais na introdução!!
esse aqui sabe programar de verdade, muitos ai so criam videos pre feitos e nao sabem nem oq e um parametro
Direto e reto. Perfeita didática
Que bom, agora eu sei as coordenadas onde o Diego grava os vídeos dele kkkk
Não era só eu que pensava nisso 😂
Arigatou pelo video Diego, ajudou bastante a entender melhor os hooks.
Que massa Wagner! Valeeeu pelo feedback! 💜
Didática impecável! Se possível, poderia nos ajudar com um vídeo usando o useReducer! \o
Parabéns! Ótima didática !
Valeeeu, Alisson!
Didática do Diego é incrível demais, né!? 💜 😍
Muito boa as suas aulas amigo! parabéns e obrigado!
Aula ótima, vendo aqui 4 anos depois rs
Conteúdo muito bom aprendi muito sobre o Hooks obrigado por compartilhar.
Valeeeu pelo feedback, André! 💜
que conteúdo fooooda!!!! vlw Diego vc é um monstro ensinando.
Aula muito boa!
Ótimo vídeo! Sensacional.
Valeu demais, Tarcisio! 💜
react-redux-hook até agora, só pra brincar, acho que é a melhor lib pra usar com hooks, mas como eles mesmo dizem: "we don't recommend replacing react-redux just yet." Sobre render props e HOCs o próprio facebook diz que ainda há espaço, apesar de hooks atenderem a grande maioria dos casos.
Que didática meus amigos que didática!
Vídeo muito bom eu aprendi muito com sua explicação
Muito bom! Melhor vídeo falando sobre hooks!
Excelente, eu gostaria q mostrasse todo os hooks, mas mostrar como usar mais de m tb ficou show de bola, pq sanou outra duvida,
parabéns pelo vídeo, muito bem explicado, um dos melhores vídeos que já vi sobre o assunto
Cara eu achei esse vídeo sensacional. Parabéns aí pelo esforço.
Eu até me inscrevi na plataforma de vocês hehe.
Tmj 👊
Wooow!
Valeu demais pelo reconhecimento e seja muito bem vindo! 💜 🚀
Integra seu Discord pra entrar na nossa comunidade... 👀
Pessoal lá é incrível! 😍
Cara, isso é lindo.
Lindão, né? 💜 Valeu, Sostenes! 💜
Se é loko.... manja demais.
Muito bom. Perfeito sob todos os aspectos. Parabéns Diego.
Sensacional Diego 👏🏽
MUITO obrigado!
Excelente!!
A questao da coordernadas... vc tem que usar promisses. Pois vc tem que aguardar a resposta do usuario se ele autoriza dar a localizacao ou nao.
Conteúdo incrível. Parabéns galera da Rocketseat.
Video maravilhoso, tu me esclareceu demais cara, obrigado!
Fala Diego, parabéns pelo material, realmente uma das melhores explicações sobre hooks....like garantido!!!
Top demais!!!
Aulona! Parabéns pela didática.
Que bom que curtiu! Valeeu pelo feedback, Guilherme! 💜
xonei nesses hooks
São incríveis, né, Wanderson? 💜 🚀
Muito top a aula!!! Explicação excelente! (Eu ainda não tinha entendido o primeiro parâmetro do useState)
Conteúdo sensacional! Parabéns Diego!
Que qualidade de video, muito bom.
a questão da handleFavorite ter dado errado com arrow function é pq ele não usou const antes do nome, não que não podia usar arrow Function. Ali nos 16:10 segundos.
Parabéns pela aula, me ajudou muito
Que bom, Marcos! 💜 Diego é show, não? 💜💜
Parabéns pelo conteúdo, muita qualidade como sempre !
Muito bom o vídeo, ficou bem claro com usar, parabéns!
cara vc é fodástico...
Só corrigindo uma coisa no minuto 14:30, o useEffect sempre executa após uma renderização e a dependência limita a sua execução para quando uma variável específica é alterada.
Muito bom!!!
Que massa que curtiu, Mauro! 💜 🚀
muito bom !!!!
Que massa que curtiu, Johnis! 💜 😍
voce tem um video mostrando como funciona o compartilhamento de estado entre componentes usando o hooks?
quando achei q tava conseguindo aprender this.state, setState e estas coisas eles mudam tudo =( kkk mas bora aprender este novo metodo que parece ser mto mais facil
Parabéns meu amigo!
Ótimo conteúdo e ótimo material!
Conteúdo top!!
tava aguardando esse video \o/
Tu é um gênio!
Muito bom o conteúdo!
Boa noite cara, seria legal um vídeo explicando melhor como o console ou qualquer ferramenta do F12 pode nos ajudar.
Muito bom o vídeo! Excelente didática. Seguindo o canal e ativando notificações .
Grande vídeo! Valeu!
Ótima explicação
que video top!
Que bom que curtiu, André! 💜
Diego, fala sobre SPA, desenvolve uma app em SPA
Fantástica introdução. Muito mais clara do que tentar ler na documentação oficial. Lendo lá não entendi bosta nenhuma.
Top!!
Muito bom o conteúdo. Parabéns!!
Muito bom Diego, valeu!
conteúdo show. Valeu jovem!
Seria interessante ter todos os exemplos no git, não somente o ultimo. Mesmo assim obrigado por ajudar ótima aula.
Muito bom parabéns! Obrigado
Bom demais os conteúdos.
Sou desenvolvedor web há 10 anos e agora estou querendo migrar todos meus conhecimentos pra omnistack. Então tem sido muito legal ver diferentes formas de aplicação.
Ainda não me arrisquei em nada prático, mas a cada vídeo estou ficando mais confiante das escolhas de libs e decisões que devo tomar para as minhas aplicações.
Pergunta rápida: Seria “saudável” eu ter um site construído utilizando Create-react-app, Next.js, Express, Redux, Hooks, ESlint e Styled-components?
Levando em consideração indexação e desempenho da aplicação.
Valeu Diego. Abraço.
Olá amigo, sou iniciante, oq seria "omnistack"? Lembrando que eu vou pesquisar agora no google mas queria um feedback mais próximo. Valeu!!!
@@robsontavares1 Fala Robson!
Oministack é o grupo de tecnologias que engloba o React js, Node.js e o React Native. É uma forma de desenvolver pra todas as plataformas utilizando a linguagem de Javascript como base.
O pessoal da Rocketseat tem vários cursos free que te ensinam cada um desses processos no site deles.
Dá uma olhadinha lá também, certeza que vai aprender bastante.
@@murillomfs Opa Murillo, obrigado.
Bem explicado entretanto para marcar o repositório como favorito não seria mais interessante usar o Array,find()?
Gente, alguém sabe qual o tema que o Diego usa no VS Code? Achei muito legal.
Grato amigo! Sensacional didática! :^)