Slide 1
Slide 1 text
Data driven rendering
An introduction to ReactJS
Marc Tamlyn
Photo by Konstans Zafeiri on photocrowd.com
Slide 2
Slide 2 text
No content
Slide 3
Slide 3 text
This is not
•Babel
•Webpack
•Browserify
•Flux
•Redux
•Relay
Slide 4
Slide 4 text
Motivation
Slide 5
Slide 5 text
No content
Slide 6
Slide 6 text
Motivation
•Responsive to input changes
•Interactivity
•Rendering only
•Not a jQuery mess!
Slide 7
Slide 7 text
What is React?
•View layer of a traditional MVC
•Virtual DOM
•Single directional data flow
Slide 8
Slide 8 text
What is a Component?
•Takes input (props)
•Returns an element
•Class with a render() method
Slide 9
Slide 9 text
What is a Component?
var Photo = React.createClass({
render: function() {
return React.createElement('img', {
src: this.props.imageSrc,
});
}
});
Slide 10
Slide 10 text
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);
}
});
Slide 11
Slide 11 text
JSX
•Preprocessor for React.createElement()
•Compile using your JS preprocessor of choice
Slide 12
Slide 12 text
JSX
var Photos = React.createClass({
render: function() {
var photos = this.props.photos.map((photo) => {
return
});
return
{photos}
;
}
});
Slide 13
Slide 13 text
Virtual DOM
•Renders in memory-light virtual DOM
•Compares changes between trees
•Flushes only changes to the document
•Debounces rendering
Slide 14
Slide 14 text
Data flow
•Components have state as well as props
•Minimise use of state
•Handle at top level and pass functions around
•Handle externally altogether!
Slide 15
Slide 15 text
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
});
return
{photos}
;
}
});
Slide 16
Slide 16 text
Data flow
var Photo = React.createClass({
render: function() {
return ;
}
});
Slide 17
Slide 17 text
Data flow
•YOUR CHOICE
•External communication
Slide 18
Slide 18 text
Example time!
Slide 19
Slide 19 text
$.fn.reactify
$(document).reactify();
Slide 20
Slide 20 text
Work with us
photocrowd.com/jobs
Slide 21
Slide 21 text
Thank you
github.com/mjtamlyn
twitter.com/mjtamlyn
photocrowd.com/mjtamlyn