React Native
Overview
Bonnie Eisenman
hack.summit() 2016
Hi, I'm Bonnie.
So what is React Native?
Using JavaScript to write truly native, cross-platform apps for iOS & Android.
This is exciting.
React is a JavaScript library
for building user interfaces.
Your tools should solve real problems.
Why React?
Components
var HelloMessage = React.createClass({
render: function() {
return <div>Hello {this.props.name}</div>;
}
});
...
<HelloMessage name="Bonnie"/>
State Change
Compute Diff
Re-render
Virtual DOM
Browser DOM
Wait, why render to the DOM at all?
State Change
Compute Diff
Re-render
Virtual DOM
Host platform's rendering API
Describe your UI with React,
& React renders it for you.
React Native is
actually native.
React vs React Native
is just
web vs mobile
Browser DOM versus mobile
You're invoking real APIs!
Using React Native
<DatePickerIOS
date={this.state.date}
mode="date"
/>
CSS on mobile?!
(no but like actually)
container: {
flex: 1,
alignItems: 'center',
paddingTop: 30
}
Developer Setup
It's just normal mobile dev, with JavaScript.
Over-the-air updates!
Working with React Native
So what's it mean?
Mobile is hard.
Developer experience matters.
Your tools should solve real problems.
React Native Advantages
So what's the catch?
JavaScript
This is the real deal.
Developer experience matters.
What's Next?
Questions?