React Hooks 101 feat. Big Brother Brasil

Código para paredão: https://codesandbox.io/s/bigwall-y6wmn
Código para final: https://codesandbox.io/s/final-4392m
Código para paredão com Hooks: https://codesandbox.io/s/bigwall-hooks-fckty
Código para final com Hooks: https://codesandbox.io/s/final-hooks-vu4lw
Código com paredão + contagem de votos via React Effects: https://codesandbox.io/s/bigwall-hooks-effects-rydfo

---

https://twitter.com/santosmrclo

Transcript

1. Marcelo Santos React Hooks 101 feat. 
 Big Brother Brasil
2. Introdução Olá, Mundo! • Nome: Marcelo Santos • Cidade: Caçapava/SP • Idade: 28 • Cor favorita: vermelho • Um sonho?: a paz mundial • Interesses: reality shows, música erudita, filmes de terror B, literatura clássica
3. Introdução • Esta apresentação representa, sim, os pensamentos do seu criador, e é extremamente parcial; • De onde veio essa apresentação? Disclaimer + Onde Tudo Começou Comentário em Code Review
4. O que é React? Primeiras Coisas Primeiro
5. https://pt-br.reactjs.org/ “Uma biblioteca JavaScript para criar interfaces de usuário”
6. O que é React na vida real? Primeiras Coisas Primeiro
7. https://www.instagram.com/
8. O que é Estado? Primeiras Coisas Primeiro
10. https://reduxbook.com/ “Estado é o momento atual no tempo de uma aplicação”
11. https://reduxbook.com/ UserInterface = view(state)
12. Código Código Código Código
13. Contexto: Big Brother Brasil • 20 pessoas confinadas numa casa por 90 dias disputando um prêmio de UM MILHÃO E MEIO DE REAIS; • A cada semana é formado um paredão: três pessoas são mandadas pela casa a julgamento para o público decidir quem deve ser eliminado do programa; • O mais votado pelo público é o eliminado; • A final do programa é composta pelas três pessoas que restarem na casa; • Na final, quem for o mais votado leva a bolada. O que é, qual a dinâmica e como é a final?
14. Código para paredão https://codesandbox.io/s/bigwall-y6wmn
15. Código para final https://codesandbox.io/s/final-4392m
16. Código para paredão e final • Ambos os códigos compartilham o mesmo funcionamento; • Componente simples exige muito código; • Chatinho de se reaproveitar. Lógica e pontos negativos
17. !!! React Hooks to the Rescue
18. https://reactjs.org/docs/hooks-intro.html “Hooks let you use state and other React features without writing a class.”
19. Código para paredão com Hooks https://codesandbox.io/s/bigwall-hooks-fckty
20. Código para final com Hooks https://codesandbox.io/s/final-hooks-vu4lw
21. Código para paredão e final com Hooks • Ambos os códigos compartilham o mesmo funcionamento (hook); • usePoolHook; • Fácil de se reaproveitar; • Possibilidade de se usar estados em funções comuns. Forma e conteúdo
22. Efeitos Colaterais de um jeito simples Bônus: React Effects
23. https://reactjs.org/docs/hooks-effect.html “The Effect Hook lets you perform side effects in function components”
24. Código com paredão + contagem de votos via React Effects https://codesandbox.io/s/bigwall-hooks-effects-rydfo
25. Bônus: React Effects • Um componente funcional é… uma função que retorna conteúdo a ser renderizado; • Ela é executada pelo React a cada atualização de estado com novos valores; • Ao fim de cada renderização, seus efeitos colaterais também são executados para sincronizar outros pontos da aplicação com as mudanças; • É possível controlar se um efeito deve ser executado por meio de de dependências. Um mundo em que os efeitos colaterais de uma mudança são visíveis
26. Referências • https://blog.rocketseat.com.br/react-hooks/ • https://overreacted.io/a-complete-guide-to-useeffect/ • https://reactjs.org/docs/ • https://reduxbook.com/ Não foram as vozes da minha cabeça
27. FIM.