React Native é um framework desenvolvido pelo Facebook para construir aplicativos nativos multiplataforma usando apenas JavaScript. Ele permite compartilhar 85% do código entre Android e iOS enquanto renderiza componentes nativos através de uma ponte para código nativo. Embora escrito em JavaScript, React Native gera aplicativos completamente nativos com desempenho similar ao desenvolvimento nativo puro.

1. Desenvolvendo
aplicativos nativos com
React Native
@luisfmsouz

2. Learn once,
write anywhere.

3. Luís
Felipe
Souza
@luisfmsouz

4. meetupdesigncampinas.com

6. developer at

7. O que é React Native?

8. O que não é React
Native?

9. Não é Híbrido!

11. RN vs Híbrido
● RN não usa WebView, a
renderização é nativa
● Performance do React
Native tende a ser melhor
● Os dois são open source e
tem um ecossistema bem
movimentado
Ionic, por exemplo

12. Não é transpiled!

13. JavaScript Native Code

14. RN vs Nativo
● Nativo não tem
portabilidade de código
● Desenvolvimento apenas
com linguagem nativa
● Nativo tem performance
um pouco melhor
Nativo iOS ou Android

15. Não é PWA!

17. RN vs PWA
● PWA não está na App ou
Play Store
● Ainda não tem acesso a
todas as APIs em todos as
plataformas
● Sem nenhum tipo de
linguagem nativa, usa API
do browser
PWA for the win!

18. O que é React Native?

19. React Native
● Teve início em Hackathon
em meados de 2013
● Em março de 2015 se
tornou open source
● 4º repositório com mais
estrelas no GitHub. +55k
● Facebook e Microsoft
RN for the win!

20. React Native is a framework developed by
Facebook, which allows you to build a
native mobile app written entirely in
JavaScript.

21. React Native is a framework developed by
Facebook, which allows you to build a
native mobile app written entirely in
JavaScript.

22. Sim, é nativo!

23. React Native is a framework developed by
Facebook, which allows you to build a
native mobile app written entirely in
JavaScript.

24. "ah, JavaScript?"

25. JavaScript

26. Learn once,
write anywhere.

32. Como isso é possível?

33. Arquitetura do
React Native

34. UI Thread
● Shadow Queue
● Layout
Main Thread
● Objective-C
● Swift
● Java
JS Thread
● JS Core

35. Native Code
JavaScript Runtime
Environment
React
Native
iOS or Android Operating System
Bridge

36. Native Code
JavaScript Runtime
Environment
React Native
Button
iOS or Android Operating System
Bridge
Native Button
React Native
TextInput
Native
TextInput

37. Multiplataforma

38. Android
ReactNative
iOS

39. ~85% de compartilhamento de
código

40. Como é o código?

41. http://slides.com/lnfnunes/react-native#/17

42. sem CSS

43. http://slides.com/lnfnunes/react-native#/19

44. sem HTML

45. http://slides.com/lnfnunes/react-native#/18

46. React Native é uma maneira de
renderizar componentes nativos
escritos em JavaScript

47. Experiência de
desenvolvimento

48. Praticidade

51. Debugging

53. Redux
(avançado)

55. Devo usar React
Native?

57. Devo usar?
● Tempo limitado
● Precisa desenvolver para
Android e iOS
● O time não tem muita
experiência mobile
● Time com experiência web!

58. ● Tempo ilimitado
● Desenvolver só para
Android
● Desenvolver só para iOS
● Time com experiência
mobile
Devo usar?

59. Devo usar React
Native?

60. Sim! Dê uma chance
ao React Native!

61. React Native, 2
Created by Facebook

62. There’s nothing to fear
about React Native!

63. Obrigado!

64. Dojo de React Native

65. Dúvidas?

66. twitter.com/@magnetisbkstage
medium.com/magnetis-backstage

67. https://medium.com/magnetis-backstage/5-things-that-youll-learn-when-you-start-to-use-react-native-1ed601e6eac

68. Links interessantes
● https://medium.com/magnetis-backstage/5-things-that-youll-learn-w
hen-you-start-to-use-react-native-1ed601e6eac
● https://www.logicroom.co/react-native-architecture-explained/
● https://julyrapid.com/hybrid-vs-native-mobile-app-decide-5-minutes/