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
64
Working with Children
mjtamlyn
1
77
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時代にPdMとPMMはどう連携すべきか / PdM–PMM-collaboration-in-AI-era
rakus_dev
0
240
なぜSaaSがMCPサーバーをサービス提供するのか?
sansantech
PRO
4
810
ZOZOマッチのアーキテクチャと技術構成
zozotech
PRO
2
1k
新規案件の立ち上げ専門チームから見たAI駆動開発の始め方
shuyakinjo
0
630
ここ一年のCCoEとしてのAWSコスト最適化を振り返る / CCoE AWS Cost Optimization devio2025
masahirokawahara
1
980
Oracle Cloud Infrastructure:2025年8月度サービス・アップデート
oracle4engineer
PRO
0
170
【 LLMエンジニアがヒューマノイド開発に挑んでみた 】 - 第104回 Machine Learning 15minutes! Hybrid
soneo1127
0
230
Product Management Conference -AI時代に進化するPdM-
kojima111
0
280
allow_retry と Arel.sql / allow_retry and Arel.sql
euglena1215
0
140
実践アプリケーション設計 ②トランザクションスクリプトへの対応
recruitengineers
PRO
4
1.2k
トヨタ生産方式(TPS)入門
recruitengineers
PRO
5
1.4k
見てわかるテスト駆動開発
recruitengineers
PRO
6
2.4k
Featured
See All Featured
The MySQL Ecosystem @ GitHub 2015
samlambert
251
13k
Making Projects Easy
brettharned
117
6.4k
Rebuilding a faster, lazier Slack
samanthasiow
83
9.1k
Gamification - CAS2011
davidbonilla
81
5.4k
Done Done
chrislema
185
16k
Thoughts on Productivity
jonyablonski
69
4.8k
Reflections from 52 weeks, 52 projects
jeffersonlam
351
21k
How to Think Like a Performance Engineer
csswizardry
26
1.9k
YesSQL, Process and Tooling at Scale
rocio
173
14k
Designing for Performance
lara
610
69k
Chrome DevTools: State of the Union 2024 - Debugging React & Beyond
addyosmani
7
830
Practical Tips for Bootstrapping Information Extraction Pipelines
honnibal
PRO
23
1.4k
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