React is the V in MVC
Use whatever framework you like
On data changes,
the whole DOM
is rerendered.
90s style refresh!
But … that's slow!
- Render virtual DOM
- Render real DOM
- Data changes
- Rerender virtual DOM
- Update real DOM
Minimal DOM operations
Side effect:
Server side rendering
Everything is a component
var Hello = React.createClass({
render: function() {
return <div>Hello {this.props.name}</div>;
}
});
React.renderComponent(<Hello name="HH.js" />, document.body);
var Hello = React.createClass({
render: function() {
return <div>Hello {this.props.name}</div>;
}
});
React.renderComponent(<Hello name="HH.js" />, document.body);
var Hello = React.createClass({
render: function() {
return <div>Hello {this.props.name}</div>;
}
});
React.renderComponent(<Hello name="HH.js" />, document.body);
var Hello = React.createClass({
render: function() {
return <div>Hello {this.props.name}</div>;
}
});
React.renderComponent(<Hello name="HH.js" />, document.body);
var Hello = React.createClass({
render: function() {
return <div>Hello {this.props.name}</div>;
}
});
React.renderComponent(<Hello name="HH.js" />, document.body);
Introducing:
JSX
Write JavaScript with HTML syntax.
Introducing:
JSX
It is not required.
var Hello = React.createClass({
render: function() {
return <div>Hello {this.props.name}</div>;
}
});
React.renderComponent(<Hello name="HH.js" />, document.body);
var Hello = React.createClass({displayName: 'Hello',
render: function() {
return React.DOM.div(null, "Hello ", this.props.name);
}
});
React.renderComponent(Hello({name: "HH.js"}), document.body);
Components
are just functions
The output should be the same at any time
What about separation of concerns?
Separating concerns.
React only fulfills the View.
Separating concerns.
Markup and layout depend on each other.
Separating concerns.
Not separating technologies.
Components
have a lifecycle
getDefaultProps()
getInitialState()
componentWillMount()
componentDidMount()
componentWillReceiveProps()
shouldComponentUpdate()
componentWillUpdate()
componentDidUpdate()
componentWillUnmount()
Components
have props and state
Changeable state kept in a component
state can be passed to child components and is available as prop
It's been battle tested at:
- Instagram web
- Facebook (some parts)
- Atom editor
- Yahoo Mail
Learn once, write anywhere
Build native applications with JavaScript
Use the standard platform components
var React = require('react-native');
var { TabBarIOS, NavigatorIOS } = React;
var App = React.createClass({
render: function() {return (
<TabBarIOS>
<TabBarIOS.Item title="React Native" selected={true}>
<NavigatorIOS initialRoute={{ title: 'React Native' }} />
</TabBarIOS.Item>
</TabBarIOS>
);}
});
var React = require('react-native');
var { TabBarIOS, NavigatorIOS } = React;
var App = React.createClass({
render: function() {return (
<TabBarIOS>
<TabBarIOS.Item title="React Native" selected={true}>
<NavigatorIOS initialRoute={{ title: 'React Native' }} />
</TabBarIOS.Item>
</TabBarIOS>
);}
});
Fast development with hot module reloading
It's not a framework.
It's a pattern.
Stores contain the application state and logic
Dispatcher is the central hub that manages all data flow
Action creators are the main controllers of the app
Views listen to stores and show the data
Actions start a data cycle
Asynchronous functions belong into Actions
Fork me on Github
