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
170
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
59
Working with Children
mjtamlyn
1
76
Wallingford Castle Archers Incorporation
mjtamlyn
0
190
Observation and Evaluation
mjtamlyn
0
100
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
1.1k
What's new in Django 1.9
mjtamlyn
1
180
Django Development Milestones
mjtamlyn
1
160
Other Decks in Technology
See All in Technology
AWS CDK 実践的アプローチ N選 / aws-cdk-practical-approaches
gotok365
4
550
あなたの声を届けよう! 女性エンジニア登壇の意義とアウトプット実践ガイド #wttjp / Call for Your Voice
kondoyuko
2
260
25分で解説する「最小権限の原則」を実現するための AWS「ポリシー」大全
opelab
10
2.3k
エンジニア向け技術スタック情報
kauche
1
110
フィンテック養成勉強会#54
finengine
0
120
監視のこれまでとこれから/sakura monitoring seminar 2025
fujiwara3
10
3k
Абьюзим random_bytes(). Фёдор Кулаков, разработчик Lamoda Tech
lamodatech
0
300
2025/6/21 日本学術会議公開シンポジウム発表資料
keisuke198619
2
480
Кто отправит outbox? Валентин Удальцов, автор канала Пых
lamodatech
0
300
Navigation3でViewModelにデータを渡す方法
mikanichinose
0
220
白金鉱業Meetup_Vol.19_PoCはデモで語れ!顧客の本音とインサイトを引き出すソリューション構築
brainpadpr
2
500
2年でここまで成長!AWSで育てたAI Slack botの軌跡
iwamot
PRO
3
510
Featured
See All Featured
ピンチをチャンスに:未来をつくるプロダクトロードマップ #pmconf2020
aki_iinuma
124
52k
Making Projects Easy
brettharned
116
6.3k
Documentation Writing (for coders)
carmenintech
71
4.9k
Done Done
chrislema
184
16k
RailsConf 2023
tenderlove
30
1.1k
Six Lessons from altMBA
skipperchong
28
3.8k
Making the Leap to Tech Lead
cromwellryan
134
9.3k
Chrome DevTools: State of the Union 2024 - Debugging React & Beyond
addyosmani
7
700
Optimizing for Happiness
mojombo
379
70k
Optimising Largest Contentful Paint
csswizardry
37
3.3k
Unsuck your backbone
ammeep
671
58k
Building a Modern Day E-commerce SEO Strategy
aleyda
41
7.3k
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