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

F863e9eb811851834773398e72614dc1?s=128

Harry Wolff

May 06, 2016
Tweet

Transcript

  1. Going Native with React Native hswolff @hswolff

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

    Twitter @ hswolff GitHub @ hswolff
  3. What do I know about React Native?

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

  5. None
  6. What is React Native? Let's Build A React Native App!

    Going Out On Your Own.
  7. What is React Native?

  8. A framework for building native apps with React

  9. React Native is built on top of React

  10. Hello World

  11. None
  12. None
  13. None
  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.
  15. None
  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.
  17. None
  18. How does this work?

  19. MAGIC

  20. None
  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/
  22. How is React Native different than React?

  23. Components

  24. None
  25. None
  26. None
  27. Styles

  28. CSS in JavaScript

  29. None
  30. None
  31. Native APIs

  32. None
  33. None
  34. JavaScript Environment

  35. No DOM

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

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

    Loading
  38. npm friendly

  39. lodash redux D3 RxJS

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

  41. Let's Build A React Native App!

  42. What are we making?

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

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

  46. None
  47. $ react-native init GitHubReactNative

  48. None
  49. None
  50. None
  51. Let’s run it!

  52. $ react-native run-ios

  53. None
  54. None
  55. $ react-native run-android

  56. None
  57. None
  58. None
  59. None
  60. None
  61. Walkthrough

  62. None
  63. None
  64. None
  65. None
  66. None
  67. None
  68. None
  69. None
  70. None
  71. None
  72. None
  73. None
  74. None
  75. None
  76. None
  77. Development Tips

  78. Live Reload

  79. None
  80. Hot Reloading

  81. None
  82. Inspector

  83. None
  84. Chrome Debugger

  85. None
  86. Documentation

  87. Going Out On Your Own.

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

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

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

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

  95. Code!

  96. Going Native with React Native hswolff @hswolff