Data driven rendering

An introduction to ReactJS given at JSOxford

Transcript

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