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
140
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
28
Working with Children
mjtamlyn
1
50
Wallingford Castle Archers Incorporation
mjtamlyn
0
160
Observation and Evaluation
mjtamlyn
0
75
Weird and Wonderful things to do with the ORM
mjtamlyn
3
1.1k
An Introduction to Graphene and Relay
mjtamlyn
6
1.1k
Tech Interviews that don't suck
mjtamlyn
4
920
What's new in Django 1.9
mjtamlyn
1
160
Django Development Milestones
mjtamlyn
1
140
Other Decks in Technology
See All in Technology
Meta Quest 3 で動く桜マシマシ WebXR アプリを IBM Cloud Code Engine と Babylon.js で作った話
1ftseabass
PRO
0
120
データベース02: データベースの概念
trycycle
0
130
Algyan イベント振り返り
linyixian
0
200
少数チームで挑む: SwiftUI, TCA, KMPを用いた 新規動画配信アプリ 「ABEMA Live」の開発について
tomu28
0
610
日本におけるデータエンジニアリングのこれまでとこれから
foursue
16
4k
20240416_devopsdaystokyo
kzkmaeda
1
210
現代CSSフレームワークの内部実装とその仕組み
poteboy
8
3.4k
Azure Container Apps + Bicep 〜 こんな感じで運用しています
kaz29
2
400
プロトタイピングによる不確実性の低減 / Reducing Uncertainty through Prototyping
ohbarye
5
370
開発生産性向上サービスを作るFindyが自分たちで開発生産性を爆上げした組織づくりの歩み / Findy's path to boosting its own development productivity 2024-04-17
ma3tk
3
470
自動生成を活用した、運用保守コストを抑える Error/Alert/Runbook の一元集約管理 / Centralized management of Error/Alert/Runbook to minimize operational costs using automated code generation
biwashi
12
2.3k
元インフラエンジニアに成る / Human Resources to Human Relations
bobtani
4
890
Featured
See All Featured
Build your cross-platform service in a week with App Engine
jlugia
225
17k
The Success of Rails: Ensuring Growth for the Next 100 Years
eileencodes
30
6k
Put a Button on it: Removing Barriers to Going Fast.
kastner
58
3k
BBQ
matthewcrist
80
8.8k
Designing for Performance
lara
601
67k
Keith and Marios Guide to Fast Websites
keithpitt
408
22k
Fireside Chat
paigeccino
20
2.6k
From Idea to $5000 a Month in 5 Months
shpigford
377
45k
Atom: Resistance is Futile
akmur
258
25k
Statistics for Hackers
jakevdp
789
220k
Documentation Writing (for coders)
carmenintech
59
3.9k
YesSQL, Process and Tooling at Scale
rocio
163
13k
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