React JS inheritance

Another option rather than mixins is to create a base/abstract button that is used by the various specialty types of buttons (through a compositional pattern). Here's a simple demo.

What I've done is create an AbstractButton that has basic button clicking behavior. You could put things that are common to all of your buttons there for example.

With that, I've created a second class called RealButton1. It uses AbstractButton and handles the a click event (onClick). Then, I've created a second specialization of a button called SecondRealButton. Both can behave different and still be reused as necessary.

While mixins work today, there isn't an obvious path forward for them yet given the recent announcements of starting to support EcmaScript 6 syntax. Also, from that same blog post, you'll note how they specifically mention that there isn't any mixin support for ES6 classes.

In this case, I wouldn't recommend using a mixin as you (presumably) own the UI components and aren't trying to provide an extension model for another pluggable system (like might be necessary for example with a router or store/flux/dispatcher type system).

var AbstractButton = React.createClass({
    propTypes: {
        onClick: React.PropTypes.func
    },
    handleClick: function(e) {
        if (this.props.onClick) {            
            this.props.onClick.call(this, e);
        }
    },
    render: function() {
       return <button onClick={this.handleClick}>
                 {this.props.caption}
              </button>;
    }        
});

var RealButton1 = React.createClass({
    propTypes: {
        caption: React.PropTypes.string.isRequired
    },

    render: function() {
        return <AbstractButton 
                  onClick={ this.clicked }  
                  caption={ this.props.caption } />;        
    },

    clicked: function(e) {
        console.log('clicked ' + this.props.caption);    
    }

});

var SecondRealButton = React.createClass({
    propTypes: {
        caption: React.PropTypes.string.isRequired
    },

    render: function() {
        return <AbstractButton onClick={ this.clicked }
                caption={ this.props.caption } />;        
    },

    clicked: function(e) {
        console.log('second type clicked ' + this.props.caption);    
    }    
});

var SampleApp = React.createClass({    
    render: function() {        
        return (<div>
                <RealButton1 caption="button 1" />
                <RealButton1 caption="button 2" />
                <SecondRealButton caption="other type button #1" />
            </div>        
        );    
    }
});

React.render(<SampleApp />, document.body);