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
160
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
55
Working with Children
mjtamlyn
1
75
Wallingford Castle Archers Incorporation
mjtamlyn
0
180
Observation and Evaluation
mjtamlyn
0
98
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
FastMCPでSQLをチェックしてくれるMCPサーバーを自作してCursorから動かしてみた
nayuts
1
220
オープンソースのハードウェアのコンテストに参加している話
iotengineer22
0
670
単一Gitリポジトリから独立しました
lycorptech_jp
PRO
0
110
Devin&Cursor、それぞれの「本質」から導く最適ユースケース戦略
empitsu
8
2.5k
人とAIとの共創を夢見た2か月 #共創AIミートアップ / Co-Creation with Keito-chan
kondoyuko
1
720
セキュリティSaaS企業が実践するCursor運用ルールと知見 / How a Security SaaS Company Runs Cursor: Rules & Insights
tetsuzawa
0
500
エンジニアが組織に馴染むために勉強会を主催してチームの壁を越える
ohmori_yusuke
2
120
会社員しながら本を書いてきた知見の共有
sat
PRO
3
690
アプリケーションの中身が見える!Mackerel APMの全貌と展望 / Mackerel APMリリースパーティ
mackerelio
0
450
AIコードエディタは開発を変えるか?Cursorをチームに導入して1ヶ月経った本音
ota1022
1
710
会社紹介資料 / Sansan Company Profile
sansan33
PRO
6
360k
All About Sansan – for New Global Engineers
sansan33
PRO
1
1.2k
Featured
See All Featured
The Web Performance Landscape in 2024 [PerfNow 2024]
tammyeverts
5
620
Designing for humans not robots
tammielis
253
25k
Why Our Code Smells
bkeepers
PRO
336
57k
Unsuck your backbone
ammeep
671
58k
[Rails World 2023 - Day 1 Closing Keynote] - The Magic of Rails
eileencodes
34
2.3k
VelocityConf: Rendering Performance Case Studies
addyosmani
329
24k
Dealing with People You Can't Stand - Big Design 2015
cassininazir
367
26k
Side Projects
sachag
454
42k
A better future with KSS
kneath
239
17k
Embracing the Ebb and Flow
colly
85
4.7k
I Don’t Have Time: Getting Over the Fear to Launch Your Podcast
jcasabona
32
2.3k
Automating Front-end Workflow
addyosmani
1370
200k
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