title: How does prototypal inheritance in JavaScript really works?
body: <p>I’m still not fully understanding the inheritance dychotomy (prototypal vs. classical) in JavaScript.</p>
  
  <p>If the <code>class</code> is just a syntactic sugar over prototypes, how I'm supposed to de-sugar it?</p>
  
  <p>May you show me the different approaches in creating React elements with classes and prototypes (i.e. without <code>class</code> &amp; <code>React.createClass</code>)?</p>
  
  <p><strong>So, is there a way to get stateful component using native <code>Object.create</code>?</strong></p>
  
  <p>Like this:</p>
  
  <pre><code>const Hello = Object.create(React.Component.prototype, {
    componentDidMount: {
      value: function() {
        alert('Mounted');
      }
    },
    render: {
      value: function() {
        return &lt;div&gt;I love StackOverflow community! It is so helpful and friendly&lt;/div&gt;;
      }
    }
  });
  
  ReactDOM.render(&lt;Hello /&gt;, document.getElementById('root'));
  </code></pre>
  
  <p>Seems something like this won’t work because of inner lib’s restrictions. <strong>But why we can’t use it in more natural to prototypal nature of JavaScript?</strong></p>
  
  <p>There’s a note from the official docs: <a href="https://facebook.github.io/react/docs/composition-vs-inheritance.html#so-what-about-inheritance" rel="nofollow noreferrer">https://facebook.github.io/react/docs/composition-vs-inheritance.html#so-what-about-inheritance</a></p>
  
  <blockquote>
    <p>[...] we haven't found any use cases where we would recommend creating component inheritance hierarchies</p>
  </blockquote>
  
  <p><strong>But isn’t <code>class</code> mostly about inheritance?</strong></p>
  
  <p>I’m very confused and would like to hear your opinions of what I am doing and thinking wrong?</p>
  
  <p>I’ve asked that question at Reactiflux and Brendan Hurley proposed this: <a href="https://codepen.io/niechea/pen/xdVEvv?editors=0010" rel="nofollow noreferrer">https://codepen.io/niechea/pen/xdVEvv?editors=0010</a></p>
  
  <pre><code>function MyComponent(props) {
    this.props = props;
    this.state = {
      clickCount: 0,
    };
  }
  
  MyComponent.prototype = Object.create(React.Component.prototype);
  
  MyComponent.prototype.clickHandler = function() {
    this.setState({
      clickCount: this.state.clickCount + 1,
    });
  }
  
  MyComponent.prototype.render = function() {
    return (
      &lt;div&gt;
        &lt;p&gt;Hello, {this.props.name}.&lt;/p&gt;
        &lt;p&gt;You have clicked {this.state.clickCount} time(s)!&lt;/p&gt;
        &lt;button onClick={this.clickHandler.bind(this)}&gt;Click me&lt;/button&gt;
      &lt;/div&gt;
    );
  }
  
  ReactDOM.render(&lt;MyComponent name="Bogdan" /&gt;, document.getElementById('app'));
  </code></pre>
  
  <p>Is his solution truly prototypal?</p>
  
  <hr>
  
  <p>Here are some references:</p>
  
  <ul>
  <li><a href="http://javascript.crockford.com/prototypal.html" rel="nofollow noreferrer">http://javascript.crockford.com/prototypal.html</a></li>
  <li><a href="https://medium.com/javascript-scene/the-two-pillars-of-javascript-ee6f3281e7f3" rel="nofollow noreferrer">https://medium.com/javascript-scene/the-two-pillars-of-javascript-ee6f3281e7f3</a></li>
  <li><a href="http://henleyedition.com/making-inheritance-make-sense-with-object-create/" rel="nofollow noreferrer">http://henleyedition.com/making-inheritance-make-sense-with-object-create/</a></li>
  </ul>
  
  <hr>
  
  <p><strong>* The question is mostly about inheritance, not about React. React here is just a reference.</strong></p>