Slide 1
Slide 1 text
Facebook React
http://facebook.github.io/react/index.html
Renault John Lecoultre
@renajohn
[email protected]
Slide 2
Slide 2 text
Disclaimer
There will be in this presentation
Slide 3
Slide 3 text
React is a JavaScript library to build
reusable UI components
Slide 4
Slide 4 text
React is used in production
Main page
Some parts
Slide 5
Slide 5 text
React is declarative
/** @jsx React.DOM */
var HelloMessage = React.createClass({
render: function() {
return
{'Hello ' + this.props.name}
;
}
});
React.renderComponent(
,
document.body
);
Example 1
Slide 6
Slide 6 text
React is declarative
/** @jsx React.DOM */
var HelloMessage = React.createClass({
render: function() {
return
{'Hello ' + this.props.name}
;
}
});
React.renderComponent(
,
document.body
);
Example 1
Component render function
Slide 7
Slide 7 text
React is declarative
/** @jsx React.DOM */
var HelloMessage = React.createClass({
render: function() {
return
{'Hello ' + this.props.name}
;
}
});
React.renderComponent(
,
document.body
);
Example 1
Inject component in DOM
Slide 8
Slide 8 text
React is declarative
/** @jsx React.DOM */
var HelloMessage = React.createClass({
render: function() {
return
{'Hello ' + this.props.name}
;
}
});
React.renderComponent(
,
document.body
);
Example 1
Access component
properties
(attributes and childern)
Slide 9
Slide 9 text
React is declarative
/** @jsx React.DOM */
var HelloMessage = React.createClass({
render: function() {
return
{'Hello ' + this.props.name}
;
}
});
React.renderComponent(
,
document.body
);
Example 1
Slide 10
Slide 10 text
React is declarative
/** @jsx React.DOM */
var HelloMessage = React.createClass({
render: function() {
return
{'Hello ' + this.props.name}
;
}
});
React.renderComponent(
,
document.body
);
Example 1
Slide 11
Slide 11 text
React is declarative
/** @jsx React.DOM */
var HelloMessage = React.createClass({
render: function() {
return
{'Hello ' + this.props.name}
;
}
});
React.renderComponent(
,
document.body
);
Example 1
Slide 12
Slide 12 text
React is declarative
/** @jsx React.DOM */
var HelloMessage = React.createClass({
render: function() {
return
{'Hello ' + this.props.name}
;
}
});
React.renderComponent(
,
document.body
);
Example 1
Slide 13
Slide 13 text
is not strictly mandatory
var HelloMessage = React.createClass({
render: function() {
return React.DOM.div({},
'Hello ' + this.props.name});
}
});
React.renderComponent(
HelloMessage({ name: "JS Romandie" }),
document.body
);
Slide 14
Slide 14 text
is not strictly mandatory
var HelloMessage = React.createClass({
render: function() {
return React.DOM.div({},
'Hello ' + this.props.name});
}
});
React.renderComponent(
HelloMessage({ name: "JS Romandie" }),
document.body
);
Slide 15
Slide 15 text
is not strictly mandatory
var HelloMessage = React.createClass({
render: function() {
return React.DOM.div({},
'Hello ' + this.props.name});
}
});
React.renderComponent(
HelloMessage({ name: "JS Romandie" }),
document.body
);
Slide 16
Slide 16 text
React is declarative
/** @jsx React.DOM */
var HelloMessage = React.createClass({
render: function() {
return
{'Hello ' + this.props.name}
;
}
});
React.renderComponent(
,
document.body
);
Slide 17
Slide 17 text
React is declarative
/** @jsx React.DOM */
var HelloMessage = React.createClass({
render: function() {
return
{'Hello ' + this.props.name}
;
}
});
React.renderComponent(
,
document.body
);
Import all HTML elements
as React components
Slide 18
Slide 18 text
React is declarative
/** @jsx React.DOM */
var HelloMessage = React.createClass({
render: function() {
return
{'Hello ' + this.props.name}
;
}
});
React.renderComponent(
,
document.body
);
Slide 19
Slide 19 text
Components are composable
/** @jsx React.DOM */
var Message = React.createClass({
render: function() {
return {this.props.text + " "};
}
});
var HelloFullName = React.createClass({
render: function() {
return
;
}
});
React.renderComponent(
,
document.body
);
Slide 20
Slide 20 text
Components are composable
/** @jsx React.DOM */
var Message = React.createClass({
render: function() {
return {this.props.text + " "};
}
});
var HelloFullName = React.createClass({
render: function() {
return
;
}
});
React.renderComponent(
,
document.body
);
Slide 21
Slide 21 text
Components are composable
/** @jsx React.DOM */
var Message = React.createClass({
render: function() {
return {this.props.text + " "};
}
});
var HelloFullName = React.createClass({
render: function() {
return
;
}
});
React.renderComponent(
,
document.body
);
Slide 22
Slide 22 text
var Timer = React.createClass({
});
React.renderComponent(Timer({}), document.body);
React components are stateful
Slide 23
Slide 23 text
var Timer = React.createClass({
getInitialState: function() {
return {secondsElapsed: 0};
},
render: function() {
return React.DOM.div({},
'Seconds Elapsed: ' + this.state.secondsElapsed
);
}
});
React.renderComponent(Timer({}), document.body);
React components are stateful
Slide 24
Slide 24 text
var Timer = React.createClass({
getInitialState: function() {
return {secondsElapsed: 0};
},
render: function() {
return React.DOM.div({},
'Seconds Elapsed: ' + this.state.secondsElapsed
);
}
});
React.renderComponent(Timer({}), document.body);
React components are stateful
Defined initial state. Called
just once per component
Slide 25
Slide 25 text
var Timer = React.createClass({
getInitialState: function() {
return {secondsElapsed: 0};
},
render: function() {
return React.DOM.div({},
'Seconds Elapsed: ' + this.state.secondsElapsed
);
}
});
React.renderComponent(Timer({}), document.body);
React components are stateful
Retrieve component state
Slide 26
Slide 26 text
var Timer = React.createClass({
getInitialState: function() {
return {secondsElapsed: 0};
},
render: function() {
return React.DOM.div({},
'Seconds Elapsed: ' + this.state.secondsElapsed
);
}
});
React.renderComponent(Timer({}), document.body);
React components are stateful
Slide 27
Slide 27 text
var Timer = React.createClass({
getInitialState: function() {
return {secondsElapsed: 0};
},
tick: React.autoBind(function() {
this.setState({secondsElapsed: this.state.secondsElapsed + 1});
}),
componentDidMount: function() {
setInterval(this.tick, 1000);
},
render: function() {
return React.DOM.div({},
'Seconds Elapsed: ' + this.state.secondsElapsed
);
}
});
React.renderComponent(Timer({}), document.body);
Example 2
React components are stateful
Slide 28
Slide 28 text
var Timer = React.createClass({
getInitialState: function() {
return {secondsElapsed: 0};
},
tick: React.autoBind(function() {
this.setState({secondsElapsed: this.state.secondsElapsed + 1});
}),
componentDidMount: function() {
setInterval(this.tick, 1000);
},
render: function() {
return React.DOM.div({},
'Seconds Elapsed: ' + this.state.secondsElapsed
);
}
});
React.renderComponent(Timer({}), document.body);
Example 2
React components are stateful
Always use setState when
changing state
Slide 29
Slide 29 text
var Timer = React.createClass({
getInitialState: function() {
return {secondsElapsed: 0};
},
tick: React.autoBind(function() {
this.setState({secondsElapsed: this.state.secondsElapsed + 1});
}),
componentDidMount: function() {
setInterval(this.tick, 1000);
},
render: function() {
return React.DOM.div({},
'Seconds Elapsed: ' + this.state.secondsElapsed
);
}
});
React.renderComponent(Timer({}), document.body);
Example 2
React components are stateful
Slide 30
Slide 30 text
No update function
• When state changes, the view is re-rendered
• React figures out the smallest DOM mutation
Slide 31
Slide 31 text
React reconciliation
/** @jsx React.DOM */
var TextBoxList = React.createClass({
getInitialState: function() { return {count: 1}; },
add: React.autoBind(function() {
this.setState({count: this.state.count + 1});
}),
render: function() {
var items = [];
for (var i = 0; i < this.state.count; i++) {
items.push(
);
}
return (
-
{items}
Slide 32
Slide 32 text
Pitfalls
It’s XML! Element have to be balanced:
→
→
→
Slide 33
Slide 33 text
Pitfalls
Render function should return only one node:
render: function() {
return delete;
}
Slide 34
Slide 34 text
Pitfalls
Render function should return only one node:
render: function() {
return delete;
}
Wrong
Slide 35
Slide 35 text
Pitfalls
Render function should return only one node:
render: function() {
return delete;
}
Wrong
render: function() {
return
delete
;
}
OK
Slide 36
Slide 36 text
React tutorial
• Optimistic commenting: comments appear in the
list before they're saved on the server so it feels
fast.
• Live updates: new comments appears in real time
• Markdown formatting: users can use Markdown
to format their text
Building a commenting widget
Demo