Slide 1
Slide 1 text
R E A C T. J S
by Stefano Ceschi Berrini @stecb
Rethinking UI Development
May 20th, 2015
Slide 2
Slide 2 text
I’m a Software Engineer @ Timerepublik.
I’m not a React expert. I’m still learning it,
I’m hacking/experimenting with it and I’m really LOVING IT.
So, let’s share this learning process.
http://stecb.ninja
Slide 3
Slide 3 text
No content
Slide 4
Slide 4 text
It’s a JavaScript library for the the UI built by
V
M C
it automa(g|t)ically keeps the interface up-to-date when data changes
+
As of May, 20th 2015
Slide 5
Slide 5 text
Instagram
Slide 6
Slide 6 text
Facebook
Slide 7
Slide 7 text
• AirBnB
• Atlassian
• BBC
• Imgur
• Khan Academy
• Pivotal Tracker
• Reddit
• Whatsapp
• Wired
• Yahoo
• …
Slide 8
Slide 8 text
Keys
• Components (+ JSX)
• Virtual DOM
• One-way data binding
Slide 9
Slide 9 text
key #1: Components
Everything in React is a modular/reusable
component:
• react HTML elements
• Custom react components
• Collections/composition of the above
Think about a component as a state-machine. Don’t think about the DOM.
Slide 10
Slide 10 text
key #1: Components
A component is a React class. It can take
input data, it can have a state and you can:
• define methods
• render a tree of functions
When you add a component to your UI, you’re just invoking a function.
mandatory
Slide 11
Slide 11 text
key #1: Components
Slide 12
Slide 12 text
key #1: Components
JSX
JS
optional
var HelloWorld = React.createClass({
render: function() {
return
Hello world, {this.props.name}!
;
}
});
React.render(, document.getElementById('main'));
var HelloWorld = React.createClass({
render: function() {
return React.createElement("div", null, "Hello world, ", this.props.name, "!");
}
});
React.render(React.createElement(HelloWorld, {name: "Bruce"}),
document.getElementById('main'));
?harmony for ES6
Slide 13
Slide 13 text
key #1: Components JSX
JS syntactic sugar: a concise and familiar syntax for
defining tree structures with attributes.
XML like elements => function + args
Slide 14
Slide 14 text
key #1: Components properties
Props are the options/configuration of a
component, they are data passed from
parents to children and they are
immmutable.
If you think a property of a component could changed over time, then that should be part of its state.
Slide 15
Slide 15 text
key #1: Components properties
var Box = React.createClass({
render: function() {
var list = this.props.list.map(function(item) {
return {item}
});
return (
);
}
});
React.render(, document.body);
{this.props.title}
-
{list}
Slide 16
Slide 16 text
key #1: Components state
State is mutable and should contain data
that a component's event handlers may
change to trigger a UI update (i.e. User
interactions, Server responses etc)
State is optional and you should avoid it as much as possible, to reduce complexity!
setState(data, callback)
Slide 17
Slide 17 text
key #1: Components state
var Box = React.createClass({
getInitialState: function() {
return {
hasDetailsVisible: false
};
},
handleToggle: function() {
this.setState({
hasDetailsVisible: !this.state.hasDetailsVisible
});
},
render: function() {
var list = this.props.list.map(function(item) {
return {item}
});
var detailsStyle = this.state.hasDetailsVisible ? {display: 'block'} : {display: 'none'};
return (
);
}
});
React.render(, document.body);
{this.props.title}
toggle details-
{list}
Slide 18
Slide 18 text
key #1: Components events
Just three words
Forget about jQuery
Slide 19
Slide 19 text
key #1: Components events
http://facebook.github.io/react/docs/events.html
Synthetic events. They work identically on every browser
Clipboard, Keyboard, Focus, Form,
Mouse, Touch, UI, Wheel
Slide 20
Slide 20 text
key #1: Components events
var Box = React.createClass({
getInitialState: function() {
return {
hasDetailsVisible: false
};
},
handleToggle: function(event) {
this.setState({
hasDetailsVisible: !this.state.hasDetailsVisible
});
},
render: function() {
var list = this.props.list.map(function(item) {
return {item}
});
var detailsStyle = this.state.hasDetailsVisible ? {display: 'block'} : {display: 'none'};
return (
);
}
});
React.render(, document.body);
{this.props.title}
toggle details-
{list}
Slide 21
Slide 21 text
key #1: Components DOM elements
var Input = React.createClass({
handleChange: function(event) {
console.log(event.target.value);
},
componentDidMount: function() {
React.findDOMNode(this.refs.myInput).focus();
},
render: function() {
return (
);
}
});
http://facebook.github.io/react/docs/component-specs.html
Slide 22
Slide 22 text
React internally uses a virtual representation of the
DOM
It mutates the real DOM by using a tree diff algorithm +
heuristic O(n^3) => O(n)
You can think about re-rendering your entire application
on every update without worrying about performance!
key #2: Virtual DOM
Slide 23
Slide 23 text
https://www.flickr.com/photos/usnavy/5815022252
Why is it so fast?
JS execution is FAST, real DOM mutations are SLOW
So, being able to re-render the entire application by mutating
JUST what changed on the UI is the most important thing
key #2: Virtual DOM
Slide 24
Slide 24 text
State N State N+1
Changed attributes, just update them on the real DOM
The NodeType has changed, throw away that node (+subtree) and replace
it with a new node!
key #2: Virtual DOM
Slide 25
Slide 25 text
key #3: One-way Data Binding
Data (props) flows only in one way. From the Owner to child.
Slide 26
Slide 26 text
Example
Slide 27
Slide 27 text
Not just the UI…
Architecture: Flux
React on the server: React.renderToString(component)
React Native
Slide 28
Slide 28 text
Useful resources
Official React website
https://github.com/enaqx/awesome-react
React VS ember/angular/backbone
React.js Conf 2015 videos
Starter kit for Isomorphic webapps with React and Flux
Slide 29
Slide 29 text
Thanks
Q&A