Edit in JSFiddle

/** @jsx React.DOM */
var  ModelMixin = { 
    __syncedModels: [],
  componentDidMount: function() {
  // Whenever there may be a change in the Backbone data, trigger a reconcile.
    this.getBackboneModels().forEach(this.injectModel, this);
  },
  componentWillUnmount: function() {
  // Ensure that we clean up any dangling references when the component is
    // destroyed.
    this.__syncedModels.forEach(function(model) {
      model.off(null, model.__updater, this);
    }, this);
  },
  injectModel: function(model){
    if(!~this.__syncedModels.indexOf(model)){
      var updater = this.forceUpdate.bind(this, null);
      model.__updater = updater;
      model.on('add change remove', updater, this);
    }
  },
  bindTo: function(model, key){
      return {
          value: model.get(key),
          requestChange: function(value){
              model.set(key, value);
          }.bind(this)
      }
   }  
}


var Hello = React.createClass({
    mixins:[ModelMixin],
    getBackboneModels: function(){
        return [this.props.instance]
    },
    render: function() {
        return <div>
                <div>Hello {this.props.instance.get('initial')}</div>
            <input type="text" valueLink={this.bindTo(this.props.instance, 'initial')}/> 
        </div>;
    }
});

var model = Backbone.Model.extend({});
var instance = new model({
    initial: "initial Text"
})


React.renderComponent(<Hello instance={instance} />, document.body);

<script src="http://fb.me/react-js-fiddle-integration.js"></script>