Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
Introduction to React.js
Search
Radoslav Stankov
September 22, 2015
Technology
1
230
Introduction to React.js
My talk for Sofia Wordpress Meetup
Radoslav Stankov
September 22, 2015
Tweet
Share
More Decks by Radoslav Stankov
See All by Radoslav Stankov
Eliminating noise from your code
rstankov
0
15
Best JavaScript is No Javascript
rstankov
0
39
React Mid Game
rstankov
1
28
React Native for Better or Worst
rstankov
0
56
Component-Driven UI with ViewComponent Gem
rstankov
4
740
Best JavaScript Is No JavaScript
rstankov
0
74
How to plan a feature (short version)
rstankov
0
110
How to plan a feature (long version)
rstankov
0
65
The Effective Developer
rstankov
0
110
Other Decks in Technology
See All in Technology
レガシーをぶっ壊せ。AEONで始めるDevRelの話 / Qiita Night 2024-2-22
aeonpeople
3
150
0→1開発における技術選定において一番大切なこと
bicstone
1
330
4年前、あるじゃん老害エンジニアLT合戦に登壇、米国西海岸コンピュータ歴史博物館体験記の続編
toshi_atsumi
0
200
SPI原点回帰論:事業課題とFour Keysの結節点を見出す実践的ソフトウェアプロセス改善 / DevOpsDays Tokyo 2024
visional_engineering_and_design
4
1.6k
現代CSSフレームワークの内部実装とその仕組み
poteboy
6
1.9k
ここが嬉しいABAC ここが辛いよABAC #再解説+補足編
masahirokawahara
1
230
Algyan イベント振り返り
linyixian
0
190
株式会社EventHub・エンジニア採用資料
eventhub
0
1.9k
少数チームで挑む: SwiftUI, TCA, KMPを用いた 新規動画配信アプリ 「ABEMA Live」の開発について
tomu28
0
550
Reducing Cross-Zone Egress at Spotify with Custom gRPC Load Balancing Recap
koh_naga
0
150
SIEMを用いて、セキュリティログ分析の可視化と分析を実現し、PDCAサイクルを回してみた
coconala_engineer
0
230
普段有償でサポート業務をしているCSAが技術知見を無料で公開する理由
07jp27
1
640
Featured
See All Featured
Learning to Love Humans: Emotional Interface Design
aarron
266
39k
Gamification - CAS2011
davidbonilla
76
4.6k
Debugging Ruby Performance
tmm1
70
11k
Product Roadmaps are Hard
iamctodd
43
9.7k
ピンチをチャンスに:未来をつくるプロダクトロードマップ #pmconf2020
aki_iinuma
77
41k
A Tale of Four Properties
chriscoyier
150
22k
Fight the Zombie Pattern Library - RWD Summit 2016
marcelosomers
226
16k
How to Ace a Technical Interview
jacobian
272
22k
The Mythical Team-Month
searls
215
42k
Building Your Own Lightsaber
phodgson
98
5.7k
The Power of CSS Pseudo Elements
geoffreycrofte
59
5k
Git: the NoSQL Database
bkeepers
PRO
422
63k
Transcript
Introduction to React.js Radoslav Stankov 22/09/2015
Radoslav Stankov @rstankov http://rstankov.com http://blog.rstankov.com http://github.com/rstankov
None
None
None
None
<div className="post-list"> <article className="post-item"> <button className="vote-button">{post.votesCount}</button> <div> <h1>{post.name}</h1> <p>{post.headline}</p> </div>
<button className="comment-button">{post.commentsCount}</button> </article> <article className="post-item"> <button className="vote-button">{post.votesCount}</button> <div> <h1>{post.name}</h1> <p>{post.headline}</p> </div> <button className="comment-button">{post.commentsCount}</button> </article> <!—- more posts —-> </div>
var PostList = React.createClass({ render: function() { } });
var PostList = React.createClass({ render: function() { } }); ?
Render
component.render() props, state
Virtual DOM
Virtual Dom React Element React Element React Element React Element
React Element
Virtual Dom DOM Element DOM Element DOM Element DOM Element
DOM Element
Virtual Dom React Element React Element React Element React Element
React Element
Virtual Dom React Element React Element React Element React Element
React Element
Virtual Dom React Element React Element React Element React Element
React Element
Virtual Dom React Element React Element React Element React Element
React Element React Element React Element React Element React Element React Element
Virtual Dom React Element React Element React Element React Element
React Element React Element React Element React Element React Element React Element DOM Element DOM Element DOM Element DOM Element DOM Element
Virtual Dom React Element React Element React Element React Element
React Element React Element React Element React Element React Element React Element DOM Element DOM Element DOM Element DOM Element DOM Element DOM Element DOM Element DOM Element DOM Element DOM Element
var PostList = React.createClass({ render: function() { } });
var PostList = React.createClass({ render: function() { var posts =
this.props.posts.map(function(post) { return ( React.createElement("article", {className: "post-item"}, React.createElement("button", {className: "vote-button"}, post.vo React.createElement("div", null, React.createElement("h1", null, post.name), React.createElement("p", null, post.headline) ), React.createElement("button", {className: "comment-button"}, post ) ); }); return ( React.createElement("div", {className: "post-list"}, posts) ) } });
Can’t tell if it is true or just trolling
var PostList = React.createClass({ render: function() { var posts =
this.props.posts.map(function(post) { return ( <article className="post-item"> <button className="vote-button">{post.votesCount}</button> <div> <h1>{post.name}</h1> <p>{post.headline}</p> </div> <button className="comment-button">{post.commentsCount}</button> </article> ); }); return ( <div className="post-list"> {posts} </div> ) } });
STILL can’t tell if it is true or just trolling
JSX <article className="post-item"> <VoteButton /> <div> <h1>{post.name}</h1> <p>{post.headline}</p> </div> <CommentButton
/> </article>
React.createElement("button", {className: "vote-button"}, post.votesCount)) <button className="vote-button">{post.votesCount}</button>
React.createElement("div", null, React.createElement("h1", null, post.name), React.createElement("p", null, post.headline) ) <div>
<h1>{post.name}</h1> <p>{post.headline}</p> </div>
Code vs Template
render() { return this.props.results.map(function(result) { return ( <article> <h1>{result.name}</h1> <p>{result.headline}</p>
<a href={result.link}>visit</a> </article> ); }); } Looping
<div ng-repeat="result in results track by result.id"> <article> <h1>{{result.name}}</h1> <p>{{result.headline}}</p>
<a ng-href="{{result.link}}">visit</a> </article> </div> Looping
{{#each result in results}} <article> <h1>{{result.name}}</h1> <p>{{result.headline}}</p> {{#link-to result.link}}visit{{/link-to}} </article>
{{/each}} Looping
render() { if (this.props.results.length === 0) { return ( <strong>No
results found</strong> ); } return this.props.results.map(function(result) { return ( <article> <h1>{result.name}</h1> <p>{result.headline}</p> <a href={result.link}>visit</a> </article> ); }); } Conditions
<div ng-switch="results.length"> <div ng-switch-when="0"> <strong>No results found</strong> </div> <div ng-switch-default>
<div ng-repeat="result in results track by result.id"> <article> <h1>{{result.name}}</h1> <p>{{result.headline}}</p> <a ng-href="{{result.link}}">visit</a> </article> </div> </div> </div> Conditions
{{#if results}} {{#each result in results}} <article> <h1>{{result.name}}</h1> <p>{{result.headline}}</p> {{#link-to
result.link}}visit{{/link-to}} </article> {{/each}} {{else}} <strong>No results found</strong> {{/if}} Conditions
render() { if (this.props.results.length === 0) { return this.renderEmptyMessage(); }
return this.renderResultsList(); } Components
render() { if (this.props.results.length === 0) { return <EmptyMessage />
} return <ResultsList results={this.props.results} /> } Components
<div ng-switch="results.length"> <div ng-switch-when="0"> <my-app-no-results /> </div> <div ng-switch-default> <my-app-results-list
/> </div> </div> Components
<div ng-switch="results.length"> <div ng-switch-when="0"> <ng-include name="no-results.html" /> </div> <div ng-switch-default>
<ng-include name="results-list.html" /> </div> </div> Components
{{#if results}} {{my-app-no-results}} {{else}} {{my-app-no-results-list}} {{/if}} Components
{{#if results}} {{partial "no-results"}} {{else}} {{partial "results-list"}} {{/if}} Components
{{#if results}} {{view "no-results"}} {{else}} {{view "results-list"}} {{/if}} Components
var PostList = React.createClass({ render: function() { var posts =
this.props.posts.map(function(post) { return ( <article className="post-item"> <button className="vote-button">{post.votesCount}</button> <div> <h1>{post.name}</h1> <p>{post.headline}</p> </div> <button className="comment-button">{post.commentsCount}</button> </article> ); }); return ( <div className="post-list"> {posts} </div> ) } });
None
None
var PostList = React.createClass({ render: function() { var posts =
this.props.posts.map(function(post) { return <PostItem key={post.id} post={post} />; }); return ( <div className="post-list"> {posts} </div> ) } });
var PostItem = React.createClass({ render: function() { return ( <article
className="post-item"> <button className="vote-button">{this.props.post.votesCount}</button> <div> <h1>{this.props.post.name}</h1> <p>{this.props.post.headline}</p> </div> <button className="comment-button">{this.props.post.commentsCount}</button> </article> ); } });
var PostItem = React.createClass({ render: function() { var className =
classNames('vote-button', {active: this.props.post.hasVoted}); return ( <article className="post-item"> <button className={className}>{this.props.post.votesCount}</button> <div> <h1>{this.props.post.name}</h1> <p>{this.props.post.headline}</p> </div> <button className="comment-button">{this.props.post.commentsCount}</button> </article> ); } });
var PostItem = React.createClass({ getInitialState: function() { return { hasVoted:
this.props.post.hasVoted, votesCount: this.props.post.votesCount, }; }, render: function() { var className = classNames('vote-button', {active: this.state.hasVoted}); return ( <article className="post-item"> <button className={className} onClick={this.handleVoteClick}>{this.state.votesCount}</button> <div> <h1>{this.props.post.name}</h1> <p>{this.props.post.headline}</p> </div> <button className="comment-button">{this.props.post.commentsCount}</button> </article> ); }, handleVoteClick: function () { var updatedPost = toggleVote(this.props.post); this.setState({ hasVoted: updatedPost.hasVoted, votesCount: updatedPost.votesCount, }); } });
Virtual Dom div article article button div button h1 p
Virtual Dom PostList PostItem PostItem button div button h1 p
Virtual Dom PostList PostItem PostItem button div button h1 p
Virtual Dom PostList PostItem PostItem button div button h1 p
Virtual Dom PostList PostItem PostItem Vote Button div h1 p
button
Virtual Dom PostList PostItem PostItem Vote Button div h1 p
button
var PostItem = React.createClass({ render: function() { return ( <article
className="post-item"> <VoteButton post={this.props.post} /> <div> <h1>{this.props.post.name}</h1> <p>{this.props.post.headline}</p> </div> <button className="comment-button">{this.props.post.commentsCount}</button> </article> ); } });
@rstankov Thanks :)