How do you bind Backbone Models/Collections to React Components as in the case with Backbone.View?

What I've settled with for now is to attach an instance of the Model/Collection as a prop on the React component and syncing it to Reacts' state.

I do this by attaching a callback on the sync, add, change, remove events and use the the toJSON() method to copy it to the React state like so:

this.setState({data: this.props.model.toJSON()});

When saving a form, I have a method which handles the form submission. It copies over the state to the model and then saves it using:

this.props.model.set(this.state.data);

this.props.model.save();

In additional to this, I've built a tiny dispatcher to instantitiate my models and collections only once. In this way all parts of the app will always work on the same data and by in sync.

I use React.Backbone for this. Very easy to use, makes sure the components rerender whenever the model or collection they are bound to changes.

https://github.com/usepropeller/react.backbone