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
37
Working with Children
mjtamlyn
1
66
Wallingford Castle Archers Incorporation
mjtamlyn
0
160
Observation and Evaluation
mjtamlyn
0
80
Weird and Wonderful things to do with the ORM
mjtamlyn
3
1.2k
An Introduction to Graphene and Relay
mjtamlyn
6
1.2k
Tech Interviews that don't suck
mjtamlyn
4
990
What's new in Django 1.9
mjtamlyn
1
160
Django Development Milestones
mjtamlyn
1
140
Other Decks in Technology
See All in Technology
さくっと実践!Postmanを活用した高品質で持続可能なAPI管理
yokawasa
5
360
Japan AWS Jr. Championsがお届けする、アウトプットのすすめ
hamijay_cloud
0
200
40代後半で開発エンジニアからクラウドインフラエンジニアにキャリアチェンジし、生き残れる自信がようやく持てた話
iwamot
9
8.1k
寒冷地稲作の歴史にみるコミュニティ
miu_crescent
2
140
Reality is not an End-to-End Prediction Problem: Applied NLP in the Age of Generative AI
inesmontani
PRO
0
110
Amazon Managed Grafana で AWS IoT TwinMaker によるデジタルツインアプリケーションを動かしてみた
wakatsuki
0
110
Unlearn Modularity
lemiorhan
6
300
Snowflakeでスロークエリ改善に取り組んだ話
tabata0208
0
110
LINE-ChatGPT 倫理問題を整理する全力肯定彼氏くん [LuC4]に訪れたサービス開始以来の最大の危機
o_ob
2
300
Microsoft 365 でデータセキュリティを強化しよう
sophiakunii
2
470
0x5F3759DF
ykozw
0
330
塩野義製薬様のAWS統合管理戦略:Organizations設計と運用の具体例
tkikuchi
0
310
Featured
See All Featured
The Myth of the Modular Monolith - Day 2 Keynote - Rails World 2024
eileencodes
13
1.8k
The Language of Interfaces
destraynor
154
24k
Into the Great Unknown - MozCon
thekraken
31
1.4k
Refactoring Trust on Your Teams (GOTO; Chicago 2020)
rmw
31
2.6k
Building a Scalable Design System with Sketch
lauravandoore
459
33k
Rails Girls Zürich Keynote
gr2m
93
13k
How To Stay Up To Date on Web Technology
chriscoyier
788
250k
Understanding Cognitive Biases in Performance Measurement
bluesmoon
26
1.4k
Pencils Down: Stop Designing & Start Developing
hursman
119
11k
Building Applications with DynamoDB
mza
90
6k
Evolution of real-time – Irina Nazarova, EuRuKo, 2024
irinanazarova
4
250
Mobile First: as difficult as doing things right
swwweet
222
8.9k
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