React Hooks com TypeScript | Masterclass #04

[@danieltiagofischer3965]

4:46 => useState 14:00 => useMemo 17:38 => useCallback 19:30 => useRef 24:54 => useContext 31:52 => useReducer 37:35 => useImperativeHandle

[@alexismatoss]

semrpe tem os abençoados s2

[@mrsantos-t7r]

O que diego e a rockeaseat estão fazendo não tem preço

[@cedrio1027]

meu irmão se eu consegui um emprego graças ao que to aprendendo aqui pode te certeza que o primeiro salario é deles

[@fandross_]

@@cedrio1027 e ai mano conseguiu o job?

[@ocharlespereira]

Melhor conteúdo de Programação que já vi até hj, Diegão vc sabe disso rsrsrsr...

[@rocketseat]

Woow! Valeeeu, Charles! 💜 😍

[@LeandroUngari]

Sim, mais Typescript. O canal está incrível, tá faltando tempo para ver todos os vídeos, conteúdo demais!

[@thiagohenrss]

"Projeto vem Monstro" hahahahahahahaha muito bom!!!

[@rocketseat]

Hahahahaha 💜

[@jjcmp100]

TypeScript É VIDA! Ferramental do caralho! Mais conteúdos com Typescript por favor!

[@HerlonCosta]

Monstro demais, tirei bastante proveito!

[@giovannicarmo2274]

Essa explicação do useImperativeHandle() salvou muito! Já fiz alguns com JS, mas com TS a coisa é mais embaixo. Parabéns pelo vídeo!

[@henriqueomena7686]

Diego nao tenho dinheiro para comprar seus cursos ainda mas vc eh merecedor com toda certeza assim que possivel terei seus cursos, Vc ajuda agente demais aqui, Por favor nao pare com isso e que venha mais videos com typescript plzzzz obrigado!!!

[@TheNandotomio]

Configuração TypeScript + ESLint + Prettier para o React-Native

[@xleo91]

Up

[@matheusantonino8883]

Alguém sabe onde tem? to precisando

[@gabrielcancio1443]

Upppp

[@tiagoborges7297]

Rocketseat is incredible

[@andre_zagatti]

Comecei a usar Typescript em tudo quanto é projeto, esses vídeos estão me ajudando muito.

[@maicongunner]

Muito bom Diego, incrível o que você e a Rocket estão fazendo pelos devs, parabéns por essa iniciativa, abraço!

[@douglasandrade5199]

Excelente!

[@ageurodrigues]

Que gostaria de mais conteúdo com Typescript daaa um Like aiii!

[@ozscosta]

TOP! A Rocketseat fazendo front-end parecer tão fácil!

[@lucasousi]

Você é rei Diego. Salvando a nós dev. React em algumas implementações que se tornam mais "complexas" com typescript. Obrigado pelo serviço prestado aos devs Brasileiros.

[@MatheusSouzaRigote]

Diego muito obrigado, era o que eu precisava aprender, coloca no GoStack, embora não seja obrigatório, todas as empresas que eu estou indo fazer entrevista pedem.

[@carlobatera]

Simplesmente sensacional. Sério mesmo. Por isso recomendo a Rocketseat. Parabéns Diego!

[@rafaelbarreto5157]

Ainda tem gente cara de pau que dá deslike, a rocket compartilha muito conteúdo com uma didática fantástica, parabéns pelo que estão fazendo. Abraco para o pessoal da rocket 🚀🚀🚀🚀

[@andersoncampos9659]

Quero muito mais conteúdo de typescript, manda bala mestre. Adorei o vídeo \o/

[@JrMarquesHD]

Que coisa mais linda

[@axielsantospereira3997]

Muito bom como sempre seus vídeos, Parabens a toda a empresa!

[@jtciuri07]

Esperando uma semana omnistack com typescript hehe

[@rhadamez]

será com typescript msm? aí sim meu parça

[@Joe-zw1qt]

Vim do futuro dizer q a trilha booster do nlw foi com ts

[@rramirr]

Irado!! Valeu Diego e Rocketseat!!! Mandem mais conteudo com TypeScript!! >D

[@codedropsjs9633]

esse Diego manja demais! eu ainda vou fazer esse curso da rockeset

[@rocketseat]

Faaaaala, Victor! Diego é fera, né? Opa, booora pra cima com a gente! Será muito bem vindo! 💜 🚀

[@AlanSilva-cm8wc]

Salvou minha vida..

[@cleysonsilva1828]

Eu vi todos os vídeos de TypeScript aqui Diego e a parte que mais me dá dor de cabeça, são as configurações para lint Por exemplo, quando iniciamos alguma configuração padrão como airbnb, ele fica mostrando erro pra tudo quanto é lado, isso me deixa desesperado e perdido, aí fico cantando milho até arrumar. Esses dias tive um problema de configuração, de divergência do prettier e o eslint, no fim desisti de tentar deixar igual! Fora o debug que me dá nos nervos kkkkkkkkk Isso pode ser parte de erro meu e aprendizagem, mas é isso, quem manda perguntar kkkkkk Tmj mano!

[@victorsapereira]

Usava TS quando trabalhava com Angular, hoje, trabalhando com React, tenho vontade de usar, mas algumas pessoas da equipe ainda tem uma certa resistência.. seria legal um conteúdo mostrando quais as vantagens em usar no React etc... pode abrir a cabeça de muita gente.

[@VinniiMiranda]

Acredito que o próximo passo para Rocketseat no que diz respeito a conteúdo Typescript e GraphQL serão obrigatórios, outra coisa que acho que seria interessante é trazer esse conhecimento para um cenário real, ou seja, uma aplicação mais robusta com funcionalidades de filtros, logs, auditoria e coisa do tipo, por que assim a pessoa já está de fato com conhecimento pra tocar um projeto sozinha. Grande abraço para toda equipe e excelente conteúdo como de costume.

[@mariachasi]

Não confunda as coisas, graphql nao tem nada a ver e não é tao importante quanto o typescript nos projetos.

[@geovanaxavier9567]

da hora em

[@rocketseat]

Valeeu, Geovana! 💜

[@viniciusflv]

Eu comecei a usar ts a uns 6 meses é mt bom pra "documentar" componentes através das interfaces das props

[@eltonmarques2]

Manda mais conteúdo de typeScript

[@caiohenrique1624]

Diego, faz um vídeo sobre estado global com useContext + useReducer

[@tuliocalil]

Fala mano, tudo bem ? eu acabei de gravar um vídeo sobre isso e to editando pra postar, se quiser dar uma força e conferir, já já sai! Não tenho toda qualidade da rocketseat mas to tentando ajudar :D

[@83923]

@@tuliocalil q m##da n da pra dar like 2x ......

[@tuliocalil]

😂😂

[@caiohenrique1624]

@@tuliocalil Com certeza mano!!!! Vou me inscrever no seu canal

[@CesarAugusto97000]

Obrigado Diego, eu estava meio receoso em usar TypeScript, mas mudei de idéia

[@amauriamauri8751]

Boa tarde. Parabéns pela explicação. Por favor, como faço para usar uma variável carregada dentro do React.FC fora no mesmo programa? Obrigado

[@augustomarcelo]

Essa próxima semana omnistack já poderia incluir typescript.

[@RaydenNnN]

Google: Você quis dizer typescript?

[@83923]

acho que o amigo gostaria de dizer TypeScript

[@augustomarcelo]

@@RaydenNnN Corretor automático: corrigido.

[@augustomarcelo]

@@83923 acertou! 10 pontos

[@ribeiro.evandro]

Acho isso muito complicado de acontecer, porque a semana OmniStack é voltada para quem está começando e ver um over view sobre as tecnologias e mostrar o que pode ser feito com cada uma, incluir algo desse nível nela, irá gerar uma barreira grande, algo que vai totalmente contra ao propósito dela...

[@GuiCayres]

Sensacional, estava procurando por isso obrigado!

[@JWDevTreinamentos]

Fala Diego, Excelente video, parabéns. Só gostaria de chamar a atenção a um pequeno detalhe, quando vc fez a tipagem do useState com [User], isso não significa um array aberto de User, isso indica um array de um único elemento e este elemento é um User, para um array aberto vc deve utilizar User[] ou Array. Esta notação [User] é utilizada para Tuplas, assim como é o retorno do useState: [T, (val: T) => void] um array fixo de 2 posições onde a primeira é o valor e a segunda é a função que altera o valor. Grande abraço e mais uma vez parabéns pelo vídeo.

[@RobsonSilva-ii4vy]

Saiu da jaula o mooooonstro. "Entrei na academia, tem que ser assim" kkkkkk raxei

[@sergioromero6646]

Excelente video sigue así 😉👍🏽

[@DouglasSilva-qm7wj]

Olá Diego, os conteúdos sobre React e Typescript são incríveis. Minha sugestão é a seguinte, você poderia fazer um video, só um know-how para iniciantes para que a galera tenha uma noção melhor, um road map, e assim conseguirem entender melhor os conceitos da "linguagem" Typescript. Diego, abraços e parabéns pelo excelente trabalho!!!

[@caiohenrique1624]

tem que ter um bootcamp full typescript

[@dr4kk0nnys6]

13:21 Ele iria ter me ajudado bastante se ele tivesse dito ou executado a loadData(), eu comecei com React recentemente, e eu não consigo fazer a chamada dessa função, porque se eu coloco ela dentro de App, vai chamar 1 trilhão de vezes, se eu colocar fora, acontece a mesma coisa, eu estou muito perdido no exemplo que ele passou *EDIT* Para quem estiver interessado, depois de ( 1 hora ? 2 horas ? Sei lá ) lendo documentação, o useEffect() faz o melhor papel useEffect(() => { loadData(); }, []);

[@rocketseat]

Boaa dev!! 🚀🚀

[@icazevedo]

Mais typescript!!

[@acm.marques]

Dele like e Diegão é cara mesmo

[@lucasfrutig4945]

Usar ou não usar o React FC? Já vi alguns artigos dizendo que seria melhor evitar o uso do FC, devido ao uso implícito do children

[@eduardoaraujo9336]

Cara um vídeo sobre Typescript com Sequelize seria muito bom, ou até demonstrando a utilização do Typescript no Node com um ORM próprio para ele

[@juniotsl]

Muito bom Diego! Depois poderia fazer um vídeo de teste unitário com hooks + typescript! Vlw

[@gregorispielmann]

@Rocketseat interessantíssimo esse uso do Typescript, o bootcamp 10 vai ter algo sobre isso? Já tenho um novo slogan para o meu uso do Typescript em 2020: "Vem monstro 2020" kkkk

[@dhanielr]

Ai pessoal, pra quem ainda não ta sabendo, acho que o type "RefForwardingComponent" foi descontinuado, acho que o type certo agora é o "ForwardRefRenderFunction". Se eu estiver falando besteira por favor me avisem kkkk ^^

[@rocketseat]

Faaala, Daniel! Vaaleu demais pela ajuda! 💜 😍

[@tiagomoura9228]

TOP

[@rocketseat]

Faaaaaala, Tiago! Valeu demais! 💜 🚀

[@gurmiguel]

Vídeo muito bom, principalmente a parte do useImperativeHandle, precisei esses dias e não conhecia (parti pra gambiarra mesmo :/). Só um caso que eu diria que divergiu um pouco, foi no createContext, em que o defaultData não é exatamente o valor inicial do context, na verdade isso fica por conta de quando você passa o context real pelo {...}. O defaultData, segundo esse comentário github.com/DefinitelyTyped/DefinitelyTyped/pull/24509#issuecomment-382213970 feito pelo Dan Abramov em pessoa, mostra que esse parâmetro serve para expor o valor padrão do context quando chamado fora da hierarquia do Provider, ou seja, sem que o context tenha realmente sido inicializado. Não deixa de ser um valor inicial, mas é mais correto definir valor default (se receber esse valor provavelmente tá errado rsrs). Uma forma de usar essa opção é pra quando você tem um componente que tem um comportamento diferente quando está dentro um context específico (exemplo: SingleCheckbox vs MultipleCheckbox dentro de um CheckboxGroup), isso permite dar a responsabilidade ao próprio componente de definir como ele irá se comportar baseado no contexto em que foi usado (nesse caso do exemplo se está dentro do CheckboxGroupContext). Espero que ajude alguém aí no futuro, e de novo... Excelente vídeo, valeu!! PS: Se eu tiver errado me corrijam por favor kkkk

[@lucasousi]

Cai na mesma situação, RefForwardingComponent e useImperativeHandle estavam complicados de usar kkk

[@humbertoromanojr]

Tem que ter mais conteúdos com TS, porque cada vez mais as empresas procuram devs que seja tem experiente em TS

[@LuizHenriqueCarvalhoMartarelli]

Manda mais conteúdo de typescript, por mais que seja mais verboso, nos blinda mais de erros bestas e comuns

[@lucasfloriani]

Voltei no video só pra dizer que lembrei que aqui tinha a explicação de useImperativeHandle xD

[@cristianomachado3687]

Primeiramente obrigado por todo o conhecimento compartilhado, Sim acredito que o typescript é um ótimo assunto para os próximos videos, inclusive, é possível desenvolver adonisjs + ts, pelo menos para o nosso codigo ?

[@itamar-jr-tech]

Já sofri um pouco aprendendo sozinho, senti necessidade de enviar props para componente pai. Agora já sei em que repositório encontrar caso sinta necessidade novamente. kkkk

[@BearkFearGamer]

Porque usou SnakeCase nas interfaces?

[@adamtak3128]

AHHHHHHHHHH I wish this was in English :( I really want to learn TS with react.

[@tninelives]

Gostaria de tirar uma dúvida, vcs que trabalham com react.. O que tá sendo mais usado depois do hooks? Vejo muitos tutoriais de react e tenho a impressão de serem antigos, usando class.. O que você usa no dia a dia? O povo fala tanto dos hooks que parece que só usam ele hoje.

[@vitorrocha2621]

Diego faça um mini projeto com react ou react native, meu receio é organização e configuração do projeto. Fiz o bootcamp e to tentando migrar pro TS

[@victorBrapp]

Estou estudando tantas aulas aqui na rocketseat que eu sonhei com o Diego kkkk

[@cesarmaranho]

Seria super interessante mostrar como seria o uso de typeScript na criação de componentes com styled components

[@ivensauro]

É a mesma coisa, só colocar o tipo dos props entre os generics

[@ivensauro]

O problema é em relação a filtragem de props, atualmente eu tenho uma função a mais na aplicação só para isso

Você usa o Redux Tollkit Diego?

[@83923]

Você podia fazer um vídeo de um crud usando typescript, hooks, debug ....

[@ThePedroThug]

Bootcamp em TS!

[@cactos1dnd]

Faz um a config completa para NodeJS e outro para react

[@cactos1dnd]

Vai ter typescript no bootcamp @Diego?

[@AnnddReloading]

MAIS TYPESCRIPT pfffffffffffffffffffffffffffffffff :D

[@Wiliammd]

puts mano, eu precisava do simples, do input alguém ai sabe como capturar valor de um input e passar para um variavel que possa ser acessado de outra tela? ex: meu Header possui um campo pesquisa quero pegar o texto digitado no input pesquisa e passar para uma variavel para utilizar na minha tela produtos

[@humbertoromanojr]

Todas as aulas tanto para React JS e React Native tem que usar TS, porque todas as vagas que eu vejo, pedem TypeScript

[@andrecoelho2775]

SHOW

[@tiagoborges7297]

Aqui é o projeto: "Vem monstro typescript 2020" hahaha

[@DigohStraight]

typescript

[@cedrio1027]

alguém poderia me dar uma mão aqui como que passo esse valor do input pro setUser, ja vi outros examples, mas não funciono interface User { email: string; password: string; } const [user, setUser] = useState(); function handlePostForm(event: React.FormEvent) { event.preventDefault(); } setUser(event.target.value)}/>

[@cedrio1027]

bom eu consegui resolver, não sei se da maneira certa, mas quem quiser tai import React, { useState, ChangeEvent, MouseEvent} from "react"; const [email, setEmail] = useState(''); const [password, setPassword] = useState(''); function handleClick(event: MouseEvent) { event.preventDefault(); console.log(`email: ${email}`) console.log(`password: ${password}`) } function handleChangeEmail(event : ChangeEvent) { event.preventDefault(); setEmail(event.target.value) } function handleChangePassword(event : ChangeEvent) { event.preventDefault(); setPassword(event.target.value) } loggin

[@DaniloDetoner]

Quer movimentar a renca de programadores online, apresente o Crawler ao mundo... bjs

[@MoraesDev]

como que ta o Projeto vem monstro ????

[@dialeletico]

Não compilou para nós vermos??? =( forte abraço!!!!!!

[@alefeio08]

Diego, não estou conseguindo usar o cupom "ROCKETSEAT2020" no Mongo Atlas

[@gilney.mathias]

Eu particularmente não gosto de TypeScript, na real tipagem em si em JS (se eu quisesse tipagem, iria pra java/c++ q eh bem mais simples a tipagem e ja vem de 'fabrica'), mas como parece ta ficando cada vez mais importante e necessário, acho que ta na hora de ir atras disso kkk'

[@IsaacBatistapns]

Vídeo de intro ao typescript up

[@fabioramatis2373]

Seria muito interessante ter tutoriais de sistemas mais reais com typescript

[@queziabalonecker]

qual é o nome desse tema?

[@Andrei-xb1pz]

Deixando um comentario sobre o quanto gostei do video

[@NetoHeitor]

O porque de utilizar o TypeScript?

[@samuelcustodiodasilva4470]

Faculdade para que, se temos a Rocketseat

[@paulohenriquedecastilho562]

Seria interessante conteúdo básico no sky lab...

[@lealws]

Faz uma semana omnistack fazendo 100% em typescript

[@rocketseat]

Valeeu pela sugestão, Felipe! 💜

[@victorgd]

Qual o tema que você usa no VS?

[@tiagocunhafernandes6607]

victor Dracula! Semana que vem na segunda feira (primeiro dia da semana omnistack) ele deve Mostar qual é como instalar. Não só o skin do viscose mas tb do terminal..

[@Snybool]

Bastamente = basta + somente 😂

[@rocketseat]

hahahaha 😅😅

[@felipetiagofp]

Dei like, tirei, e dei denovo.. porque merece 2 ! Agora vou assistir.. "to plageando alguem"

O código compilado n é performático, poderia ser mais otimizado

[@SuperEmmeEffe]

Muito bom, mas de vez em quando você deve parar e mostrar o resultado do que está explicando (como a página da web) ... não cancele nem mude de assunto

[@rocketseat]

Valeu pela dica! 💜

[@heudersena]

Oposição deu um disLike. #sacanagem

[@RaphaelJoer]

Mais typescript !!!

[@rocketseat]

Pode deixar! hahahha 💜