React (.JS)
Made by
Developer-
Happiness
& Sanity
Best practices?
Forget it.
Model
View
Controller
Model
View
Controller
Key points
- Mix DOM-generation
and display logic - Re-rendering on every update
- Virtual DOM
- Synthetic events
Separation of concerns
Markup &
Display logic:
Same concern,
different technology.
Give it 5 minutes.
Components
- Reusable
- Composable
- Testable
<JSX />
Optional sugar
Read: build step "required"
Vanilla JS
React.createClass({
render: function() {
return (
React.DOM.div({ className: 'my-thing' },
React.DOM.a(
{ href: '/path' },
'Link: ' + this.props.linkText
)
)
);
}
});JSX
React.createClass({
render: function() {
return (
<div className="my-thing">
<a href="/path">
Link: {this.props.linkText}
</a>
</div>
);
}
});JSX
JSX (and vanilla React-JS) use DOM-attribute names, not HTML-attribute names.
Read:
"className", not "class"
"htmlFor", not "for"
What makes it
awesome?
Render on every change!
UIs: Hard, because
state changes
Example.
Classic server-side:
<?php
echo '<ul class="event-list">';
$events = $match['isFinished'] ? array_reverse($events) : $events;
foreach ($events as $event) {
$itemClass = $event['type'] === 'goal' ? 'goal' : '';
echo '<li class="' . $itemClass . '">';
echo ' <div class="icon icon-' . $event['type'] . '"></div>';
echo ' <div class="minute">' . $event['minute'] . '</div>';
echo ' <div class="text">' . $event['text'] . '</div>';
echo '</li>';
}
echo '</ul>';Easy, right? State does not change.
Classic client-side:
- Render (templates/manual HTML build)
- DOM-query, find elements
- Attach event handlers
Managable!
In comes the state change
What if:
- Match is finished
- Event minute changed
- Event type changed
- Event text changed
- Event was changed to a goal
- and so on and so forth.
A total mess.
addClass()
$.fn.find
removeClass()
el.text()
if(this)
then {that}
new design!!1
wow
addEventListener()
amaze
React: Rerender.
var EventListItem = React.createClass({
render: function() {
var e = this.props.event;
var itemClass = e.type === 'goal' ? 'goal' : '';
return (
<li className={itemClass}>
<div className={'icon icon-' + e.type} />
<div className="minute">{e.minute}</div>
<div className="text">{e.text}</div>
</li>
);
}
});List item:
React: Rerender.
var EventList = React.createClass({
render: function() {
var events = this.props.events;
if (this.props.match.isFinished) {
events = events.reverse();
}
return (
<ul className="event-list">
{events.map(EventListItem)}
</ul>
);
}
});List:
But... Slow?
Not with the
Virtual DOM
Virtual DOM
- Never creating real DOM-elements
- React handles that for you
- Lots of benefits - primarily:
Automagic DOM-diff
<li>
<div class="icon icon-yellowcard"></div>
<div class="minute">30</div>
<div class="text">Gult kort: BIRGER HANSEN.</div>
</li><li>
<div class="icon icon-redcard"></div>
<div class="minute">30</div>
<div class="text">Rødt kort (to gule): BIRGER HANSEN.</div>
</li>vs
=
li.children[0].className = 'icon icon-redcard';
li.children[2].innerText = 'Rødt kort (to gule): BIRGER HANSEN.';"VDOM"-diffing
Diffs virtual nodes
(comparing JS objects)
FAST
"VDOM"-diffing
Computes the minimal
set of DOM-changes
FAST
"VDOM"-diffing
Performs the operations
in batches
FAST
- Minimal reflows
- Different strategies
- requestAnimationFrame?
"VDOM"-diffing
"Cached" elements -
no traversal required
FAST
"VDOM"-diffing
Transparent to the developer - "Here's the new state, render it"
"VDOM"-diffing
Automatic event delegation
But wait,
there's more!
Server
Side
Rendering
It's all virtual!
var EventList = require('path/to/event-list-component');
var VgLiveApi = require('path/to/vglive-api');
var Server = require('someHttpServer').listen(80);
Server.on('request', function(req, res) {
VgLiveApi.getEventsForMatch(req.params.matchId)
.then(function(err, events) {
var html = React.renderComponentToString(
new EventList({
events: events
})
);
res.send(html);
});
});Client side can now diff the tree and continue updating state on changes!
Demo time.
But wait,
there's still more!
Great feedback
Great developer tools
Auto-bound methods
React.createClass({
onClick: function(e) {
// "this" refers to the component! yay!
this.setState({ clicked: true });
},
render: function() {
return <button onClick={this.onClick} />;
}
});Lets
Make
Something
<LiveCoding />
No livecoding?
Ok, here's a few notes.
Anatomy of a
React-component
One required method:
render()
render()
Returns one
DOM-element/React component
Props and State
Two ways of settings "properties" that can affect how the component is rendered
Props
The "external interface" to your component.
propTypes allows validation of input
Props
getDefaultProps()
Allows default properties, merged with any passed values.
Props
Should not be changed by the component itself.
Change props by it's parent component.
Props
functions can also be props.
Common pattern:
Cross-component communication via callbacks (onChange)
State
Components internal state
getInitialState()
State
Allows default state.
setState()
Triggers re-render of component.
Let's recap.
React renders a component with a given state. Given the same state, it will always render the same result.
State is JS objects
Creating an undo/redo function? Store the component state to an array on each step. Push/pop. Done.
K,
Thx
Bye
Espen
Hovlandsdal
React.JS
By Espen Hovlandsdal
React.JS
React is an awesome Javascript framework for creating reusable, composable and testable view components. It's fast, easy to use and insanely powerful. This presentation gives an overview of how it works, why it's awesome and some pointers on how components are built.
