Upgrade to Pro — share decks privately, control downloads, hide ads and more …

React - A JavaScript library for building user interfaces

Helielson
October 04, 2014

React - A JavaScript library for building user interfaces

Talk about ReactJS presented at JusBrasil

Helielson

October 04, 2014
Tweet

More Decks by Helielson

Other Decks in Programming

Transcript

  1. 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
  2. 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
  3. 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
  4. 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
  5. 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
  6. 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
  7. 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
  8. 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
  9. 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
  10. - It's the markup - It's the javascript - It's

    the behavior's function It's more than a template
  11. <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> ); } });
  12. <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> ); } });
  13. var Timer = React.createClass({ getInitialState: function() { return {secondsElapsed: 0};

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

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

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

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

    {}, componentWillReceiveProps: function() {}, componentComponentUpdate: function() {}, componentWillUpdate: function() {}, componentDidUpdate: function() {},
  18. var SetIntervalMixin = { componentWillMount: function() { this.intervals = [];

    }, setInterval: function() { this.intervals.push( setInterval.apply(null, arguments)); }, componentWillUnmount: function() { this.intervals.map(clearInterval); } };
  19. SEO

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

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

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

    {{html}} </mountNode> </body> React.renderComponent( HelloMessage({name: "John"}), mountNode);
  23. 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;
  24. 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;
  25. 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" /> ); }); });
  26. 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" /> ); }); });
  27. 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" /> ); }); });
  28. 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" /> ); }); });
  29. 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" /> ); }); });
  30. // 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');
  31. // 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');