$30 off During Our Annual Pro Sale. View Details »

React Presentation

vjeux
June 25, 2013

React Presentation

vjeux

June 25, 2013
Tweet

More Decks by vjeux

Other Decks in Programming

Transcript

  1. React is declarative /** @jsx React.DOM */ var HelloMessage =

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

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

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

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

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

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

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

    React.createClass({ render: function() { return <div>{'Hello ' + this.props.name}</div>; } }); React.renderComponent( <HelloMessage name="JS Romandie" />, document.body ); Example 1
  9. 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 );
  10. 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 );
  11. 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 );
  12. React is declarative /** @jsx React.DOM */ var HelloMessage =

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

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

    React.createClass({ render: function() { return <div>{'Hello ' + this.props.name}</div>; } }); React.renderComponent( <HelloMessage name="JS Romandie" />, document.body );
  15. Components are composable /** @jsx React.DOM */ var Message =

    React.createClass({ render: function() { return <span> {this.props.text + " "}</span>; } }); var HelloFullName = React.createClass({ render: function() { return <div> <Message text=”Hello”/> <Message text= {this.props.firstName} /> <Message text= {this.props.firstName} /> </div>; } }); React.renderComponent( <HelloFullName firstName="JS" lastName="Romandie"/>, document.body );
  16. Components are composable /** @jsx React.DOM */ var Message =

    React.createClass({ render: function() { return <span> {this.props.text + " "}</span>; } }); var HelloFullName = React.createClass({ render: function() { return <div> <Message text=”Hello”/> <Message text= {this.props.firstName} /> <Message text= {this.props.firstName} /> </div>; } }); React.renderComponent( <HelloFullName firstName="JS" lastName="Romandie"/>, document.body );
  17. Components are composable /** @jsx React.DOM */ var Message =

    React.createClass({ render: function() { return <span> {this.props.text + " "}</span>; } }); var HelloFullName = React.createClass({ render: function() { return <div> <Message text=”Hello”/> <Message text= {this.props.firstName} /> <Message text= {this.props.firstName} /> </div>; } }); React.renderComponent( <HelloFullName firstName="JS" lastName="Romandie"/>, document.body );
  18. 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
  19. 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
  20. 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
  21. 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
  22. 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
  23. 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
  24. 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
  25. No update function • When state changes, the view is

    re-rendered • React figures out the smallest DOM mutation
  26. 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( <li><input type="text" placeholder="change me!" /></li> ); } return ( <ul> {items} <input type="button" value="Add something" onClick={this.add}/> </ul> ); } }); Example 3
  27. Pitfalls It’s XML! Element have to be balanced: <br> →

    <br /> <img src=”...”> → <img src=”...” />
  28. Pitfalls Render function should return only one node: render: function()

    { return <i class=”icon-trash”></i> delete; }
  29. Pitfalls Render function should return only one node: render: function()

    { return <i class=”icon-trash”></i> delete; } Wrong
  30. Pitfalls Render function should return only one node: render: function()

    { return <i class=”icon-trash”></i> delete; } Wrong render: function() { return <div><i class=”icon-trash”></i> delete</div>; } OK
  31. 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