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

React Presentation

Avatar for vjeux vjeux
June 25, 2013

React Presentation

Avatar for vjeux

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