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

React Presentation

48a313e2ad9f47036b3a4d073cef3e54?s=47 vjeux
June 25, 2013

React Presentation

48a313e2ad9f47036b3a4d073cef3e54?s=128

vjeux

June 25, 2013
Tweet

Transcript

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

  2. Disclaimer There will be in this presentation

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

  4. React is used in production Main page Some parts

  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 Component render function
  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 Inject component in DOM
  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 Access component properties (attributes and childern)
  9. 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
  10. 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
  11. 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
  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 ); Example 1
  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 );
  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 );
  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 );
  16. 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 );
  17. 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
  18. 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 );
  19. 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 );
  20. 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 );
  21. 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 );
  22. var Timer = React.createClass({ }); React.renderComponent(Timer({}), document.body); React components are

    stateful
  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
  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
  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
  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
  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
  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
  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
  30. No update function • When state changes, the view is

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

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

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

    { return <i class=”icon-trash”></i> delete; } Wrong
  35. 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
  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
  37. Thank you Renault John Lecoultre rjl@bugbuster.com