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
9k
React Presentation
https://twitter.com/renajohn/status/349103656571904000
vjeux
June 25, 2013
Tweet
Share
More Decks by vjeux
See All by vjeux
React Rally: Animated -- React Performance Toolbox
vjeux
83
88k
React: CSS in JS - React France Meetup
vjeux
33
8.8k
React: CSS in JS
vjeux
655
1.5M
OSCON - React Architecture
vjeux
111
43k
Why does React scale? - JSConf 2014
vjeux
52
2M
Image Layout Algorithms - HTML5 Dev Conf
vjeux
12
860k
Image Layout Algorithms
vjeux
5
700
Generic Image Processing With Climb – 5th ELS
vjeux
1
5k
Climb - A Generic and Dynamic Approach to Image Processing
vjeux
1
2.7k
Other Decks in Programming
See All in Programming
まだ日本国内で利用できないAppActionsにトライしてみた / MoT TechTalk #15
mot_techtalk
0
130
Gradle build: The time is now
nonews
1
500
フロントエンドで 良いコードを書くために
t_keshi
3
1.7k
xarray-Datatree: Hierarchical Data Structures for Multi-Model Science
tomnicholas
0
230
量子コンピュータ時代のプログラミングセミナー / 20230119_Amplify_seminar _shift_optimization
fixstars
0
200
Micro Frontends with Module Federation @MicroFrontend Summit 2023
manfredsteyer
PRO
0
620
Unity+C#で学ぶ! メモリレイアウトとvtableのすゝめ 〜動的ポリモーフィズムを実現する仕組み〜
rossam
1
320
レガシーフレームワークからの移行
ug
0
120
ITエンジニア特化型Q&Aサイトteratailを 言語、DB、クラウドなど フルリプレイスした話
leveragestech
0
440
OIDC仕様に準拠した Makuake ID連携基盤構築の裏側
ymtdzzz
0
580
監視せなあかんし、五大紙だけにオオカミってな🐺🐺🐺🐺🐺
sadnessojisan
2
1.6k
子育てとEMと転職と
_atsushisakai
1
420
Featured
See All Featured
ピンチをチャンスに:未来をつくるプロダクトロードマップ #pmconf2020
aki_iinuma
31
20k
Into the Great Unknown - MozCon
thekraken
2
300
A designer walks into a library…
pauljervisheath
199
16k
Rails Girls Zürich Keynote
gr2m
87
12k
The Power of CSS Pseudo Elements
geoffreycrofte
52
4.3k
Robots, Beer and Maslow
schacon
154
7.3k
Building Better People: How to give real-time feedback that sticks.
wjessup
346
17k
Making Projects Easy
brettharned
102
4.8k
Happy Clients
brianwarren
90
5.8k
Testing 201, or: Great Expectations
jmmastey
25
5.7k
Teambox: Starting and Learning
jrom
124
7.9k
Creating an realtime collaboration tool: Agile Flush - .NET Oxford
marcduiker
6
840
Transcript
Facebook React http://facebook.github.io/react/index.html Renault John Lecoultre @renajohn
[email protected]
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
[email protected]