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

Data driven rendering

Marc Tamlyn
February 17, 2016

Data driven rendering

An introduction to ReactJS given at JSOxford

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

    View Slide

  2. View Slide

  3. This is not
    •Babel
    •Webpack
    •Browserify
    •Flux
    •Redux
    •Relay

    View Slide

  4. Motivation

    View Slide

  5. View Slide

  6. Motivation
    •Responsive to input changes
    •Interactivity
    •Rendering only
    •Not a jQuery mess!

    View Slide

  7. What is React?
    •View layer of a traditional MVC
    •Virtual DOM
    •Single directional data flow

    View Slide

  8. What is a Component?
    •Takes input (props)
    •Returns an element
    •Class with a render() method

    View Slide

  9. What is a Component?
    var Photo = React.createClass({
    render: function() {
    return React.createElement('img', {
    src: this.props.imageSrc,
    });
    }
    });

    View Slide

  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);
    }
    });

    View Slide

  11. JSX
    •Preprocessor for React.createElement()
    •Compile using your JS preprocessor of choice

    View Slide

  12. JSX
    var Photos = React.createClass({
    render: function() {
    var photos = this.props.photos.map((photo) => {
    return
    });
    return {photos};
    }
    });

    View Slide

  13. Virtual DOM
    •Renders in memory-light virtual DOM
    •Compares changes between trees
    •Flushes only changes to the document
    •Debounces rendering

    View Slide

  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!

    View Slide

  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 onLove={this.onLove} />
    });
    return {photos};
    }
    });

    View Slide

  16. Data flow
    var Photo = React.createClass({
    render: function() {
    return

    Love
    ;
    }
    });

    View Slide

  17. Data flow
    •YOUR CHOICE
    •External communication

    View Slide

  18. Example time!

    View Slide

  19. $.fn.reactify
    data-react-props="{{ photos_json }}">
    <br/>$(document).reactify();<br/>

    View Slide

  20. Work with us
    photocrowd.com/jobs

    View Slide

  21. Thank you
    github.com/mjtamlyn
    twitter.com/mjtamlyn
    photocrowd.com/mjtamlyn

    View Slide