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
   

   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