Discussion on: Creating React components using only ES5 features

[Carson]

Just a tip, putting the render and other functions in the constructor function isn't a great idea. If you have multiple instances of the component, those functions will be recreated each time. Better to put those in the prototype of the component. You lose the ability to do the var self = this trick though, and have to resort to function.bind.

Here's an example extending yours putting the functions on the component prototype: jsfiddle.net/carc1n0gen/pg1a47qt/5/

[Heiker]

You are right. But Object.assign is not part of ES5, you'll have to polyfill for IE.

A little bind utility and a container object for methods could help. The constructor could look like this.

function Counter(props) {
  React.Component.constructor.call(this);
  this.state = { count: props.start || 0 };
  bind(this, methods);
}

var methods = {
 // stuff...
};

Codepen example

[Carson]

Ah I totally forgot Object.assign was not in es5. In that case, you'd keep your Object.create method of doing it, then for each other method you want on the prototype you would do

Component.prototype.something = function(...) {...}

Sorry for poor formatting. I'm on my phone.

Edit: updated fiddle jsfiddle.net/carc1n0gen/pg1a47qt/16/