Transferir como PDF, PPTX
Carregado porAndré Antunes Vieira
React native - testável e organizado
O documento aborda a utilização completa do 'create react native app' com Redux, destacando sua estrutura de desenvolvimento testável e organizada. O autor, André Antunes Vieira, também compartilha seu percurso profissional e as transformações na web, enfatizando a evolução do JavaScript e o cenário mobile. Além disso, são apresentadas orientações práticas para iniciar um projeto em React Native, incluindo instalação, configuração e testes.
React native - testável e organizado
- 1. Como aproveitar astack completa do “Create React Native App” usando Redux React Native - Testável e organizado
- 2. Dev IoT, WebFullstack (mais front-end), Mobile André Antunes Vieira
- 3. Mais de 300.000aulas/dia Média de 4 aulas/s
- 4. Um pouco dehistória
- 5. 01 - Técnico emeletrô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 mundoencantado do JavaScript mesalva.com O mundo encantado do JavaScript
- 7. 01 - Tentativa mobile2 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 poucosobre mim mesalva.com Como fui parar na WEB
- 9. 01 - Porque redescoberta? Umpouco sobre mim mesalva.com Como fui parar na WEB - História do front-end
- 10. 02 - Sites baseadosem 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ãojá 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 dereusabilidade 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) TecnologiasMulti-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 dedesenvolvimento mesalva.com Todo desenvolvedor deve ter um - Yarn - Bibliotecas! Composer Bundle Cocoapods ...
- 17. 08 Preciso sabertudo isso? mesalva.com Sim e não
- 18. Criando um APPdo Zero
- 19. 01 - react-native-cli Por ondeeu começo? mesalva.com Por algum gerador de stack completo - expo - create-react-native-app
- 20. 02 - Instalar NodeJs Preparandoseu 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 APPsimples
- 23. 01 Tá crieio projeto, e agora? mesalva.com É, naquela tela preta
- 24.
- 25. 02 Ta enas 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.
- 29.
- 30. 05 npm runios mesalva.com Só isso, mesmo? - npm run ios - Apenas em macOS
- 31.
- 32.
- 33. 01 Live coding:Olá mundo mesalva.com Pelo menos um olá mundo não deve ser complicado
- 34. 02 E aestilização mesalva.com Tipo um CSS
- 35. 03 O quesã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 ostais 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.
- 38. 01 Separação decódigo mesalva.com Pq tudo junto e misturado é bagunça
- 39. 02 Qual amelhor forma de separar? mesalva.com Cada um tem a sua - Organização por estrutura - Organização por responsabilidade
- 40. 03 E ostestes? mesalva.com Testo na mão, não dá nada, e confiável... - npm test
- 41. 03 E ostestes? mesalva.com Testo na mão, não dá nada, e confiável...
- 42. 03 Testando snapshots mesalva.com Oque, testar view? Sério? - npm test
- 43. 03 Testando snapshots mesalva.com Testona mão, não dá nada, e confiável... - npm test
- 44. 03 Testando snapshots mesalva.com Testona mão, não dá nada, e confiável... - npm test
- 45. 04 Tem coberturade código? mesalva.com Claro que tem - npm test -- --coverage
- 46. 04 Tem coberturade código? mesalva.com Claro que tem - npm test -- --coverage
- 47. 04 Tem coberturade 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.