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
Data driven rendering
Search
Marc Tamlyn
February 17, 2016
Technology
1
150
Data driven rendering
An introduction to ReactJS given at JSOxford
Marc Tamlyn
February 17, 2016
Tweet
Share
More Decks by Marc Tamlyn
See All by Marc Tamlyn
Arousal and Anxiety
mjtamlyn
1
46
Working with Children
mjtamlyn
1
70
Wallingford Castle Archers Incorporation
mjtamlyn
0
170
Observation and Evaluation
mjtamlyn
0
89
Weird and Wonderful things to do with the ORM
mjtamlyn
3
1.3k
An Introduction to Graphene and Relay
mjtamlyn
6
1.2k
Tech Interviews that don't suck
mjtamlyn
4
1k
What's new in Django 1.9
mjtamlyn
1
170
Django Development Milestones
mjtamlyn
1
150
Other Decks in Technology
See All in Technology
ホワイトボードチャレンジ 説明&実行資料
ichimichi
0
130
Classmethod AI Talks(CATs) #17 司会進行スライド(2025.02.19) / classmethod-ai-talks-aka-cats_moderator-slides_vol17_2025-02-19
shinyaa31
0
160
人はなぜISUCONに夢中になるのか
kakehashi
PRO
6
1.7k
レビューを増やしつつ 高評価維持するテクニック
tsuzuki817
2
840
php-conference-nagoya-2025
fuwasegu
0
110
Autonomous Database Serverless 技術詳細 / adb-s_technical_detail_jp
oracle4engineer
PRO
17
45k
【Developers Summit 2025】プロダクトエンジニアから学ぶ、 ユーザーにより高い価値を届ける技術
niwatakeru
2
1.6k
Exadata Database Service on Cloud@Customer セキュリティ、ネットワーク、および管理について
oracle4engineer
PRO
1
1.5k
速くて安いWebサイトを作る
nishiharatsubasa
14
15k
Perlの生きのこり - エンジニアがこの先生きのこるためのカンファレンス2025
kfly8
1
220
OpenID BizDay#17 みんなの銀行による身元確認結果の活用 / 20250219-BizDay17-KYC-minna-no-ginko
oidfj
0
100
Reading Code Is Harder Than Writing It
trishagee
2
110
Featured
See All Featured
Six Lessons from altMBA
skipperchong
27
3.6k
A better future with KSS
kneath
238
17k
Fontdeck: Realign not Redesign
paulrobertlloyd
83
5.4k
The Illustrated Children's Guide to Kubernetes
chrisshort
48
49k
[RailsConf 2023 Opening Keynote] The Magic of Rails
eileencodes
28
9.3k
Typedesign – Prime Four
hannesfritz
40
2.5k
Producing Creativity
orderedlist
PRO
344
39k
Practical Tips for Bootstrapping Information Extraction Pipelines
honnibal
PRO
12
980
The Web Performance Landscape in 2024 [PerfNow 2024]
tammyeverts
4
420
Being A Developer After 40
akosma
89
590k
GraphQLとの向き合い方2022年版
quramy
44
13k
Building a Modern Day E-commerce SEO Strategy
aleyda
38
7.1k
Transcript
Data driven rendering An introduction to ReactJS Marc Tamlyn Photo
by Konstans Zafeiri on photocrowd.com
None
This is not •Babel •Webpack •Browserify •Flux •Redux •Relay
Motivation
None
Motivation •Responsive to input changes •Interactivity •Rendering only •Not a
jQuery mess!
What is React? •View layer of a traditional MVC •Virtual
DOM •Single directional data flow
What is a Component? •Takes input (props) •Returns an element
•Class with a render() method
What is a Component? var Photo = React.createClass({ render: function()
{ return React.createElement('img', { src: this.props.imageSrc, }); } });
Components with children var Photos = React.createClass({ render: function() {
var photos = this.props.photos.map((photo) => { return React.createElement(Photo, { imageSrc: photo.imageSrc, }); }); return React.createElement('div', {}, photos); } });
JSX •Preprocessor for React.createElement() •Compile using your JS preprocessor of
choice
JSX var Photos = React.createClass({ render: function() { var photos
= this.props.photos.map((photo) => { return <Photo imageSrc={photo.imageSrc} /> }); return <div>{photos}</div>; } });
Virtual DOM •Renders in memory-light virtual DOM •Compares changes between
trees •Flushes only changes to the document •Debounces rendering
Data flow •Components have state as well as props •Minimise
use of state •Handle at top level and pass functions around •Handle externally altogether!
Data flow var Photos = React.createClass({ getInitialState: function() { return
{photos: this.props.photos}; }, onLove: function() { … }, render: function() { var photos = this.state.photos.map((photo) => { return <Photo imageSrc={photo.imageSrc} onLove={this.onLove} /> }); return <div>{photos}</div>; } });
Data flow var Photo = React.createClass({ render: function() { return
<div> <img src={this.props.imageSrc} /> <a onclick={this.props.onLove}>Love</a> </div>; } });
Data flow •YOUR CHOICE •External communication
Example time!
$.fn.reactify <div data-react-component="Photos" data-react-props="{{ photos_json }}"></div> <script> $(document).reactify(); </script>
Work with us photocrowd.com/jobs
Thank you github.com/mjtamlyn twitter.com/mjtamlyn photocrowd.com/mjtamlyn