Going Native with React Native

Talk originally given at Syntax Con 2016 in Charleston, SC.

https://2016.syntaxcon.com/session/going-mobile-with-react-native/

Code example: https://github.com/hswolff/GitHubReactNative

Talk description:
Are you a front end engineer who wants to make the move to mobile development? Then you’ve come to the right place. Learn how to get up and running with React Native to take all you know about React from the web and put it onto your mobile device. You may be surprised to find that you know more mobile development than you think you do!

Learn how to get up and running with a new application on iOS and Android
Learn how to take most of what you know from the web and put it onto a mobile application
Learn how to properly architect a React Native application

Transcript

1. Going Native with
   React Native
   hswolff
   @hswolff
   

   View Slide

2. Harry Wolff
   Web Dev Lead @ TodayTix.com
   Blog @ hswolff.com
   Twitter @ hswolff
   GitHub @ hswolff
   

   View Slide

3. What do I know about
   React Native?
   

   View Slide

4. Chartbeat iOS
   http://blog.chartbeat.com/2016/04/07/say-hello-to-the-all-new-chartbeat-ios-app/
   

   View Slide

5. View Slide

6. What is React Native?
   Let's Build A React Native App!
   Going Out On Your Own.
   

   View Slide

7. What is React
   Native?
   

   View Slide

8. A framework for building
   native apps with React
   

   View Slide

9. React Native
   is built on top of
   React
   

   View Slide

10. Hello World
    

    View Slide

11. View Slide

12. View Slide

13. View Slide

14. React lets you declaratively
    describe your UI.
    React handles how to
    render the content.
    All you need to know is how to
    use the available components.
    

    View Slide

15. View Slide

16. React React Native lets you
    declaratively describe your UI.
    React React Native handles how
    to render the content.
    All you need to know is how to
    use the available components.
    

    View Slide

17. View Slide

18. How does this work?
    

    View Slide

19. MAGIC
    

    View Slide

20. View Slide

21. React Native
    …creates a bridge between
    JavaScript and Native Code (iOS / Android)
    …and handles passing information
    between the two environments
    More details: http://tadeuzagallo.com/
    blog/react-native-bridge/
    

    View Slide

22. How is React Native
    different than React?
    

    View Slide

23. Components
    

    View Slide

24. View Slide

25. View Slide

26. View Slide

27. Styles
    

    View Slide

28. CSS in JavaScript
    

    View Slide

29. View Slide

30. View Slide

31. Native APIs
    

    View Slide

32. View Slide

33. View Slide

34. JavaScript Environment
    

    View Slide

35. No DOM
    

    View Slide

36. React Native Packager
    https://github.com/facebook/react-
    native/tree/master/packager
    

    View Slide

37. React Native Packager
    ES2015+ Syntax
    CommonJS & ES2015 Modules
    Asset Loading
    

    View Slide

38. npm friendly
    

    View Slide

39. lodash
    redux
    D3
    RxJS
    

    View Slide

40. Past that, just like a React app.
    Seriously.
    

    View Slide

41. Let's Build A React
    Native App!
    

    View Slide

42. What are we making?
    

    View Slide

43. View Slide

44. Open Sourced
    https://github.com/hswolff/
    GitHubReactNative
    

    View Slide

45. $ npm install -g react-native-cli
    

    View Slide

46. View Slide

47. $ react-native init GitHubReactNative
    

    View Slide

48. View Slide

49. View Slide

50. View Slide

51. Let’s run it!
    

    View Slide

52. $ react-native run-ios
    

    View Slide

53. View Slide

54. View Slide

55. $ react-native run-android
    

    View Slide

56. View Slide

57. View Slide

58. View Slide

59. View Slide

60. View Slide

61. Walkthrough
    

    View Slide

62. View Slide

63. View Slide

64. View Slide

65. View Slide

66. View Slide

67. View Slide

68. View Slide

69. View Slide

70. View Slide

71. View Slide

72. View Slide

73. View Slide

74. View Slide

75. View Slide

76. View Slide

77. Development Tips
    

    View Slide

78. Live Reload
    

    View Slide

79. View Slide

80. Hot Reloading
    

    View Slide

81. View Slide

82. Inspector
    

    View Slide

83. View Slide

84. Chrome Debugger
    

    View Slide

85. View Slide

86. Documentation
    

    View Slide

87. Going Out On
    Your Own.
    

    View Slide

88. Still very active project.
    Multiple commits pushed daily.
    

    View Slide

89. View Slide

90. UIExplorer
    https://github.com/facebook/react-native/tree/
    master/Examples/UIExplorer#uiexplorer
    

    View Slide

91. View Slide

92. https://github.com/facebook/react-native/blob/master/
    Examples/UIExplorer/ViewExample.js#L145
    

    View Slide

93. View Slide

94. https://github.com/facebook/react-native/blob/
    master/Examples/UIExplorer/NetInfoExample.js#L67
    

    View Slide

95. Code!
    

    View Slide

96. Going Native with
    React Native
    hswolff
    @hswolff
    

    View Slide