backbone-react-component

Backbone.React.Component is a wrapper for React.Component and brings all the power of Facebook's React to Backbone.js

Backbone.React.Component

Backbone.React.Component is a mixin that glues Backbone models and collections into React components.

When the component is mounted, a wrapper starts listening to models and collections changes to automatically set your component state and achieve UI binding through reactive updates.

**Table of Contents** *generated with [DocToc](http://doctoc.herokuapp.com/)*

Using Bower

bower install backbone-react-component

Using Npm

npm install backbone-react-component

If you're not using Bower nor Npm download the source from the dist folder or use CDNJS.

The mixin only works if set on the root component. You can use it on child components as well, but it won't work nor make a difference if the root component of those children is not using the mixin.

var MyComponent = React.createClass({
  mixins: [Backbone.React.Component.mixin],
  renderfunction () {
    return <div>{this.state.model.foo}</div>;
  }
});
 
var model = new Backbone.Model({foo: 'bar'});
 
React.render(<MyComponent model={model} />, document.body);
// Update the UI 
model.set('foo', 'Hello world!');

MyComponent will listen to any model changes, making the UI refresh.

var MyComponent = React.createClass({
  mixins: [Backbone.React.Component.mixin],
  createEntryfunction (entry) {
    return <div>{entry.helloWorld}</div>;
  },
  renderfunction () {
    return <div>{this.state.collection.map(this.createEntry)}</div>;
  }
});
var collection = new Backbone.Collection([{helloWorld: 'Hello world!'}]);
 
React.render(<MyComponent collection={collection} />, document.body);
var MyComponent = React.createClass({
  mixins: [Backbone.React.Component.mixin],
  createEntryfunction (entry) {
    return <div>{entry.helloWorld}</div>;
  },
  renderfunction () {
    return (
      <div>
        {this.state.firstModel.helloWorld}
        {this.state.secondModel.helloWorld}
        {this.state.firstCollection.map(this.createEntry)}
        {this.state.secondCollection.map(this.createEntry)}
      </div>
    );
  }
});
 
var MyFactory = React.createFactory(MyComponent);
 
var newComponent = MyFactory({
  model: {
    firstModel: new Backbone.Model({helloWorld: 'Hello world!'}),
    secondModel: new Backbone.Model({helloWorld: 'Hello world!'})
  },
  collection: {
    firstCollection: new Backbone.Collection([{helloWorld: 'Hello world!'}]),
    secondCollection: new Backbone.Collection([{helloWorld: 'Hello world!'}])
  }
});
React.render(newComponent, document.body);
var Backbone = require('backbone');
var backboneMixin = require('backbone-react-component');
var React = require('react');
 
var model = new Backbone.Model({
  helloWorld: 'Hello world!'
});
var HelloWorld = React.createClass({
  mixins: [backboneMixin],
  renderfunction () {
    return React.DOM.div({}, this.state.model.helloWorld);
  }
});
var HelloWorldFactory = React.createFactory(HelloWorld);
 
// Render to an HTML string 
React.renderToString(HelloWorldFactory({model: model}));
// Updating the model 
model.set('helloWorld', 'Hi again!');
// Rendering to an HTML string again 
React.renderToString(HelloWorldFactory({model: model}));

The following API is under Backbone.React.Component.mixin (require('backbone-react-component')):

Inspired by Backbone.View, it's a shortcut to this.$el.find method if jQuery is present, else it fallbacks to native DOM querySelector.

Grabs the component's collection(s) or from one of the parents.

Grabs the component's model(s) or from one of the parents.