Preact: Using react with ES5

[chrismatheson]

Firstly id like to say thanks for creating a really nice library. Ive been a fan of the react style approach and im really happy you took the time to trim the fat of react and produce preact.

Im currently using react to great success in my project, and for the most part its stateless functions. However I've found a need recently for a custom component and would like to create one without needing to introduce an ES6 transformation step into my build system.

Ive tried creating components in ES5 with plain old prototypical inheritance but don't seem to be getting anywhere fast, i don't suppose someone has tackled this problem already ?

Cheers

C

Mini example i tried

      var Comp = function () {
        this.doThings = function () {
          this.setState(true);
        }.bind(this);
        this.render = function (props, state) {
            return preact.h('a', {href:props.href, onclick: doThings}, state ? 'before': 'after');
        }.bind(this);
      }
      Comp.prototype = preact.Component;

[mkxml]

I think your best option is to create a function that creates your components.

You can use the code at preact-classless-component as a base or require the module directly.

[robertknight]

Preact checks whether an object is a stateful component by looking for a render function on the object's prototype.

In other words, <Your Component>.prototype.render needs to return the render function.

You can use ES5, but you need to understand what the equivalent to class MyComponent extends preact.Component is:

function Label() {
    this.render = function () {
        return preact.h('div',{},'Hello World');
    }
}
Label.prototype = Object.create(preact.Component.prototype);

[developit]

Thanks @robertknight, you took the words right out of my mouth! :)

This was my initial thought when seeing your code sample:

function Comp() {
  this.doThings = function () {
    this.setState(true);
  }.bind(this);
}
Comp.prototype = new preact.Component;
Comp.prototype.render = function (props, state) {
  return preact.h('a', {href:props.href, onclick: doThings}, state ? 'before': 'after');
};

If you're wanting to avoid transpilation, it's possible you could just inline preact-classless-component. It's really small and would avoid you having to .bind() and do inheritance just to get .setState():

// helper for building ES5 components
function createClass(obj) {
  function C() {
    preact.Component.apply(this, arguments);
    for (var i in obj) if (i!=='render' && typeof obj[i]==='function') this[i] = obj[i].bind(this);
    if (obj.init) obj.init.call(this);
  }
  C.prototype = new preact.Component;
  for (var i in obj) C.prototype[i] = obj[i];
  C.prototype.constructor = C;
  return C;
}


// Usage Example:
createClass({
  init: function() {
    // init is basically your constructor
    this.state = { thing: false };
  },
  doThings: function() {
    // all methods are bound to the class instance automatically
    this.setState({ thing: true });
  },
  render: function(props, state) {
    return preact.h('a', {href:props.href, onclick: this.doThings}, state.thing ? 'before': 'after');
  }
});

@chrismatheson - let me know what you end up going with, I'd love to set up some better examples for Preact + ES3 (no transpiler). We have this and this, but the former could probably show off some helpers like the one above.

Or maybe something cool and new - who knows, maybe there is a great new functional way to create components out there I've not seen yet 👍

[developit]

Closing since we definitely covered everything, but by all means feel free to keep discussing :)

[chrismatheson]

Thanks a ton everyone, really helpful :D