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
標準技術と独自システムで作る「つらくない」SaaS アカウント管理 / Effortless SaaS Account Management with Standard Technologies & Custom Systems
yuyatakeyama
3
1.3k
Lambda Web Adapterについて自分なりに理解してみた
smt7174
5
130
「Chatwork」の認証基盤の移行とログ活用によるプロダクト改善
kubell_hr
1
210
GeminiとNotebookLMによる金融実務の業務革新
abenben
0
240
生成AI時代の開発組織・技術・プロセス 〜 ログラスの挑戦と考察 〜
itohiro73
1
330
ひとり情シスなCTOがLLMと始めるオペレーション最適化 / CTO's LLM-Powered Ops
yamitzky
0
450
怖くない!はじめてのClaude Code
shinya337
0
200
Model Mondays S2E03: SLMs & Reasoning
nitya
0
210
Witchcraft for Memory
pocke
1
600
Liquid Glass革新とSwiftUI/UIKit進化
fumiyasac0921
0
270
How Community Opened Global Doors
hiroramos4
PRO
1
130
急成長を支える基盤作り〜地道な改善からコツコツと〜 #cre_meetup
stefafafan
0
140
Featured
See All Featured
Optimising Largest Contentful Paint
csswizardry
37
3.3k
Practical Tips for Bootstrapping Information Extraction Pipelines
honnibal
PRO
20
1.3k
How STYLIGHT went responsive
nonsquared
100
5.6k
Java REST API Framework Comparison - PWX 2021
mraible
31
8.7k
jQuery: Nuts, Bolts and Bling
dougneiner
63
7.8k
Fight the Zombie Pattern Library - RWD Summit 2016
marcelosomers
233
17k
Design and Strategy: How to Deal with People Who Don’t "Get" Design
morganepeng
130
19k
Done Done
chrislema
184
16k
How To Stay Up To Date on Web Technology
chriscoyier
790
250k
4 Signs Your Business is Dying
shpigford
184
22k
Fireside Chat
paigeccino
37
3.5k
Designing for Performance
lara
609
69k
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