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
66
Working with Children
mjtamlyn
1
79
Wallingford Castle Archers Incorporation
mjtamlyn
0
190
Observation and Evaluation
mjtamlyn
0
110
Weird and Wonderful things to do with the ORM
mjtamlyn
3
1.4k
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
190
Django Development Milestones
mjtamlyn
1
170
Other Decks in Technology
See All in Technology
How to achieve interoperable digital identity across Asian countries
fujie
0
110
定期的な価値提供だけじゃない、スクラムが導くチームの共創化 / 20251004 Naoki Takahashi
shift_evolve
PRO
3
300
ZOZOのAI活用実践〜社内基盤からサービス応用まで〜
zozotech
PRO
0
170
生成AIを活用したZennの取り組み事例
ryosukeigarashi
0
200
職種別ミートアップで社内から盛り上げる アウトプット文化の醸成と関係強化/ #DevRelKaigi
nishiuma
2
130
Why Governance Matters: The Key to Reducing Risk Without Slowing Down
sarahjwells
0
110
Goにおける 生成AIによるコード生成の ベンチマーク評価入門
daisuketakeda
2
100
Why React!?? Next.jsそしてReactを改めてイチから選ぶ
ypresto
10
4.4k
組織観点からIAM Identity CenterとIAMの設計を考える
nrinetcom
PRO
1
170
Access-what? why and how, A11Y for All - Nordic.js 2025
gdomiciano
1
110
GC25 Recap+: Advancing Go Garbage Collection with Green Tea
logica0419
1
400
Goに育てられ開発者向けセキュリティ事業を立ち上げた僕が今向き合う、AI × セキュリティの最前線 / Go Conference 2025
flatt_security
0
350
Featured
See All Featured
"I'm Feeling Lucky" - Building Great Search Experiences for Today's Users (#IAC19)
danielanewman
229
22k
Facilitating Awesome Meetings
lara
56
6.6k
Making Projects Easy
brettharned
119
6.4k
What’s in a name? Adding method to the madness
productmarketing
PRO
23
3.7k
実際に使うSQLの書き方 徹底解説 / pgcon21j-tutorial
soudai
PRO
188
55k
Responsive Adventures: Dirty Tricks From The Dark Corners of Front-End
smashingmag
252
21k
I Don’t Have Time: Getting Over the Fear to Launch Your Podcast
jcasabona
33
2.5k
Evolution of real-time – Irina Nazarova, EuRuKo, 2024
irinanazarova
9
960
For a Future-Friendly Web
brad_frost
180
9.9k
Why Our Code Smells
bkeepers
PRO
339
57k
Imperfection Machines: The Place of Print at Facebook
scottboms
269
13k
Thoughts on Productivity
jonyablonski
70
4.9k
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