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
240
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
10
Ruby on Rails - The Single Engineer Framework
rstankov
0
160
Living Without Exceptions
rstankov
1
120
One engineer company with Ruby on Rails
rstankov
2
560
Eliminating noise from your code
rstankov
0
37
Best JavaScript is No Javascript
rstankov
0
67
React Mid Game
rstankov
2
50
React Native for Better or Worst
rstankov
0
70
Component-Driven UI with ViewComponent Gem
rstankov
4
910
Other Decks in Technology
See All in Technology
Azure AI ことはじめ
tsubakimoto_s
0
130
Docker互換のセキュアなコンテナ実行環境「Podman」超入門
devops_vtj
6
3.2k
Classmethod流のPlatform Engineering / classmethod-platform-engineering-devio2024
tomoki10
0
470
ゆめみのアクセシビリティの現在地と今後
ryokatsuse
3
290
エンジニアリングマネージャーはどう学んでいくのか #devsumi / How Do Engineering Managers Continue to Learn and Grow?
expajp
4
1.3k
[NIKKEI Tech Talk] KDDI/KAG Scrum & Community for Engineering Training
curanosuke
2
220
Azure Pipelinesを使用したCICDベースラインアーキテクチャ実践
yuriemori
0
190
テストケースの自動生成に生成AIの導入を試みた話と生成AIによる今後の期待
shift_evolve
0
180
[I/O Extended Android 2024] What`s new in Android 2024
kyeongwan
0
220
DDDにおける認可の扱いとKotlinにおける実装パターン / authorization-for-ddd-and-kotlin-implement-pattern
urmot
4
390
E2Eテスト自動化プラットフォームにおけるAIの活用
shift_evolve
0
180
Github Actions 로 Android 팀의 효율성 극대화
hadonghyun
0
160
Featured
See All Featured
Side Projects
sachag
451
42k
Easily Structure & Communicate Ideas using Wireframe
afnizarnur
189
16k
Fight the Zombie Pattern Library - RWD Summit 2016
marcelosomers
228
16k
VelocityConf: Rendering Performance Case Studies
addyosmani
321
23k
Product Roadmaps are Hard
iamctodd
PRO
48
10k
Adopting Sorbet at Scale
ufuk
71
8.8k
JavaScript: Past, Present, and Future - NDC Porto 2020
reverentgeek
44
4.7k
A designer walks into a library…
pauljervisheath
201
24k
Navigating Team Friction
lara
181
13k
[Rails World 2023 - Day 1 Closing Keynote] - The Magic of Rails
eileencodes
17
1.5k
Thoughts on Productivity
jonyablonski
64
4.1k
The Cost Of JavaScript in 2023
addyosmani
31
4.7k
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 :)