/** @jsx React.DOM */ /* global React, Backbone, $ */ var ExampleModel = Backbone.Model.extend({ defaults: { name: 'Backbone.View' } }); var DisplayView = React.createClass({ componentDidMount: function() { this.props.model.on('change', function() { this.forceUpdate(); }.bind(this)); }, render: function() { return ( <p> {this.props.model.get('name')} </p> ); } }); var ToggleView = React.createClass({ handleClick: function() { this.props.model.set('name', 'React'); }, render: function() { return ( <button onClick={this.handleClick}> model.set('name', 'React'); </button> ); } }); var model = new ExampleModel(); React.renderComponent(( <div> <DisplayView model={model} /> <ToggleView model={model} /> </div> ), document.body);
<script src="http://fb.me/react-js-fiddle-integration.js"></script> <body> <div class="display-container"></div> <div class="button-container"></div> </body>