Now with batteries included
var HelloMessage = React.createClass({
render: function() {
return (
<div>
Hello {this.props.name}
</div>
);
}
});
ReactDOM.render(<HelloMessage name="John" />, document.getElementById("#app"));
var HelloMessage = React.createClass({displayName: "HelloMessage",
render: function() {
return React.createElement("div", null, "Hello ", this.props.name);
}
});
ReactDOM.render(
React.createElement(HelloMessage, {name: "John"}), document.getElementById("#app")
);
var HelloMessage = React.createClass({
render: function() {
return (
<div>
Hello {this.props.name}
</div>
);
}
});
ReactDOM.render(<HelloMessage name="John" />, document.body);
<div>
Hello John
</div>
ReactDOM.render(<HelloMessage name="Jason" />, document.body);
<div>
Hello John
</div>
<div>
Hello Jason
</div>
div.textContent = "Hello Jason"
Most are smaller
Drawbacks
Composability
<App>
<Header>
<Nav />
</Header>
<Content>
<Post>
<PostContent id="1"/>
<PostComments id="1"/>
</Post>
</Content>
</App>
{
handleClick: function() {
},
render: function() {
return (
<button className="myButton" onClick={this.handleClick}>Save...</button>
)
}
}
vs
$(".myButton").on("click", function(e) { doSomeJavaScript() })
Declarative
Reusing DOM + Intelligent Error Messages
var people = [
{ id: 1, name: 'Pete Hunt' },
{ id: 2, name: 'Ryan Florence'},
{ id: 3, name: 'Christopher Chedeau'}
];
{
getPeople: function() {
return people.map(function(person) {
return (
<li>{person.name}</li>
)
});
},
render: function() {
return (
<ul>
{this.getPeople()}
</ul>
)
}
}
Each child in an array should have a unique "key" prop. Check the render method of HelloMessage.
See http://fb.me/react-warning-keys for more information.
Reusing DOM + Intelligent Error Messages
var people = [
{ id: 1, name: 'Pete Hunt' },
{ id: 2, name: 'Ryan Florence'},
{ id: 3, name: 'Christopher Chedeau'}
];
{
getPeople: function() {
return people.map(function(person) {
return (
<li key={person.id}>{person.name}</li>
)
});
},
render: function() {
return (
<ul>
{this.getPeople()}
</ul>
)
}
}
Simply put: Certain things happen faster than others.
Basics Applied: A text input's change will get higher priority. A DOM element with `display: none` will get lower priority
Advanced: Multiple state trees. Virtual stack frame of queued and prioritized work to be executed. Other complicated junk
Benefits: Faster render, better animation capabilities, return multiple things from a single React component, async rendering, etc.