Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Speaker Deck
PRO
Sign in
Sign up
for free
React Presentation
vjeux
June 25, 2013
Programming
7
6.6k
React Presentation
https://twitter.com/renajohn/status/349103656571904000
vjeux
June 25, 2013
Tweet
Share
More Decks by vjeux
See All by vjeux
vjeux
83
86k
vjeux
33
7.1k
vjeux
650
1.4M
vjeux
111
42k
vjeux
52
2M
vjeux
12
860k
vjeux
5
650
vjeux
1
4.8k
vjeux
1
2.5k
Other Decks in Programming
See All in Programming
atskimura
0
310
nbkouhou
0
970
inoue2002
0
280
showwin
0
130
yumcyawiz
4
650
rshindo
2
300
taoshotaro
1
370
nrslib
20
13k
itosho525
0
150
mizdra
7
4.9k
canon1ky
3
350
rishitdagli
0
180
Featured
See All Featured
bkeepers
52
4.1k
kastner
54
1.9k
morganepeng
17
1.1k
ammeep
656
54k
smashingmag
229
18k
tanoku
86
8.5k
paulrobertlloyd
71
3.6k
chrislema
173
14k
lara
16
2.6k
bkeepers
408
57k
yeseniaperezcruz
302
31k
marcelosomers
220
15k
Transcript
Facebook React http://facebook.github.io/react/index.html Renault John Lecoultre @renajohn rjl@bugbuster.com
Disclaimer There will be in this presentation
React is a JavaScript library to build reusable UI components
React is used in production Main page Some parts
React is declarative /** @jsx React.DOM */ var HelloMessage =
React.createClass({ render: function() { return <div>{'Hello ' + this.props.name}</div>; } }); React.renderComponent( <HelloMessage name="JS Romandie" />, document.body ); Example 1
React is declarative /** @jsx React.DOM */ var HelloMessage =
React.createClass({ render: function() { return <div>{'Hello ' + this.props.name}</div>; } }); React.renderComponent( <HelloMessage name="JS Romandie" />, document.body ); Example 1 Component render function
React is declarative /** @jsx React.DOM */ var HelloMessage =
React.createClass({ render: function() { return <div>{'Hello ' + this.props.name}</div>; } }); React.renderComponent( <HelloMessage name="JS Romandie" />, document.body ); Example 1 Inject component in DOM
React is declarative /** @jsx React.DOM */ var HelloMessage =
React.createClass({ render: function() { return <div>{'Hello ' + this.props.name}</div>; } }); React.renderComponent( <HelloMessage name="JS Romandie" />, document.body ); Example 1 Access component properties (attributes and childern)
React is declarative /** @jsx React.DOM */ var HelloMessage =
React.createClass({ render: function() { return <div>{'Hello ' + this.props.name}</div>; } }); React.renderComponent( <HelloMessage name="JS Romandie" />, document.body ); Example 1
React is declarative /** @jsx React.DOM */ var HelloMessage =
React.createClass({ render: function() { return <div>{'Hello ' + this.props.name}</div>; } }); React.renderComponent( <HelloMessage name="JS Romandie" />, document.body ); Example 1
React is declarative /** @jsx React.DOM */ var HelloMessage =
React.createClass({ render: function() { return <div>{'Hello ' + this.props.name}</div>; } }); React.renderComponent( <HelloMessage name="JS Romandie" />, document.body ); Example 1
React is declarative /** @jsx React.DOM */ var HelloMessage =
React.createClass({ render: function() { return <div>{'Hello ' + this.props.name}</div>; } }); React.renderComponent( <HelloMessage name="JS Romandie" />, document.body ); Example 1
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 );
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 );
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 );
React is declarative /** @jsx React.DOM */ var HelloMessage =
React.createClass({ render: function() { return <div>{'Hello ' + this.props.name}</div>; } }); React.renderComponent( <HelloMessage name="JS Romandie" />, document.body );
React is declarative /** @jsx React.DOM */ var HelloMessage =
React.createClass({ render: function() { return <div>{'Hello ' + this.props.name}</div>; } }); React.renderComponent( <HelloMessage name="JS Romandie" />, document.body ); Import all HTML elements as React components
React is declarative /** @jsx React.DOM */ var HelloMessage =
React.createClass({ render: function() { return <div>{'Hello ' + this.props.name}</div>; } }); React.renderComponent( <HelloMessage name="JS Romandie" />, document.body );
Components are composable /** @jsx React.DOM */ var Message =
React.createClass({ render: function() { return <span> {this.props.text + " "}</span>; } }); var HelloFullName = React.createClass({ render: function() { return <div> <Message text=”Hello”/> <Message text= {this.props.firstName} /> <Message text= {this.props.firstName} /> </div>; } }); React.renderComponent( <HelloFullName firstName="JS" lastName="Romandie"/>, document.body );
Components are composable /** @jsx React.DOM */ var Message =
React.createClass({ render: function() { return <span> {this.props.text + " "}</span>; } }); var HelloFullName = React.createClass({ render: function() { return <div> <Message text=”Hello”/> <Message text= {this.props.firstName} /> <Message text= {this.props.firstName} /> </div>; } }); React.renderComponent( <HelloFullName firstName="JS" lastName="Romandie"/>, document.body );
Components are composable /** @jsx React.DOM */ var Message =
React.createClass({ render: function() { return <span> {this.props.text + " "}</span>; } }); var HelloFullName = React.createClass({ render: function() { return <div> <Message text=”Hello”/> <Message text= {this.props.firstName} /> <Message text= {this.props.firstName} /> </div>; } }); React.renderComponent( <HelloFullName firstName="JS" lastName="Romandie"/>, document.body );
var Timer = React.createClass({ }); React.renderComponent(Timer({}), document.body); React components are
stateful
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
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
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
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
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
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
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
No update function • When state changes, the view is
re-rendered • React figures out the smallest DOM mutation
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( <li><input type="text" placeholder="change me!" /></li> ); } return ( <ul> {items} <input type="button" value="Add something" onClick={this.add}/> </ul> ); } }); Example 3
Pitfalls It’s XML! Element have to be balanced: <br> →
<br /> <img src=”...”> → <img src=”...” />
Pitfalls Render function should return only one node: render: function()
{ return <i class=”icon-trash”></i> delete; }
Pitfalls Render function should return only one node: render: function()
{ return <i class=”icon-trash”></i> delete; } Wrong
Pitfalls Render function should return only one node: render: function()
{ return <i class=”icon-trash”></i> delete; } Wrong render: function() { return <div><i class=”icon-trash”></i> delete</div>; } OK
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
Thank you Renault John Lecoultre rjl@bugbuster.com