React - A JavaScript library for building user interfaces

492a25871b1279286bdb95c7bacb7697?s=47 Helielson
October 04, 2014

React - A JavaScript library for building user interfaces

Talk about ReactJS presented at JusBrasil

492a25871b1279286bdb95c7bacb7697?s=128

Helielson

October 04, 2014
Tweet

Transcript

  1. A javascript library for building user interfaces

  2. Helielson @hyetho @helielson

  3. Topics What is React? Components SEO Performance Testing Community Who

    uses
  4. What's the best way to structure javascript applications?

  5. There are a lot of javascript frameworks

  6. Agility.js AngularJS Backbone.js CanJS Derby Dojo Ember.js Firebase + AngularJS

    Flight jQuery KnockoutJS Knockback.js Maria Meteor Polymer React SocketStream Vanilla JS YUI todomvc.com
  7. Most of them... Observable Objects Mutation -> Update

  8. What do we need? Re-render the entire component

  9. How?

  10. Re-rendering the DOM on each update is very expensive

  11. On each update - builds a new virtual DOM subtree

    - diffs it with the old one - computes the minimal set of DOM mutations and put them in a queue - batch executes all updates
  12. None
  13. But, what's react?

  14. None
  15. Is it a template language like handlebars.js?

  16. Nooooooooooo! "To set the record straight: React components are far

    more powerful than Angular templates; they should be compared with Angular’s directives instead. [Directives are Angular's way of creating custom elements]." Pete Hunt quora.com/Pete-Hunt/Posts/Facebooks-React-vs-AngularJS-A-Closer-Look
  17. var React = require('React'); var HelloMessage = React.createClass({ render: function()

    { return React.DOM.div( null, "Hello ", this.props.name); } }); React.renderComponent( HelloMessage({name: "John"}), mountNode); my-button.js
  18. var React = require('React'); var HelloMessage = React.createClass({ render: function()

    { return React.DOM.div( null, "Hello ", this.props.name); } }); React.renderComponent( HelloMessage({name: "John"}), mountNode); my-button.js
  19. var React = require('React'); var HelloMessage = React.createClass({ render: function()

    { return React.DOM.div( null, "Hello ", this.props.name); } }); React.renderComponent( HelloMessage({name: "John"}), mountNode); my-button.js
  20. var React = require('React'); var HelloMessage = React.createClass({ render: function()

    { return React.DOM.div( null, "Hello ", this.props.name); } }); React.renderComponent( HelloMessage({name: "John"}), mountNode); my-button.js
  21. var React = require('React'); var HelloMessage = React.createClass({ render: function()

    { return React.DOM.div( null, "Hello ", this.props.name); } }); React.renderComponent( HelloMessage({name: "John"}), mountNode); my-button.js
  22. var React = require('React'); var HelloMessage = React.createClass({ render: function()

    { return ( <div>Hello {this.props.name}</div> ); } }); React.renderComponent( HelloMessage({name: "John"}), mountNode); my-button.jsx
  23. Components "A highly cohesive building block for UIs loosely coupled

    with other components" Pete Hunt
  24. Components "Reusable API that encapsulate a bunch of different stuff"

    Tom Occhino
  25. - It's the markup - It's the javascript - It's

    the behavior's function It's more than a template
  26. The render function render: function() { }

  27. <MyButton text="Click-me" onAction={someFunc} /> var MyButton = React.createClass({ render: function()

    { return ( <button className="my-button" onClick={this.props.onAction}> <span>{this.props.text}</span> </button> ); } });
  28. <MyButton text="Click-me" onAction={someFunc} /> var MyButton = React.createClass({ render: function()

    { return ( <button className="my-button" onClick={this.props.onAction}> <span>{this.props.text}</span> </button> ); } });
  29. The state

  30. var Timer = React.createClass({ });

  31. var Timer = React.createClass({ getInitialState: function() { return {secondsElapsed: 0};

    }, render: function() { } });
  32. var Timer = React.createClass({ getInitialState: function() { return {secondsElapsed: 0};

    }, render: function() { this.state.secondsElapsed; // 0 } });
  33. var Timer = React.createClass({ tick: function() { var current =

    this.state.secoundsElapsed; this.setState({ secondsElapsed: current + 1 }); } });
  34. var Timer = React.createClass({ componentDidMount: function() { this.interval = setInterval(

    this.tick, 1000); }, componentWillUnmount: function() { clearInterval(this.interval); } });
  35. var Timer = React.createClass({ getInitialState: function() {}, tick: function() {},

    componentDidMount: function() {}, componentWillUnmount: function() {}, render: function() {} });
  36. Lifecycle functions componentDidMount: function() {}, componentWillmount: function() {}, componentWillUnmount: function()

    {}, componentWillReceiveProps: function() {}, componentComponentUpdate: function() {}, componentWillUpdate: function() {}, componentDidUpdate: function() {},
  37. Composable Components Inheritance

  38. var SetIntervalMixin = { componentWillMount: function() { this.intervals = [];

    }, setInterval: function() { this.intervals.push( setInterval.apply(null, arguments)); }, componentWillUnmount: function() { this.intervals.map(clearInterval); } };
  39. var Timer = React.createClass({ mixins: [setIntervalMixin], ... });

  40. SEO

  41. string renderComponentToString( ReactComponent component);

  42. And the best part of it is

  43. var html = React.renderComponentToString( HelloMessage({name: "John"})); Server Client <body> <mountNode>

    {{html}} </mountNode> </body> React.renderComponent( HelloMessage({name: "John"}), mountNode);
  44. var html = React.renderComponentToString( HelloMessage({name: "John"})); Server Client <body> <mountNode>

    {{html}} </mountNode> </body> React.renderComponent( HelloMessage({name: "John"}), mountNode);
  45. var html = React.renderComponentToString( HelloMessage({name: "John"})); Server Client <body> <mountNode>

    {{html}} </mountNode> </body> React.renderComponent( HelloMessage({name: "John"}), mountNode);
  46. Is the data updated? Only attaches the event handlers

  47. Performance

  48. Show lists of 1500 rows Angular: 1.35s ReactJs: 310ms www.williambrownstreet.net/blog/2014/04/faster-angularjs-rendering-angularjs-and-reactjs

  49. Testing

  50. None
  51. var CheckboxWithLabel = React.createClass({ getInitialState: function() { return { isChecked:

    false }; }, onChange: function() { this.setState({isChecked: !this.state.isChecked}); }, render: function() { return ( <label> <input type="checkbox" checked={this.state.isChecked} onChange={this.onChange}/> {this.state.isChecked ? this.props.labelOn : this.props.labelOff} </label>); } }); module.exports = CheckboxWithLabel;
  52. var CheckboxWithLabel = React.createClass({ getInitialState: function() { return { isChecked:

    false }; }, onChange: function() { this.setState({isChecked: !this.state.isChecked}); }, render: function() { return ( <label> <input type="checkbox" checked={this.state.isChecked} onChange={this.onChange}/> {this.state.isChecked ? this.props.labelOn : this.props.labelOff} </label>); } }); module.exports = CheckboxWithLabel;
  53. jest.dontMock('../CheckboxWithLabel.js'); describe('CheckboxWithLabel', function() { it('changes the text after click', function()

    { var React = require('react/addons'); var CheckboxWithLabel = require('.. /CheckboxWithLabel.js'); var TestUtils = React.addons.TestUtils; var checkbox = TestUtils.renderIntoDocument( <CheckboxWithLabel labelOn="On" labelOff="Off" /> ); }); });
  54. jest.dontMock('../CheckboxWithLabel.js'); describe('CheckboxWithLabel', function() { it('changes the text after click', function()

    { var React = require('react/addons'); var CheckboxWithLabel = require('.. /CheckboxWithLabel.js'); var TestUtils = React.addons.TestUtils; var checkbox = TestUtils.renderIntoDocument( <CheckboxWithLabel labelOn="On" labelOff="Off" /> ); }); });
  55. jest.dontMock('../CheckboxWithLabel.js'); describe('CheckboxWithLabel', function() { it('changes the text after click', function()

    { var React = require('react/addons'); var CheckboxWithLabel = require('.. /CheckboxWithLabel.js'); var TestUtils = React.addons.TestUtils; var checkbox = TestUtils.renderIntoDocument( <CheckboxWithLabel labelOn="On" labelOff="Off" /> ); }); });
  56. jest.dontMock('../CheckboxWithLabel.js'); describe('CheckboxWithLabel', function() { it('changes the text after click', function()

    { var React = require('react/addons'); var CheckboxWithLabel = require('.. /CheckboxWithLabel.js'); var TestUtils = React.addons.TestUtils; var checkbox = TestUtils.renderIntoDocument( <CheckboxWithLabel labelOn="On" labelOff="Off" /> ); }); });
  57. jest.dontMock('../CheckboxWithLabel.js'); describe('CheckboxWithLabel', function() { it('changes the text after click', function()

    { var React = require('react/addons'); var CheckboxWithLabel = require('.. /CheckboxWithLabel.js'); var TestUtils = React.addons.TestUtils; var checkbox = TestUtils.renderIntoDocument( <CheckboxWithLabel labelOn="On" labelOff="Off" /> ); }); });
  58. // Verify that it's Off by default var label =

    TestUtils.findRenderedDOMComponentWithTag( checkbox, 'label'); expect( label.getDOMNode().textContent).toEqual('Off'); // Simulate a click and verify that it is now On var input = TestUtils.findRenderedDOMComponentWithTag( checkbox, 'input'); TestUtils.Simulate.change(input); expect( label.getDOMNode().textContent).toEqual('On');
  59. // Verify that it's Off by default var label =

    TestUtils.findRenderedDOMComponentWithTag( checkbox, 'label'); expect( label.getDOMNode().textContent).toEqual('Off'); // Simulate a click and verify that it is now On var input = TestUtils.findRenderedDOMComponentWithTag( checkbox, 'input'); TestUtils.Simulate.change(input); expect( label.getDOMNode().textContent).toEqual('On');
  60. Community

  61. None
  62. Who uses?

  63. umrum.io

  64. How it's being used at umrum.io

  65. None
  66. How it's being used at JusBrasil Newsletter

  67. None
  68. @hyetho @helielson Questions?

  69. References facebook.github.io/react/docs/ www.funnyant.com/reactjs-what-is-it/ youtube.com/watch?v=XxVg_s8xAms youtube.com/watch?v=x7cQ3mrcKaY

  70. Tools markup.su/highlighter drive.google.com pixlr.com/editor