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
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