Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Speaker Deck
PRO
Sign in
Sign up for free
Introduction to React.js
Radoslav Stankov
September 22, 2015
Technology
1
180
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
React Architecture at Product Hunt
rstankov
2
62
React Component Anti-Patterns
rstankov
0
400
How to an effective developer
rstankov
0
110
Domain Driven Design Kinda
rstankov
1
300
Testing React Hooks with Confidence
rstankov
1
130
Product Development
rstankov
2
100
Developing apps with React & Electron
rstankov
0
100
React Native Architecture at Product Hunt
rstankov
1
720
React Architecture at Product Hunt
rstankov
4
640
Other Decks in Technology
See All in Technology
【Pythonデータ分析勉強会#33】「DearPyGuiに入門しました」の続き~Image-Processing-Node-Editor~
kazuhitotakahashi
0
140
oakのミドルウェアを書くときの技のらしきもの
toranoana
0
130
MRTK3 - DataBinding and Theming 入門
futo23
0
190
20220622_FinJAWS_あのときにAWSがあったらこうできた
taketakekaho
0
110
データエンジニアリングの潮流を俯瞰する
tetsuroito
1
730
IoTLT88-NTKanazawa-laundry-dry
yukima0707
0
220
eBPF for Security Observability
lizrice
0
170
組織の崩壊と再生、その中で何を考え、感じたのか。 そして本当に必要だったもの
kosako
10
4.2k
機械学習システムアーキテクチャ入門 #1
asei
3
1.2k
Custom GitHub Actions by Java
kazamori
0
290
OPENLOGI Company Profile
hr01
0
490
今どきのLinux事情
tokida
36
29k
Featured
See All Featured
Unsuck your backbone
ammeep
659
55k
Building Your Own Lightsaber
phodgson
94
4.6k
Fantastic passwords and where to find them - at NoRuKo
philnash
27
1.5k
Building Applications with DynamoDB
mza
83
4.7k
Ruby is Unlike a Banana
tanoku
91
9.2k
Faster Mobile Websites
deanohume
294
28k
GitHub's CSS Performance
jonrohan
1020
420k
The Cult of Friendly URLs
andyhume
68
4.8k
Adopting Sorbet at Scale
ufuk
63
7.6k
A designer walks into a library…
pauljervisheath
196
16k
Web development in the modern age
philhawksworth
197
9.3k
A better future with KSS
kneath
225
15k
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 :)