React Native for iOS Developers

by Aviv Rozenboim and Elad Aviv, iOS Devs - Soluto

React Native combines the best parts of web development and native mobile development. In this talk we're going to show you the React Native development experience, and how to easily integrate it with an existing iOS application

Transcript

1. React Native for iOS Developers An introduction
2. What’s about to happen? ! Introduction to React ◦ Components ◦ State and Props ◦ Examples ! React Native in iOS ◦ Live coding session ! A bit behind the scenes
3. Why React? Learn once, apply everywhere. Available on the web, mobile platforms, Windows 10 and Ubuntu.
4. React
5. React ! Components, components and more components
6. React ! Components, components and more components ! Change comes from within (and from parents)
7. Everything is a Component
8. Everything is a Component
9. Everything is a Component
10. Everything is a Component ! Components receive data and return a UI ◦ Reusable ◦ Composable ◦ Declarative (not imperative!)
11. Render cycle - props {name: “aviv”} HelloMessage component return ( <span>Hello {this.props.name}</ span> ); <span>Hello aviv</span> props render
12. Render cycle - props {name: “aviv”} HelloMessage component return ( <span>Hello {this.props.name}</ span> ); <span>Hello aviv</span> props render
13. Render cycle - props {name: “aviv”} HelloMessage component return ( <span>Hello {this.props.name}</ span> ); <span>Hello aviv</span> “elad” props render
14. Render cycle - props {name: “aviv”} HelloMessage component return ( <span>Hello {this.props.name}</ span> ); <span>Hello aviv</span> “elad” props render
15. Render cycle - props {name: “aviv”} HelloMessage component return ( <span>Hello {this.props.name}</ span> ); <span>Hello aviv</span> “elad” props render
16. Render cycle - props {name: “aviv”} HelloMessage component return ( <span>Hello {this.props.name}</ span> ); <span>Hello aviv</span> “elad” elad props render
17. Render cycle example
18. Render cycle - state
19. Render cycle - state
20. Render cycle - state
21. Render cycle - state
22. Render cycle examples State http://codepen.io/avivsoluto/pen/ZOjdoj?editors=0010 Money counter http://codepen.io/avivsoluto/pen/JKBQvV?editors=0010
23. Questions so far?
24. React Native & Live Coding Enter Elad on stage right.
25. What is React Native “React Native lets you build mobile apps using only JavaScript. It uses the same design as React, letting you compose a rich mobile UI from declarative components.” - Facebook
26. Easy integration Pluggable anywhere in an existing app or website Can be used to create a whole view or just one UI element
27. Let’s write some code!
28. Javascript
29. Questions? (We’re done now)
30. Thank you! Elad Aviv elada@soluto.com Aviv Rozenboim aviv@soluto.com We’re hiring!