Writing Native Mobile Apps in JavaScript
A JavaScript library for building user interfaces.
Virtual Dom
Every time you call setState method, a new virtual DOM is generated, this is diffed with the old virtual DOM producing a minimum set of changes on real DOM
Virtual Dom
Data Flow - MVC
Traditional Data Flow
Data Flow - React
States and Props
React Data Flow
Data Flow - React
Components can either be passed data (PROPS), or materialize their own state and manage it over time (STATES)
Data Flow - React
has no:
Only components!
Everything is a component
var React = require('react');
var MyComponent = React.createClass({
getInitialState: function() {
return {
name: "School Status"
}
},
componentWillMount: function() {
},
componentDidMount: function() {
},
render: function() {
return (
<div>{this.state.name}</div>
);
}
});
React.render(MyComponent, document.getElementById('example'));
Example React Component
Now available as <MyComponent />
JavaScript syntax extension that looks similar to XML
"Because we are smart - and we know what we're doing!" - Facebook Employee, SF
Who's using React?
Atom IDE, Facebook Messenger,
Instagram, Whatsapp web, Yahoo, Airbnb,
Netflix, Hipchat, Paypal, SchoolStatus,
and more...
A framework for building native apps using React & JavaScript.
Benefits:
Drawbacks:
• Will still require it's own codebase
• You (or someone you know) will still need to understand iOS/Android UI Elements Views/Template Libraries
• Good at CSS Styling? No One Cares.
• Learn Once. Write Differently Everywhere.
• Not as easy as PhoneGap.
• Still Very Early Days.
Getting Set Up
To start a project:
cd to working directory
react-native init myApp
cd myApp
open myApp.xcodeproj
Follow me @dabit3