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
300
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
Ruby on Rails The Single Engineer Framework
rstankov
0
5
Rails: The Missing Parts
rstankov
1
130
The dream that turned into nightmare
rstankov
0
230
The dream that turned into nightmare (lightning)
rstankov
0
68
Ruby on Rails - The Single Engineer Framework
rstankov
0
280
Living Without Exceptions
rstankov
1
240
One engineer company with Ruby on Rails
rstankov
2
690
Eliminating noise from your code
rstankov
0
130
Best JavaScript is No Javascript
rstankov
0
160
Other Decks in Technology
See All in Technology
Web Intelligence and Visual Media Analytics
weblyzard
PRO
1
5.9k
2025-04-24 "Manga AI Understanding & Localization" Furukawa Arata (CyberAgent, Inc)
ornew
2
300
AIコーディングの最前線 〜活用のコツと課題〜
pharma_x_tech
4
2.8k
React ABC Questions
hirotomoyamada
0
580
白金鉱業Meetup_Vol.18_AIエージェント時代のUI/UX設計
brainpadpr
1
250
Microsoft Fabric vs Databricks vs (Snowflake) -若手エンジニアがそれぞれの強みと違いを比較してみた- "A Young Engineer's Comparison of Their Strengths and Differences"
reireireijinjin6
1
110
クラウド開発環境Cloud Workstationsの紹介
yunosukey
0
210
ガバクラのAWS長期継続割引 ~次の4/1に慌てないために~
hamijay_cloud
1
540
Dynamic Reteaming And Self Organization
miholovesq
3
690
OPENLOGI Company Profile
hr01
0
63k
Notion x ポストモーテムで広げる組織の学び / Notion x Postmortem
isaoshimizu
1
130
PostgreSQL Log File Mastery: Optimizing Database Performance Through Advanced Log Analysis
shiviyer007
PRO
1
140
Featured
See All Featured
Fight the Zombie Pattern Library - RWD Summit 2016
marcelosomers
233
17k
Music & Morning Musume
bryan
47
6.5k
Agile that works and the tools we love
rasmusluckow
329
21k
Automating Front-end Workflow
addyosmani
1370
200k
Building a Scalable Design System with Sketch
lauravandoore
462
33k
The Straight Up "How To Draw Better" Workshop
denniskardys
233
140k
Rebuilding a faster, lazier Slack
samanthasiow
81
9k
Build your cross-platform service in a week with App Engine
jlugia
230
18k
KATA
mclloyd
29
14k
Navigating Team Friction
lara
185
15k
Facilitating Awesome Meetings
lara
54
6.3k
実際に使うSQLの書き方 徹底解説 / pgcon21j-tutorial
soudai
178
53k
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 :)