title: React and ES6 inheritance
body: <p><strong>Note:</strong> This post has been posted at the time React was NOT supporting ES6 (v12).</p>
  
  <p>I have an ES6 class :</p>
  
  <pre><code>class BaseClass {
    getInitialState(){
        return {message: 'Hello!'};
    }
  
    render() {
        return (
              &lt;div&gt;
                  &lt;div&gt;{this.state.message}&lt;/div&gt;
              &lt;/div&gt;
          )
    }
  }
  </code></pre>
  
  <p>That I can export in ES6 using this expression (source : <a href="https://github.com/tcoopman/react-es6-browserify" rel="nofollow noreferrer">react ES6 browserify</a>)</p>
  
  <pre><code>export default React.createClass(BaseClass.prototype)
  </code></pre>
  
  <p>This works fine. Now I would like to use ES6 inheritance to extend my <code>BaseClass</code> class :</p>
  
  <pre><code>class ExtendedClass extends BaseClass{
      getInitialState(){
          return {message: "Hello! I'm an extension"};
      }
  }
  </code></pre>
  
  <p>But when I call <code>React.createClass</code> on the <code>ExtendedClass</code> class, I got the following exception :</p>
  
  <pre><code>Invariant Violation: ReactCompositeComponentInterface: You are attempting to define `constructor` on your component more than once. This conflict may be due to a mixin.
  </code></pre>
  
  <p>I know React 0.13 is supposed to be more ES6 friendly but is there any ways to handle that ?</p>
  
  <p><strong>EDIT:</strong> </p>
  
  <p>I'm using Traceur to compile my ES6 classes. The output for <code>ExtendedClass</code> looks like :</p>
  
  <pre><code>function ExtendedClass() {
    "use strict";
    if (BaseClass !== null) {
      BaseClass.apply(this, arguments);
    }
  }
  for (BaseClass____Key in BaseClass) {
      if (BaseClass.hasOwnProperty(BaseClass____Key)) {
        ExtendedClass[BaseClass____Key] = BaseClass[BaseClass____Key];
      }
    }
    ____SuperProtoOfBaseClass = BaseClass === null ? null : BaseClass.prototype;
    ExtendedClass.prototype = Object.create(____SuperProtoOfBaseClass);
    ExtendedClass.prototype.constructor = ExtendedClass;
    ExtendedClass.__superConstructor__ = BaseClass;
    ExtendedClass.prototype.getInitialState = function() {
      "use strict";
      return {message: "Hello! I'm an extension"};
    };
    React.createClass(ExtendedClass.prototype);
  </code></pre>