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
270
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
The dream that turned into nightmare (lightning)
rstankov
0
30
Ruby on Rails - The Single Engineer Framework
rstankov
0
220
Living Without Exceptions
rstankov
1
180
One engineer company with Ruby on Rails
rstankov
2
630
Eliminating noise from your code
rstankov
0
83
Best JavaScript is No Javascript
rstankov
0
120
React Mid Game
rstankov
2
92
React Native for Better or Worst
rstankov
0
110
Component-Driven UI with ViewComponent Gem
rstankov
4
1k
Other Decks in Technology
See All in Technology
Autify Company Deck
autifyhq
1
39k
現地でMeet Upをやる場合の注意点〜反省点を添えて〜
shotashiratori
0
530
新R25、乃木坂46 Mobileなどのファンビジネスを支えるマルチテナンシーなプラットフォームの全体像 / cam-multi-cloud
cyberagentdevelopers
PRO
1
130
Figma Dev Modeで進化するデザインとエンジニアリングの協働 / figma-with-engineering
cyberagentdevelopers
PRO
1
430
Aurora_BlueGreenDeploymentsやってみた
tsukasa_ishimaru
1
130
「最高のチューニング」をしないために / hack@delta 24.10
fujiwara3
21
3.5k
グローバル展開を見据えたサービスにおける機械翻訳プラクティス / dp-ai-translating
cyberagentdevelopers
PRO
1
150
プロダクトチームへのSystem Risk Records導入・運用事例の紹介/Introduction and Case Studies on Implementing and Operating System Risk Records for Product Teams
taddy_919
1
170
君は隠しイベントを見つけれるか?
mujyun
0
300
ネット広告に未来はあるか?「3rd Party Cookie廃止とPrivacy Sandboxの効果検証の裏側」 / third-party-cookie-privacy
cyberagentdevelopers
PRO
1
130
初心者に Vue.js を 教えるには
tsukuha
5
390
使えそうで使われないCloudHSM
maikamibayashi
0
170
Featured
See All Featured
Visualizing Your Data: Incorporating Mongo into Loggly Infrastructure
mongodb
42
9.2k
RailsConf & Balkan Ruby 2019: The Past, Present, and Future of Rails at GitHub
eileencodes
131
33k
No one is an island. Learnings from fostering a developers community.
thoeni
19
3k
KATA
mclloyd
29
13k
RailsConf 2023
tenderlove
29
880
For a Future-Friendly Web
brad_frost
175
9.4k
Visualization
eitanlees
144
15k
What’s in a name? Adding method to the madness
productmarketing
PRO
22
3.1k
Documentation Writing (for coders)
carmenintech
65
4.4k
Cheating the UX When There Is Nothing More to Optimize - PixelPioneers
stephaniewalter
280
13k
The Art of Programming - Codeland 2020
erikaheidi
51
13k
A Philosophy of Restraint
colly
203
16k
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 :)