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
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/
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
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.
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.
18. How does this work?
19. MAGIC
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
27. Styles
28. CSS in JavaScript
31. Native APIs
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?
44. Open Sourced https://github.com/hswolff/ GitHubReactNative
45. $ npm install -g react-native-cli
47. $ react-native init GitHubReactNative
51. Let’s run it!
52. $ react-native run-ios
55. $ react-native run-android
61. Walkthrough
77. Development Tips
78. Live Reload
80. Hot Reloading
82. Inspector
84. Chrome Debugger
86. Documentation
87. Going Out On Your Own.
88. Still very active project. Multiple commits pushed daily.
90. UIExplorer https://github.com/facebook/react-native/tree/ master/Examples/UIExplorer#uiexplorer
92. https://github.com/facebook/react-native/blob/master/ Examples/UIExplorer/ViewExample.js#L145
94. https://github.com/facebook/react-native/blob/ master/Examples/UIExplorer/NetInfoExample.js#L67
95. Code!
96. Going Native with React Native hswolff @hswolff