What, wait... why?
---
Build web UIs
DOM
---
Love/hate
DOM love
---
Familiar
Does the job
DOM hate
---
Browsers
Wordy APIs
Slow
Apps
---
Mutations
React
---
Jordan Walke
Facebook/Instagram
https://github.com/facebook/react
React
---
Virtual DOM
Synthetic events
Selling points
---
Declarative
Efficient
Flexible
Components
---
---
React.renderComponent(
MyWidget({type: "amazing"}),
document.getElementById('app')
);
---
React.renderComponent(
MyWidget({type:"awesome"},
PrettyHead({title:"hello"}),
Body(null,
React.DOM.p(null, React.DOM.span(null, "Content"))
)
),
document.getElementById('app')
);
JSX
---
---
/** @jsx React.DOM */
React.renderComponent(
Content
,
document.getElementById('app')
);
JSX-to-JS transform
---
Build
On-the-fly
---
react
src/hello.js
---
/** @jsx React.DOM */
React.renderComponent(
Hello world!
,
document.getElementById('app')
);
---
# prerequisite
# npm install -g react-tools
jsx /scr /build
# continuously
jsx --watch /src /build
watch "jsx /src /build"
build/hello.js
---
/** @jsx React.DOM */
React.renderComponent(
React.DOM.h1(null, "Hello world!"),
document.getElementById('app')
);
On-the-fly
---
---
react
---
React.renderComponent(
Content
,
document.getElementById('app')
);
---
React.renderComponent(
,
document.getElementById('slideshow')
);
---
var Slide = React.createClass({
render: function() {
return (
{this.props.title}
{this.props.children}
);
}
});
---
var List = React.createClass({
getInitialState: function() {
return {items: this.props.items};
},
render: function() {
return (
);
}
});
---
preview: false,
handleChange: function (e) {
var items = this.state.items;
this.preview
? items[items.length - 1] = e.target.value
: items.push(e.target.value);
this.setState({items: items});
this.preview = true;
},
handleSubmit: function (e) {
this.preview = false;
this.refs.input.getDOMNode().value = '';
return false;
},
DOM mutations
---
Diffs in JS-land
One shot updates, where necessary
Inheritance?
---
Composition
Mixins
---
---
var bagofstuff = {
foo: function () {}
bar: "high"
};
var Compo = React.createClass({
mixins: [bagofstuff, another], // mix-in
});
Events
---
Work like they should
e.target
bubbling, capturing phases
Delegation
Virtual DOM ++
---
JS-land
Server-side
WebWorkers
JS UI
--
Content vs behavior?
No more node-hunting
Or verbose series of createNode/appendChild