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
65
Working with Children
mjtamlyn
1
78
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
要件定義・デザインフェーズでもAIを活用して、コミュニケーションの密度を高める
kazukihayase
0
120
La gouvernance territoriale des données grâce à la plateforme Terreze
bluehats
0
180
RSCの時代にReactとフレームワークの境界を探る
uhyo
10
3.5k
KotlinConf 2025_イベントレポート
sony
1
140
DroidKaigi 2025 Androidエンジニアとしてのキャリア
mhidaka
2
370
AWSで始める実践Dagster入門
kitagawaz
1
650
なぜテストマネージャの視点が 必要なのか? 〜 一歩先へ進むために 〜
moritamasami
0
230
Agile PBL at New Grads Trainings
kawaguti
PRO
1
440
dbt開発 with Claude Codeのためのガードレール設計
10xinc
2
1.3k
Practical Agentic AI in Software Engineering
uzyn
0
110
Codeful Serverless / 一人運用でもやり抜く力
_kensh
7
440
「何となくテストする」を卒業するためにプロダクトが動く仕組みを理解しよう
kawabeaver
0
420
Featured
See All Featured
Designing Experiences People Love
moore
142
24k
The Illustrated Children's Guide to Kubernetes
chrisshort
48
50k
For a Future-Friendly Web
brad_frost
180
9.9k
Imperfection Machines: The Place of Print at Facebook
scottboms
268
13k
Faster Mobile Websites
deanohume
309
31k
What’s in a name? Adding method to the madness
productmarketing
PRO
23
3.7k
Distributed Sagas: A Protocol for Coordinating Microservices
caitiem20
333
22k
Measuring & Analyzing Core Web Vitals
bluesmoon
9
580
Responsive Adventures: Dirty Tricks From The Dark Corners of Front-End
smashingmag
252
21k
Java REST API Framework Comparison - PWX 2021
mraible
33
8.8k
CoffeeScript is Beautiful & I Never Want to Write Plain JavaScript Again
sstephenson
162
15k
Typedesign – Prime Four
hannesfritz
42
2.8k
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