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

React <3 Backbone

React <3 Backbone

Most of the content was taken from somewhere else:

http://aeflash.com/
https://github.com/ryanflorence/react-training/

Avatar for Sebastian Deutsch

Sebastian Deutsch

March 19, 2015

Other Decks in Programming

Transcript

  1. 1 var TimerView = Backbone.View.extend({! 2 ...! 3 ! 4

    render: function() {! 5 React.render(React.createFactory(IndexViewComponent)(! 6 collection: collection,! 7 projects: mediator.projects.models,! 8 tags: mediator.tags.models,! 9 editTrackingClicked: editTrackingClicked.bind(this),! 10 resumeTrackingClicked: resumeTrackingClicked.bind(this),! 11 splitTrackingClicked: splitTrackingClicked.bind(this),! 12 changeProjectForTracking: changeProjectForTracking.bind(this),! 13 changeDescriptionForTracking: changeDescriptionForTracking.bind(this)! 14 ), this.el);! 15 }! 16 });!
  2. React takes care of Event handling and adding / removing

    listener 1 ...! 2 TrackingItemView.prototype.listen = {! 3 "change:duration model": "_resize",! 4 "change:project model": "render",! 5 "change:description model": "render",! 6 "change:state model": "render"! 7 };! 8 ! 9 TrackingItemView.prototype.events = {! 10 "click .project-name": "_onProjectNameClick",! 11 "click .description": "_onDescriptionClick",! 12 "click .resume": "_onResumeClick",! 13 "click .split": "_onSplitClick",! 14 "click .edit": "_onEditClick",! 15 "mousemove .split-overlay": "_onMouseMoveOverSplit",! 16 "click .split-overlay": "_onSplitOverlayClicked",! 17 "click .cancel-split": "_onCancelSplitClicked"! 18 };! 19 ! 20 function TrackingItemView(options) {! 21 this._cancelSplitOnEscape = __bind(this._cancelSplitOnEscape, this);! 22 this._onSplitClick = __bind(this._onSplitClick, this);!
  3. React takes care of Event handling and adding / removing

    listener 1 ...! 2 TrackingItemView.prototype.listen = {! 3 "change:duration model": "_resize",! 4 "change:project model": "render",! 5 "change:description model": "render",! 6 "change:state model": "render"! 7 };! 8 ! 9 TrackingItemView.prototype.events = {! 10 "click .project-name": "_onProjectNameClick",! 11 "click .description": "_onDescriptionClick",! 12 "click .resume": "_onResumeClick",! 13 "click .split": "_onSplitClick",! 14 "click .edit": "_onEditClick",! 15 "mousemove .split-overlay": "_onMouseMoveOverSplit",! 16 "click .split-overlay": "_onSplitOverlayClicked",! 17 "click .cancel-split": "_onCancelSplitClicked"! 18 };! 19 ! 20 function TrackingItemView(options) {! 21 this._cancelSplitOnEscape = __bind(this._cancelSplitOnEscape, this);! 22 this._onSplitClick = __bind(this._onSplitClick, this);!
  4. React takes care of rendering only the DOM nodes that

    matter 1 ...! 2 ! 3 TrackingItemView.prototype._onCancelSplitClicked = function() {! 4 this.splitOverlay.hide();! 5 this.cancelSplit.hide();! 6 this.splitFractions.hide();! 7 this.scissors.hide();! 8 this.circle.show();! 9 $(document).off('keydown', this._cancelSplitOnEscape);! 10 this.splitMode = false;! 11 return this.durationValueElement.html(this.formatDuration(this.model.get(! 12 'duration')));! 13 };! 14 ! 15 ...!
  5. React takes care of rendering only the DOM nodes that

    matter 1 ...! 2 ! 3 TrackingItemView.prototype._onCancelSplitClicked = function() {! 4 this.splitOverlay.hide();! 5 this.cancelSplit.hide();! 6 this.splitFractions.hide();! 7 this.scissors.hide();! 8 this.circle.show();! 9 $(document).off('keydown', this._cancelSplitOnEscape);! 10 this.splitMode = false;! 11 return this.durationValueElement.html(this.formatDuration(this.model.get(! 12 'duration')));! 13 };! 14 ! 15 ...!
  6. 1 var Navigation = React.createClass({! 2 render: function() {! 3

    var loginButton;! 4 ! 5 if (this.props.loggedIn) {! 6 loginButton = <li><button>Logout</button></li>;! 7 } else {! 8 loginButton = <li><button>Login</button></li>;! 9 }! 10 ! 11 return (! 12 <nav>! 13 <ul>! 14 <li>! 15 <a href="#">Awesome Function</a>! 16 </li>! 17 {loginButton}! 18 </ul>! 19 </nav>! 20 );! 21 }! 22 });! 23 ! 24 React.render(! 25 <Navigation loggedIn={false} />,! 26 document.getElementById('example')! 27 );!
  7. 1 var Navigation = React.createClass({! 2 render: function() {! 3

    return (! 4 <nav>! 5 <ul>! 6 <li>! 7 <a href="#">Awesome Function</a>! 8 </li>! 9 {this.props.loggedIn ? <li><button>Logout</button></li> : <li><! 10 button>Login</button></li>}! 11 </ul>! 12 </nav>! 13 );! 14 }! 15 });! 16 ! 17 React.render(! 18 <Navigation loggedIn={false} />,! 19 document.getElementById('example')! 20 );!
  8. 1 var Navigation = React.createClass({! 2 render: function() {! 3

    return (! 4 <nav>! 5 <ul>! 6 <li>! 7 <a href="#">Awesome Function</a>! 8 </li>! 9 {this.props.loggedIn && <li><button>Logout</button></li>}! 10 {!this.props.loggedIn && <li><button>Login</button></li>}! 11 </ul>! 12 </nav>! 13 );! 14 }! 15 });! 16 ! 17 React.render(! 18 <Navigation loggedIn={false} />,! 19 document.getElementById('example')! 20 );!
  9. 1 var Navigation = React.createClass({! 2 propTypes: {! 3 loggedIn:

    React.PropTypes.bool.isRequired! 4 },! 5 ! 6 render: function() {! 7 return (! 8 <nav>! 9 <ul>! 10 <li>! 11 <a href="#">Awesome Function</a>! 12 </li>! 13 {this.props.loggedIn && <li><button>Logout</button></li>}! 14 {!this.props.loggedIn && <li><button>Login</button></li>}! 15 </ul>! 16 </nav>! 17 );! 18 }! 19 });! 20 ! 21 React.render(! 22 <div>! 23 <Navigation />! 24 <Navigation loggedIn="na klar" />! 25 <Navigation loggedIn={true} />! 26 </div>! 27 , document.getElementById('example')! 28 );!
  10. 1 var Navigation = React.createClass({! 2 propTypes: {! 3 //

    You can chain any of the above with `isRequired` to make sure a ! 4 warning! 5 // is shown if the prop isn't provided.! 6 requiredFunc: React.PropTypes.func.isRequired,! 7 ! 8 // A value of any data type! 9 requiredAny: React.PropTypes.any.isRequired,! 10 ! 11 // You can also specify a custom validator. It should return an Error! 12 // object if the validation fails. Don't `console.warn` or throw, as this! 13 // won't work inside `oneOfType`.! 14 customProp: function(props, propName, componentName) {! 15 if (!/matchme/.test(props[propName])) {! 16 return new Error('Validation failed!');! 17 }! 18 }! 19 },! 20 ...! 21 });!
  11. 1 var MyComponent = React.createClass({! 2 propTypes: {! 3 children:

    React.PropTypes.element.isRequired! 4 },! 5 ! 6 render: function() {! 7 return (! 8 <div>! 9 {this.props.children} // This must be exactly one element or it will ! 10 throw.! 11 </div>! 12 );! 13 }! 14 ! 15 });!
  12. 1 var Form = React.createClass({! 2 render: function() {! 3

    return (! 4 <input value="foo" />! 5 );! 6 }! 7 });! 8 ! 9 React.render(! 10 <Form />,! 11 document.getElementById('example')! 12 );!
  13. 1 var Form = React.createClass({! 2 render: function() {! 3

    return (! 4 <input value="foo" />! 5 );! 6 }! 7 });! 8 ! 9 React.render(! 10 <Form />,! 11 document.getElementById('example')! 12 );!
  14. 1 var Form = React.createClass({! 2 render: function() {! 3

    return (! 4 <input defaultValue="Foo" />! 5 );! 6 }! 7 });! 8 ! 9 React.render(! 10 <Form />,! 11 document.getElementById('example')! 12 );!
  15. 1 var CheckLink = React.createClass({! 2 render: function() {! 3

    // This takes any props passed to CheckLink and copies them to <a>! 4 return <a {...this.props}>{'CHECK'}{this.props.children}</a>;! 5 }! 6 });! 7 ! 8 React.render(! 9 <CheckLink href="/checked.html">! 10 Click here!! 11 </CheckLink>,! 12 document.getElementById('example')! 13 );!
  16. 1 var ChildComponent = React.createClass({! 2 render : function() {!

    3 return <div style={{! 4 color : this.props.color,! 5 background : this.props.background! 6 }}>! 7 I am {this.props.color}! 8 </div>! 9 }! 10 });! 11 ! 12 var ParentComponent = React.createClass({! 13 render : function() {! 14 return this.transferPropsTo(! 15 <ChildComponent background={null} />! 16 );! 17 }! 18 });! 19 ! 20 React.renderComponent(! 21 <ParentComponent color="blue" background="red" />,! 22 document.body! 23 );!
  17. 1 var Dialog = React.createClass({! 2 render: function() {! 3

    // don't render anything, this is where we open the portal! 4 return <div/>;! 5 },! 6 ! 7 componentDidMount: function() {! 8 var node = this.getDOMNode();! 9 ! 10 // do the old-school stuff! 11 var dialog = $(node).dialog().data('ui-dialog');! 12 ! 13 // start a new React render tree with our node and the children! 14 // passed in from above, this is the other side of the portal.! 15 React.renderComponent(<div>{this.props.children}</div>, node):! 16 }! 17 });!
  18. 1 var Dialog = React.createClass({! 2 //...! 3 ! 4

    componentDidMount: function() {! 5 // store the node on the `this.node` so we can access elsewhere! 6 this.node = this.getDOMNode();! 7 var dialog = $(this.node).dialog().data('ui-dialog');! 8 ! 9 // moved this code so we can call it in other places! 10 this.renderDialogContent();! 11 },! 12 ! 13 // add this hook! 14 componentWillReceiveProps: function(newProps) {! 15 // its important to pass the new props in! 16 this.renderDialogContent(newProps);! 17 },! 18 ! 19 renderDialogContent: function(props) {! 20 // if called from `componentWillReceiveProps`, then we use the new! 21 // props, otherwise use what we already have.! 22 props = props || this.props;! 23 ! 24 // the code that used to be in `componentDidMount`! 25 React.renderComponent(<div>{props.children}</div>, this.node):! 26 }! 27 });!
  19. 1 // use it like this:! 2 <Dialog title="I am

    a title" onClose={this.handleDialogClose} />! 3 ! 4 // and then ...! 5 var Dialog = React.createClass({! 6 // ...! 7 ! 8 componentDidMount: function() {! 9 // ...! 10 // pass along the options we care about! 11 var dialog = $(this.node).dialog({! 12 title: this.props.title,! 13 close: this.props.onClose! 14 }).data('ui-dialog');! 15 // ...! 16 },! 17 ! 18 //...! 19 });!
  20. 1 var Dialog = React.createClass({! 2 // ...! 3 !

    4 componentDidMount: function() {! 5 // ...! 6 // use `autoOpen` false so it doesn't automatically open and then! 7 // store the dialog on the component so we can use it elsewhere! 8 this.dialog = $(this.node).dialog({! 9 autoOpen: false,! 10 title: this.props.title,! 11 close: this.props.onClose! 12 }).data('ui-dialog');! 13 // ...! 14 },! 15 ! 16 // ...! 17 ! 18 renderDialogContent: function(props) {! 19 // ...! 20 React.renderComponent(<div>{props.children}</div>, this.node):! 21 ! 22 // after we've rendered the dialog, now we can call methods on it! 23 // via the props passed in like! 24 // `<Dialog open={this.state.dialogIsOpen} />`! 25 if (props.open)! 26 this.dialog.open();! 27 else! 28 this.dialog.close();! 29 }! 30 });!
  21. 1 var Dialog = React.createClass({! 2 // ...! 3 !

    4 componentWillUnmount: function() {! 5 React.unmountComponentAtNode(this.node);! 6 this.dialog.destroy();! 7 }! 8 });!
  22. 1 var PureRenderMixin = require('react/addons').addons.PureRenderMixin;! 2 ! 3 React.createClass({! 4

    mixins: [PureRenderMixin],! 5 ! 6 render: function() {! 7 return <div className={this.props.className}>foo</div>;! 8 }! 9 });! http://facebook.github.io/react/docs/pure-render-mixin.html PureRenderMixin