An introduction to ReactJS given at JSOxford
Data driven renderingAn introduction to ReactJSMarc TamlynPhoto by Konstans Zafeiri on photocrowd.com
View Slide
This is not•Babel•Webpack•Browserify•Flux•Redux•Relay
Motivation
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 childrenvar 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
JSXvar Photos = React.createClass({render: function() {var photos = this.props.photos.map((photo) => {return });return {photos};}});
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 flowvar Photos = React.createClass({getInitialState: function() {return {photos: this.props.photos};},onLove: function() { … },render: function() {var photos = this.state.photos.map((photo) => {return onLove={this.onLove} />});return {photos};}});
Data flowvar Photo = React.createClass({render: function() {return Love;}});
Data flow•YOUR CHOICE•External communication
Example time!
$.fn.reactifydata-react-props="{{ photos_json }}"><br/>$(document).reactify();<br/>
Work with usphotocrowd.com/jobs
Thank yougithub.com/mjtamlyntwitter.com/mjtamlynphotocrowd.com/mjtamlyn