Um workshop de React dado para os alunos do CIn/UFPE durante o evento HackaPET 2019.

1. HackaPET 2019
React
Maíra Bello

2. Setup

3. Ambiente
• Node.js
• Terminal
• Editor de texto (Sublime, VS Code, Atom)
• Browser

4. JavaScript

6. JavaScript
• Roda na máquina do usuário (no browser)
• Single-threaded
• Não acessa IO da máquina (dados, rede, etc)
• Maior vilão da performance: internet

8. JavaScript - Código
• Múltiplos paradigmas: eventos, funcional, baseada em
protótipos, orientada a objetos).
• Sem tipos.
• Funções, funções, funções.
• EcmaScript 2015: classes, import/export, etc.

9. StackOverflow Trends
Jobs

10. React

11. Componentes

14. Biblioteca de componentes externa

15. Ant Design
https://ant.design/docs/react/introduce

16. Eventos & State

18. JS in JSX

19. Children

20. Prática

21. Prática 1

22. Prática 2

23. Chamar APIs externas

24. https://docs.thecatapi.com/
Muitas APIs de graça

25. Cominicação: filho -> pai

27. O que falta?
• Aprender JavaScript: closures, promises, etc.
• Múltiplas páginas (routing): react-router.
• Conceitos mais avançados (porém importantes): refs, prop
types, lifecycle, forms, context, hooks, e muitos mais.
• State management: context API, redux, etc.

28. Learn JavaScript Online
https://learnjavascript.online/
freecodecamp
https://www.freecodecamp.org/
More
JS/React
React Docs
https://reactjs.org/docs/getting-started.html
React Router
https://reacttraining.com/react-router/
Public APIs (for testing)
https://github.com/public-apis/public-apis

29. Mas não precisa ser assim. acreditamos que
a tecnologia pode entregar cada vez mais
conveniência sem comprometer a nossa
privacidade.