React js Mixin Example

Hello React - mixins - updating events. author(s): Ryan Vice

by Rich Costello

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<script src="https://fb.me/react-with-addons-0.14.0.js"></script>
<script src="https://fb.me/react-dom-0.14.0.js"></script>

<div id="view"/>

Babel + JSX

var ReactMixin1 = {
    log: function(message) {
    	console.log(message);
    },
    componentWillMount: function() {
    	this.log('componentWillMount from ReactMixin1');
    }
};

var ReactMixin2 = {
    componentWillMount: function() {
    	console.log('componentWillMount from ReactMixin2');
    }
};

var HelloMessage = React.createClass({
	mixins: [ReactMixin1, ReactMixin2],
    componentWillMount: function() {
    	this.log('componentWillMount from HelloMessage');
    },
    render: function() {
        return <h2>{this.props.message}</h2>;
    }
});

var Button = React.createClass({
   mixins: [ReactMixin2, ReactMixin1],
   clicked: function() {
   		this.log(this.props.text + ' clicked');
   },
   componentWillMount: function() {
    	this.log('componentWillMount from Button');
   },
   render: function() {
       return <button onClick={this.clicked}>{this.props.text}</button>
   }
});

var HelloReact = React.createClass({
    render: function() {
        return (
            <div>
                <HelloMessage message='Hi'/>
                <Button text='OK'/>
            </div>
        );
    }
});

ReactDOM.render(
    <HelloReact/>,
    document.getElementById('view'));