React + Backbone Example

app.es6

import React from 'react';
import User from 'user';
import UserComponent from 'user-component';

var user = new User.Model({id: 1});
React.renderComponent(User({user: user}), document.body);

listeners-mixin.es6

export default {
  componentWillMount: function () {
    (this.listeners = this.getListeners()).forEach(function (listener) {
      listener.model.on(listener.events, this);
    }, this);
  },

  componentWillUnmount: function () {
    this.listeners.forEach(function (listener) {
      listener.model.off(listener.events, this);
    }, this);
  }
};

user-component.es6.jsx

import React from 'react';
import ListenersMixin from 'listeners-mixin';

export default React.createClass({
  mixins: [ListenersMixin],
  
  getListeners: function () {
    return [{
      model: this.props.user,
      events: {change: this.forceUpdate.bind(this, null)}
    }];
  },
  
  componentWillMount: function () {
    this.props.user.fetch();
  },
  
  render: function () {
    var user = this.props.user;
    return (
      <div className='user'>
        <h1>{user.get('name')}</h1>
        <h2>{user.get('title')}</h1>
      </div>
    );
  }
});