Made by
Same concern,
different technology.
Give it 5 minutes.
Read: build step "required"
React.createClass({
render: function() {
return (
React.DOM.div({ className: 'my-thing' },
React.DOM.a(
{ href: '/path' },
'Link: ' + this.props.linkText
)
)
);
}
});
React.createClass({
render: function() {
return (
<div className="my-thing">
<a href="/path">
Link: {this.props.linkText}
</a>
</div>
);
}
});
JSX (and vanilla React-JS) use DOM-attribute names, not HTML-attribute names.
Read:
"className", not "class"
"htmlFor", not "for"
Render on every change!
<?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>';
Managable!
wow
amaze
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>
);
}
});
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>
);
}
});
Virtual DOM
<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.';
FAST
FAST
FAST
FAST
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!
React.createClass({
onClick: function(e) {
// "this" refers to the component! yay!
this.setState({ clicked: true });
},
render: function() {
return <button onClick={this.onClick} />;
}
});
<LiveCoding />
Returns one
DOM-element/React component
Two ways of settings "properties" that can affect how the component is rendered
Allows default properties, merged with any passed values.
Should not be changed by the component itself.
Change props by it's parent component.
functions can also be props.
Common pattern:
Cross-component communication via callbacks (onChange)
Allows default state.
Triggers re-render of component.
Espen
Hovlandsdal