Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Data driven rendering

52654cfef40a0579cb31843b01ba49bc?s=47 Marc Tamlyn
February 17, 2016

Data driven rendering

An introduction to ReactJS given at JSOxford

52654cfef40a0579cb31843b01ba49bc?s=128

Marc Tamlyn

February 17, 2016
Tweet

More Decks by Marc Tamlyn

Other Decks in Technology

Transcript

  1. Data driven rendering An introduction to ReactJS Marc Tamlyn Photo

    by Konstans Zafeiri on photocrowd.com
  2. None
  3. This is not •Babel •Webpack •Browserify •Flux •Redux •Relay

  4. Motivation

  5. None
  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