Construindo interfaces componentizadas com React

1. Construindo interfaces componentizadas com
2. CTO e Co-fundador da INBEP, startup com foco em educação. Sérgio Rafael Siqueira github.com/sergiors sergiorsiqueira.com sergio@inbep.com.br
3. React é uma library com foco em interface do usuário
4. Quem usa
5. Library Framework
6. O que é interface do usuário?
7. • Model • Collection
8. “ É tudo que o usuário pode interagir
9. {{ mustache }}
10. <script id="entry-template" type="text/x-handlebars-template"> <p> {{#if liked}} You like this. Click to toggle. {{else}} You haven't liked this. Click to toggle. {{/if}} </p> </script>
11. {{ mustache }} <p> {{#liked}} You like this. Click to toggle. {{^liked}} You haven't liked this. Click to toggle. {{/liked}} </p>
12. Template + Javascript = Interface
14. var LikeButton = React.createClass({ getInitialState: function() { return { liked: false } }, handleClick: function() { this.setState({ liked: !this.state.liked }); }, render: function () { var text = this.state.liked ? 'like' : 'haven\'t liked'; return React.DOM.p({onClick: this.handleClick}, 'You '+text+' this.'); } });
15. var LikeButton = React.createClass({ getInitialState: function() { return { liked: false } }, handleClick: function() { this.setState({ liked: !this.state.liked }); }, render: function () { var text = this.state.liked ? 'like' : 'haven\'t liked'; return React.DOM.p({onClick: this.handleClick}, 'You '+text+' this.'); } });
16. var LikeButton = React.createClass({ getInitialState: function() { return { liked: false } }, handleClick: function() { this.setState({ liked: !this.state.liked }); }, render: function () { var text = this.state.liked ? 'like' : 'haven\'t liked'; return React.DOM.p({onClick: this.handleClick}, 'You '+text+' this.'); } });
17. var LikeButton = React.createClass({ getInitialState: function() { return { liked: false } }, handleClick: function() { this.setState({ liked: !this.state.liked }); }, render: function () { var text = this.state.liked ? 'like' : 'haven\'t liked'; return React.DOM.p({onClick: this.handleClick}, 'You '+text+' this.'); } });
18. var LikeButton = React.createClass({ getInitialState: function() { return { liked: false } }, handleClick: function() { this.setState({ liked: !this.state.liked }); }, render: function () { var text = this.state.liked ? 'like' : 'haven\'t liked'; return React.DOM.p({onClick: this.handleClick}, 'You '+text+' this.'); } });
19. var LikeButton = React.createClass({ getInitialState: function() { return { liked: false } }, handleClick: function() { this.setState({ liked: !this.state.liked }); }, render: function () { var text = this.state.liked ? 'like' : 'haven\'t liked'; return React.DOM.p({onClick: this.handleClick}, 'You '+text+' this.'); } });
20. var LikeButton = React.createClass({ getInitialState: function() { return { liked: false } }, handleClick: function() { this.setState({ liked: !this.state.liked }); }, render: function () { var text = this.state.liked ? 'like' : 'haven\'t liked'; return React.DOM.p({onClick: this.handleClick}, 'You '+text+' this.'); } });
21. http://facebook.github.io/react/docs/component-specs.html#component-specifications { getDefaultProps: function() {}, propTypes: function() {}, mixins: function() {}, // ... }
22. “ Legal cara, mas a marcação do Template Engine parece mais fácil…
23. JSX
24. var LikeButton = React.createClass({ getInitialState: function() { return {liked: false} }, handleClick: function() { this.setState({liked: !this.state.liked}); }, render: function () { var text = this.state.liked ? 'like' : 'haven\'t liked'; return ( <div onClick={this.handleClick}> You {text} this. Click to toggle. </div> ); } });
25. JSX on the fly <script src="node_modules/react/dist/JSXTransformer.js"></script> <script src=“like-button.js" type="text/jsx"></script>
26. Task runner
27. E se já tenho dados em uma camada de persistência?
28. var LikeButton = React.createClass({ getInitialState: function() { return { liked: this.props.liked || false } }, componentWillMount: function() { Backbone.Events.on('change:anywhere', function(data) { this.setState({ liked: data.liked }); }.bind(this)); }, handleClick: function() { this.setState({liked: !this.state.liked}); }, render: function () { var text = this.state.liked ? 'like' : 'haven\'t liked'; return ( <div onClick={this.handleClick}>
29. Métodos de ciclo de vida
30. Mounting Updating componentWillMount componentDidMount componentWillReceiveProps shouldComponentUpdate componentWillUpdate componentDidUpdate Unmounting componentWillUnmount http://facebook.github.io/react/docs/component-specs.html#mounting-componentwillmount
31. var LikeButton = React.createClass({ getInitialState: function() { return {liked: false} }, componentWillMount: function() { Backbone.Events.on('change:anywhere', function(data) { this.setState({ liked: data.liked }); }.bind(this)); }, handleClick: function() { this.setState({liked: !this.state.liked}); }, render: function () { var text = this.state.liked ? 'like' : 'haven\'t liked'; return ( <div onClick={this.handleClick}> You '+text+' this. Click to toggle. </div>
32. Chamado imediatamente antes do render inicial. componentWillMount
33. var LikeButton = React.createClass({ getInitialState: function() { return {liked: false} }, componentDidMount: function() { $.ajax('example.php') .done(function(res) { this.setState({ liked: res.liked }); }.bind(this)); }, handleClick: function() { this.setState({liked: !this.state.liked}); }, render: function () { var text = this.state.liked ? 'like' : 'haven\'t liked'; return ( <div onClick={this.handleClick}> You '+text+' this. Click to toggle.
34. componentDidMount Chamado imediatamente após o render inicial. A DOM já esta pronta! Ideal para trabalhar com biblioteca de terceiros que precisam do objeto na DOM.
35. Performance
36. Event Delegation
37. <div id="um"> <div id="dois"> <div id="tres"></div> </div> </div>
38. http://loopinfinito.com.br/2013/05/14/entendendo-captura-e-propagacao-de-eventos/ .0 -> #um .0.0 -> #dois .0.0.0 -> #tres
40. Virtual DOM
41. Por que mutação é ruim
44. computa a diferença aplica a mudança cria/altera
45. Dúvidas? discussões apenas apenas no bar!