Construindo interfaces componentizadas com React

Construindo interfaces componentizadas com React

Tweet

Transcript

  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

  13. None
  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

  39. None
  40. Virtual DOM

  41. Por que mutação é ruim

  42. None
  43. None
  44. computa a diferença aplica a mudança cria/altera

  45. Dúvidas? discussões apenas apenas no bar!