$30 off During Our Annual Pro Sale. View Details »

Going Native with React Native

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

Harry Wolff

May 06, 2016
Tweet

More Decks by Harry Wolff

Other Decks in Programming

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