React Presentation

https://twitter.com/renajohn/status/349103656571904000

Transcript

1. Facebook React
   http://facebook.github.io/react/index.html
   Renault John Lecoultre
   @renajohn
   rjl@bugbuster.com
   

   View Slide

2. Disclaimer
   There will be in this presentation
   

   View Slide

3. React is a JavaScript library to build
   reusable UI components
   

   View Slide

4. React is used in production
   Main page
   Some parts
   

   View Slide

5. React is declarative
   /** @jsx React.DOM */
   var HelloMessage = React.createClass({
   render: function() {
   return {'Hello ' + this.props.name};
   }
   });
   React.renderComponent(
   ,
   document.body
   );
   Example 1
   

   View Slide

6. React is declarative
   /** @jsx React.DOM */
   var HelloMessage = React.createClass({
   render: function() {
   return {'Hello ' + this.props.name};
   }
   });
   React.renderComponent(
   ,
   document.body
   );
   Example 1
   Component render function
   

   View Slide

7. React is declarative
   /** @jsx React.DOM */
   var HelloMessage = React.createClass({
   render: function() {
   return {'Hello ' + this.props.name};
   }
   });
   React.renderComponent(
   ,
   document.body
   );
   Example 1
   Inject component in DOM
   

   View Slide

8. React is declarative
   /** @jsx React.DOM */
   var HelloMessage = React.createClass({
   render: function() {
   return {'Hello ' + this.props.name};
   }
   });
   React.renderComponent(
   ,
   document.body
   );
   Example 1
   Access component
   properties
   (attributes and childern)
   

   View Slide

9. React is declarative
   /** @jsx React.DOM */
   var HelloMessage = React.createClass({
   render: function() {
   return {'Hello ' + this.props.name};
   }
   });
   React.renderComponent(
   ,
   document.body
   );
   Example 1
   

   View Slide

10. React is declarative
    /** @jsx React.DOM */
    var HelloMessage = React.createClass({
    render: function() {
    return {'Hello ' + this.props.name};
    }
    });
    React.renderComponent(
    ,
    document.body
    );
    Example 1
    

    View Slide

11. React is declarative
    /** @jsx React.DOM */
    var HelloMessage = React.createClass({
    render: function() {
    return {'Hello ' + this.props.name};
    }
    });
    React.renderComponent(
    ,
    document.body
    );
    Example 1
    

    View Slide

12. React is declarative
    /** @jsx React.DOM */
    var HelloMessage = React.createClass({
    render: function() {
    return {'Hello ' + this.props.name};
    }
    });
    React.renderComponent(
    ,
    document.body
    );
    Example 1
    

    View Slide

13. is not strictly mandatory
    var HelloMessage = React.createClass({
    render: function() {
    return React.DOM.div({},
    'Hello ' + this.props.name});
    }
    });
    React.renderComponent(
    HelloMessage({ name: "JS Romandie" }),
    document.body
    );
    

    View Slide

14. is not strictly mandatory
    var HelloMessage = React.createClass({
    render: function() {
    return React.DOM.div({},
    'Hello ' + this.props.name});
    }
    });
    React.renderComponent(
    HelloMessage({ name: "JS Romandie" }),
    document.body
    );
    

    View Slide

15. is not strictly mandatory
    var HelloMessage = React.createClass({
    render: function() {
    return React.DOM.div({},
    'Hello ' + this.props.name});
    }
    });
    React.renderComponent(
    HelloMessage({ name: "JS Romandie" }),
    document.body
    );
    

    View Slide

16. React is declarative
    /** @jsx React.DOM */
    var HelloMessage = React.createClass({
    render: function() {
    return {'Hello ' + this.props.name};
    }
    });
    React.renderComponent(
    ,
    document.body
    );
    

    View Slide

17. React is declarative
    /** @jsx React.DOM */
    var HelloMessage = React.createClass({
    render: function() {
    return {'Hello ' + this.props.name};
    }
    });
    React.renderComponent(
    ,
    document.body
    );
    Import all HTML elements
    as React components
    

    View Slide

18. React is declarative
    /** @jsx React.DOM */
    var HelloMessage = React.createClass({
    render: function() {
    return {'Hello ' + this.props.name};
    }
    });
    React.renderComponent(
    ,
    document.body
    );
    

    View Slide

19. Components are composable
    /** @jsx React.DOM */
    var Message = React.createClass({
    render: function() {
    return {this.props.text + " "};
    }
    });
    var HelloFullName = React.createClass({
    render: function() {
    return
    
    
    
    ;
    }
    });
    React.renderComponent(
    ,
    document.body
    );
    

    View Slide

20. Components are composable
    /** @jsx React.DOM */
    var Message = React.createClass({
    render: function() {
    return {this.props.text + " "};
    }
    });
    var HelloFullName = React.createClass({
    render: function() {
    return
    
    
    
    ;
    }
    });
    React.renderComponent(
    ,
    document.body
    );
    

    View Slide

21. Components are composable
    /** @jsx React.DOM */
    var Message = React.createClass({
    render: function() {
    return {this.props.text + " "};
    }
    });
    var HelloFullName = React.createClass({
    render: function() {
    return
    
    
    
    ;
    }
    });
    React.renderComponent(
    ,
    document.body
    );
    

    View Slide

22. var Timer = React.createClass({
    });
    React.renderComponent(Timer({}), document.body);
    React components are stateful
    

    View Slide

23. var Timer = React.createClass({
    getInitialState: function() {
    return {secondsElapsed: 0};
    },
    render: function() {
    return React.DOM.div({},
    'Seconds Elapsed: ' + this.state.secondsElapsed
    );
    }
    });
    React.renderComponent(Timer({}), document.body);
    React components are stateful
    

    View Slide

24. var Timer = React.createClass({
    getInitialState: function() {
    return {secondsElapsed: 0};
    },
    render: function() {
    return React.DOM.div({},
    'Seconds Elapsed: ' + this.state.secondsElapsed
    );
    }
    });
    React.renderComponent(Timer({}), document.body);
    React components are stateful
    Defined initial state. Called
    just once per component
    

    View Slide

25. var Timer = React.createClass({
    getInitialState: function() {
    return {secondsElapsed: 0};
    },
    render: function() {
    return React.DOM.div({},
    'Seconds Elapsed: ' + this.state.secondsElapsed
    );
    }
    });
    React.renderComponent(Timer({}), document.body);
    React components are stateful
    Retrieve component state
    

    View Slide

26. var Timer = React.createClass({
    getInitialState: function() {
    return {secondsElapsed: 0};
    },
    render: function() {
    return React.DOM.div({},
    'Seconds Elapsed: ' + this.state.secondsElapsed
    );
    }
    });
    React.renderComponent(Timer({}), document.body);
    React components are stateful
    

    View Slide

27. var Timer = React.createClass({
    getInitialState: function() {
    return {secondsElapsed: 0};
    },
    tick: React.autoBind(function() {
    this.setState({secondsElapsed: this.state.secondsElapsed + 1});
    }),
    componentDidMount: function() {
    setInterval(this.tick, 1000);
    },
    render: function() {
    return React.DOM.div({},
    'Seconds Elapsed: ' + this.state.secondsElapsed
    );
    }
    });
    React.renderComponent(Timer({}), document.body);
    Example 2
    React components are stateful
    

    View Slide

28. var Timer = React.createClass({
    getInitialState: function() {
    return {secondsElapsed: 0};
    },
    tick: React.autoBind(function() {
    this.setState({secondsElapsed: this.state.secondsElapsed + 1});
    }),
    componentDidMount: function() {
    setInterval(this.tick, 1000);
    },
    render: function() {
    return React.DOM.div({},
    'Seconds Elapsed: ' + this.state.secondsElapsed
    );
    }
    });
    React.renderComponent(Timer({}), document.body);
    Example 2
    React components are stateful
    Always use setState when
    changing state
    

    View Slide

29. var Timer = React.createClass({
    getInitialState: function() {
    return {secondsElapsed: 0};
    },
    tick: React.autoBind(function() {
    this.setState({secondsElapsed: this.state.secondsElapsed + 1});
    }),
    componentDidMount: function() {
    setInterval(this.tick, 1000);
    },
    render: function() {
    return React.DOM.div({},
    'Seconds Elapsed: ' + this.state.secondsElapsed
    );
    }
    });
    React.renderComponent(Timer({}), document.body);
    Example 2
    React components are stateful
    

    View Slide

30. No update function
    • When state changes, the view is re-rendered
    • React figures out the smallest DOM mutation
    

    View Slide

31. React reconciliation
    /** @jsx React.DOM */
    var TextBoxList = React.createClass({
    getInitialState: function() { return {count: 1}; },
    add: React.autoBind(function() {
    this.setState({count: this.state.count + 1});
    }),
    render: function() {
    var items = [];
    for (var i = 0; i < this.state.count; i++) {
    items.push(
    
    );
    }
    return (
    
    {items}
    
    
    );
    }
    }); Example 3
    

    View Slide

32. Pitfalls
    It’s XML! Element have to be balanced:
    
    →
    
    →
    

    View Slide

33. Pitfalls
    Render function should return only one node:
    render: function() {
    return delete;
    }
    

    View Slide

34. Pitfalls
    Render function should return only one node:
    render: function() {
    return delete;
    }
    Wrong
    

    View Slide

35. Pitfalls
    Render function should return only one node:
    render: function() {
    return delete;
    }
    Wrong
    render: function() {
    return delete;
    }
    OK
    

    View Slide

36. React tutorial
    • Optimistic commenting: comments appear in the
    list before they're saved on the server so it feels
    fast.
    • Live updates: new comments appears in real time
    • Markdown formatting: users can use Markdown
    to format their text
    Building a commenting widget
    Demo
    

    View Slide

37. Thank you
    Renault John Lecoultre
    rjl@bugbuster.com
    

    View Slide