Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Speaker Deck
PRO
Sign in
Sign up for free
Data driven rendering
Marc Tamlyn
February 17, 2016
Technology
1
130
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
24
Working with Children
mjtamlyn
1
21
Wallingford Castle Archers Incorporation
mjtamlyn
0
130
Observation and Evaluation
mjtamlyn
0
67
Weird and Wonderful things to do with the ORM
mjtamlyn
3
880
An Introduction to Graphene and Relay
mjtamlyn
6
1k
Tech Interviews that don't suck
mjtamlyn
4
770
What's new in Django 1.9
mjtamlyn
1
150
Django Development Milestones
mjtamlyn
1
130
Other Decks in Technology
See All in Technology
[Journal club] Vision Transformer with Deformable Attention
keio_smilab
PRO
0
120
20220731 如何跟隨開源技術保持你的職涯發展
pichuang
0
120
Djangoで組織とユーザーの権限管理をやってみよう #devio2022
seiichi1101
0
460
ロボットの実行すらメンドクサイ!?
kou12092
0
230
Red Hat Enterprise Linux 9のリリースノートを読む前に知りたい最近のキーワードをまとめて復習
moriwaka
0
380
サイバー攻撃を想定したクラウドネイティブセキュリティガイドラインとCNAPP及びSecurity Observabilityの未来
syoshie
2
1.5k
Power Automate for desktopで 配信環境を改善してみた話
akiika
0
340
Sysdig Secure/Falcoの活用術! ~Kubernetes基盤の脅威モデリングとランタイムセキュリティの強化~
owlinux1000
0
310
Step-by-Step MLOps and Microsoft Products
shisyu_gaku
2
610
CityGMLとFBXの連携で地理空間のエンタメ化
soh_mitian
0
770
DevRel組織についての考察
taijihagino
PRO
0
150
20220803投資先CXO候補者向け 会社紹介資料_合同会社BLUEPRINT
hik
0
590
Featured
See All Featured
Robots, Beer and Maslow
schacon
152
7.2k
A better future with KSS
kneath
226
16k
Building Your Own Lightsaber
phodgson
95
4.7k
Navigating Team Friction
lara
175
11k
Visualization
eitanlees
125
12k
Atom: Resistance is Futile
akmur
255
20k
Fashionably flexible responsive web design (full day workshop)
malarkey
396
62k
CSS Pre-Processors: Stylus, Less & Sass
bermonpainter
349
27k
JazzCon 2018 Closing Keynote - Leadership for the Reluctant Leader
reverentgeek
173
8.6k
Writing Fast Ruby
sferik
612
57k
Stop Working from a Prison Cell
hatefulcrawdad
262
17k
Principles of Awesome APIs and How to Build Them.
keavy
113
15k
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