React Presentation

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