R: react-component

Using the backbone react component

by kyllle

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.8.3/underscore-min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/backbone.js/1.2.2/backbone-min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.14.7/react-dom.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.6/css/bootstrap.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/backbone-react-component/0.10.0/backbone-react-component-min.js"></script>
<div class="js-app"></div>

CSS

* {
  -webkit-font-smoothing: antialiased;
}

body {
    padding: 5%;
}

Babel + JSX

console.clear();

var Person = Backbone.Model.extend({
	defaults: {
    	'name': 'Jane Bloggs',
        'age': 23,
        'sex': 'Female',
        'eyeColour': 'Brown'
    }
});

// React App Component
var AppComponent = React.createClass({
	mixins: [Backbone.React.Component.mixin],
    onNameClick: function() {
        this.props.model.set('name', 'James Bond');
    },
    onAgeClick: function() { 
        this.props.model.set('age', 92);
    },
    onSexClick: function() {
        this.props.model.set('sex', 'Male');
    },
    onEyesClick: function() {
        this.props.model.set('eyeColour', 'Blue');
    },
    render: function() {
    	return (
        	<div>
            	<p>Name: {this.getModel().get("name")}</p>
                <p>Age: {this.getModel().get("age")}</p>
                <p>Sex: {this.getModel().get("sex")}</p>
                <p>Eye Colour: {this.getModel().get("eyeColour")}</p>
				<br />
                <button	onClick={this.onNameClick} className="btn btn-default">Change Name</button>
                <br /><br />
                <button onClick={this.onAgeClick} className="btn btn-default">Change Age</button>
                <br /><br />
                <button onClick={this.onSexClick} className="btn btn-default">Change Sex</button>
                <br /><br />
                <button onClick={this.onEyesClick} className="btn btn-default">Change Eye Colour</button>
            </div>
        )
    }
});

var person = new Person();

ReactDOM.render(<AppComponent model={person} />, document.body.querySelector('.js-app'));

setTimeout(function() {
	person.set({
    	'name': 'New Name',
        'age': 103,
        'sex': 'Male',
        'eyeColour': 'Green'
    });
}, 5000);