Unify The UI With React

F8403810aba9bdec8f66588c856d0e2f?s=47 Dan Cork
April 28, 2016

Unify The UI With React

F8403810aba9bdec8f66588c856d0e2f?s=128

Dan Cork

April 28, 2016
Tweet

Transcript

  1. 6.
  2. 10.
  3. 11.
  4. 28.
  5. 29.
  6. 38.
  7. 40.
  8. 46.
  9. 60.

    var Button = React.createClass({ propTypes: { children: React.PropTypes.string }, render:

    function() { return ( <button className=“component-button"> {this.props.children} </button> ) } })
  10. 61.

    var Button = React.createClass({ propTypes: { children: React.PropTypes.string }, render:

    function() { return ( <button className=“component-button"> {this.props.children} </button> ) } })
  11. 62.

    var Button = React.createClass({ propTypes: { children: React.PropTypes.string }, render:

    function() { return ( <button className=“component-button"> {this.props.children} </button> ) } })
  12. 63.

    var Button = React.createClass({ propTypes: { children: React.PropTypes.string }, render:

    function() { return ( <button className=“component-button"> {this.props.children} </button> ) } })
  13. 64.

    var Button = React.createClass({ propTypes: { children: React.PropTypes.string }, render:

    function() { return ( <button className=“component-button"> {this.props.children} </button> ) } })
  14. 66.

    var Button = React.createClass({ propTypes: { children: React.PropTypes.string }, render:

    function() { return ( <button className=“component-button"> {this.props.children} </button> ) } })
  15. 67.

    var Button = React.createClass({ propTypes: { children: React.PropTypes.string }, render:

    function() { return ( <button className=“component-button"> {this.props.children} </button> ) } })
  16. 72.

    var Button = React.createClass({ propTypes: { children: React.PropTypes.string }, render:

    function() { return ( <button className=“component-button"> {this.props.children} </button> ) } })
  17. 73.

    var Button = React.createClass({ propTypes: { children: React.PropTypes.string }, render:

    function() { return ( <button className=“component-button"> {this.props.children} </button> ) } })
  18. 78.

    propTypes: { // sizes small: React.PropTypes.bool, large: React.PropTypes.bool, // colors

    primary: React.PropTypes.bool, danger: React.PropTypes.bool }
  19. 79.

    import classNames from ‘class-names’ classNames({ ‘btn’: true, ‘btn-small’: this.props.small, ‘btn-large’:

    this.props.large, ‘btn-primary’: this.props.primary, ‘btn-danger’: this.props.danger });
  20. 81.
  21. 93.
  22. 96.

    .base { /* default styling */ } .error { composes:

    base; /* extra styling for error */ }
  23. 103.