Terceiro encontro sobre React Native em Porto Alegre, Apresentação de como utilizar a ferramenta "create-react-native-app" de uma forma organizada e testável.

1. Como aproveitar a stack completa do
“Create React Native App” usando Redux
React Native - Testável e organizado

2. Dev IoT, Web Fullstack (mais front-end), Mobile
André Antunes Vieira

3. Mais de 300.000 aulas/dia
Média de 4 aulas/s

4. Um pouco de história

5. 01
- Técnico em eletrônica / Engenharia elétrica
Um pouco sobre mim
mesalva.com
Como fui parar na WEB
- Web - Fullstack
- IoT - Robôs + P&D
- Tentativa mobile
- Crescimento Me Salva! + Especialização front-end

6. 01 O mundo encantado do JavaScript
mesalva.com
O mundo encantado do JavaScript

7. 01
- Tentativa mobile 2
Um pouco sobre mim
mesalva.com
Como fui parar na WEB
- Redescoberta do React e do React Native
- De volta ao front

8. 01 Um pouco sobre mim
mesalva.com
Como fui parar na WEB

9. 01
- Porque redescoberta?
Um pouco sobre mim
mesalva.com
Como fui parar na WEB
- História do front-end

10. 02
- Sites baseados em SERVER SIDE ONLY
WEB até os anos 2000
mesalva.com
WEB da idade das pedras
- Javascript era o patinho feio
- Quase nada rolava em Client Side
- Era lento
- Incompatível
- Não confiável (Single Thread)

11. 02
- A lentidão já não era mais tão grande
2000 - 2010
mesalva.com
Javascript = comportamento
- Surgiram bibliotecas (muitas)
- Se confiava o suficiente para deixar o JS cuidar do “comportamento”
- jQuery
- Se brincava com AJAX

12. 03
- AJAX > Reload
2005-2013
mesalva.com
WEB Applications
- Agora client gerenciava:
- Maior complexidade
- Router
- Requests (API)
- Comportamento
- Backbone, Ember, Angular JS ( 1 )

13. 04
- Cultura de reusabilidade
2013 - 2015
mesalva.com
WEB Components
- Virtual DOM
- Componentização
- NodeJS, React, Angular, VueJS, CycleJS...
- Javascript em todas as áreas
- Ambiente de desenvolvimento Front-end
- Atomic Design
- Programação reativa

14. 05
- Mais Smartphones, menos PCs
2015 - Hoje
mesalva.com
Mundo virando Mobile First
- Reusabilidade
- Componentização
- Multiplataforma
- Atomic Design
- Programação reativa
- Flexbox

15. 06
- HTML5 (Cordova)
Tecnologias Multi-plataforma
mesalva.com
Lado bom e ruim
- Compilados (Xamarim)
- Ideia boa, execução terrível
- Coda em uma linguagem, gera 2
- Interpretados (React Native)
- Processa JS em tempo real dentro do APP

16. 07
- NodeJS
Ambiente de desenvolvimento
mesalva.com
Todo desenvolvedor deve ter um
- Yarn
- Bibliotecas!
Composer
Bundle
Cocoapods
...

17. 08 Preciso saber tudo isso?
mesalva.com
Sim e não

18. Criando um APP do Zero

19. 01
- react-native-cli
Por onde eu começo?
mesalva.com
Por algum gerador de stack completo
- expo
- create-react-native-app

20. 02
- Instalar NodeJs
Preparando seu computador
mesalva.com
Acredite, funciona até no Windows
- Instalar create-react-native-app
- npm install -g create-react-native-app
- macOS: brew install node
- linux: sudo apt-get install node
- windows: http://nodejs.org

21. 03
- É só rodar o comando
Criando um projeto
mesalva.com
Não tem como ser mais fácil
- create-react-native-app {nome-do-app}
- Vai instalar:
- Expo (Simulador + servidor local + bibliotecas expo)
- Jest (Testes unitários + coverage)
- Gerador de build
- Simulador iOS e Android interligado as IDEs
- Babel (Traspilador javascript)

22. Construindo um APP simples

23. 01 Tá criei o projeto, e agora?
mesalva.com
É, naquela tela preta

24. mesalva.com

25. 02 Ta e nas pastas
mesalva.com
O que vem na pasta?

26. 03 Já dá pra ver algo funcionando?
mesalva.com
Claro que dá!
- npm start
- Roda um servidor expo local
- npm run ios (só no mac)
- Roda um servidor expo local e abre o simulador do Xcode
já no expo
- npm run android (qualquer pc com android studio instalado)
- Roda um servidor expo local e abre o simulador do
Android já no expo

27. 04 npm start
mesalva.com
Só isso?
- npm start

28. 04 npm start
mesalva.com
Só isso?

29. 04 npm start
mesalva.com
Só isso?

30. 05 npm run ios
mesalva.com
Só isso, mesmo?
- npm run ios
- Apenas em macOS

31. 05
mesalva.com

32. Olá mundo

33. 01 Live coding: Olá mundo
mesalva.com
Pelo menos um olá mundo não deve ser complicado

34. 02 E a estilização
mesalva.com
Tipo um CSS

35. 03 O que são flexbox
mesalva.com
O encantado mundo das flexbox
- Organização entre elementos pais e elementos filhos
- https://medium.freecodecamp.com/an-animated-guide-to-flexbox-d280cf6afc35
- http://flexboxfroggy.com
- https://codepen.io/osublake/full/dMLQJr

36. 04 E os tais componentes?
mesalva.com
Como reutilizar código
- Forma de agrupar muito código num único lugar
- Recebem e exportam propriedades (parâmetros e funções)
- Trabalham com o conceito de “estado”

37. Organização e testes

38. 01 Separação de código
mesalva.com
Pq tudo junto e misturado é bagunça

39. 02 Qual a melhor forma de separar?
mesalva.com
Cada um tem a sua
- Organização por estrutura
- Organização por responsabilidade

40. 03 E os testes?
mesalva.com
Testo na mão, não dá nada, e confiável...
- npm test

41. 03 E os testes?
mesalva.com
Testo na mão, não dá nada, e confiável...

42. 03 Testando snapshots
mesalva.com
O que, testar view? Sério?
- npm test

43. 03 Testando snapshots
mesalva.com
Testo na mão, não dá nada, e confiável...
- npm test

44. 03 Testando snapshots
mesalva.com
Testo na mão, não dá nada, e confiável...
- npm test

45. 04 Tem cobertura de código?
mesalva.com
Claro que tem
- npm test -- --coverage

46. 04 Tem cobertura de código?
mesalva.com
Claro que tem
- npm test -- --coverage

47. 04 Tem cobertura de código?
mesalva.com
Claro que tem
- npm test -- --coverage

48. 05 Quero publicar, como
faz?
mesalva.com
- npm run eject
- Vai transformar o projeto em um projeto:
- react-native-cli
ou
- expo

49. 05 Quero publicar, como
faz?
mesalva.com
- npm run eject

50. André Antunes Vieira
github.com/AndreAntunesVieira
andreantunesv@gmail.com