React components as plain JS objects?

Question

Does anybody has experience in working with React components as plain JS objects instead of annoying ES6 classes and deprecated .createClass method.

Maybe you have some examples of factory functions or similar to share?

Thanks!

Answer 1

React.Component is a plain javascript function, since es6 classes are syntactic sugar around them. So we could use whatever es5 class-like concept we like e.g. I just borrowed Backbone's extend method here:

// From backbone
var extend = function(protoProps) {
    var parent = this;
    var child;

    var extendObj = function(obj1, obj2) {
       for (var i in obj1) {
          if (obj1.hasOwnProperty(i)) {
             obj2[i] = obj1[i];
          }
       }
    };

    // The constructor function for the new subclass is either defined by you
    // (the "constructor" property in your `extend` definition), or defaulted
    // by us to simply call the parent constructor.
    if (protoProps && hasOwnProperty.call(protoProps, 'constructor')) {
      child = protoProps.constructor;
    } else {
      child = function() { return parent.apply(this, arguments); };
    }

    // Set the prototype chain to inherit from `parent`, without calling
    // `parent` constructor function.
    var Surrogate = function(){ this.constructor = child; };
    Surrogate.prototype = parent.prototype;
    child.prototype = new Surrogate;

    // Add prototype properties (instance properties) to the subclass,
    // if supplied.
    if (protoProps) extendObj(child.prototype, protoProps);

    // Set a convenience property in case the parent's prototype is needed
    // later.
    child.__super__ = parent.prototype;

    return child;
};

React.Component.extend = extend;

Then we could create components like this:

var MyComponent = React.Component.extend({
    constructor: function() {
        console.log('hello from react component');

        this.state = {
            open: false
        };

        React.Component.apply(this, arguments);
    }
});

new MyComponent();

That's just an example (and untested), you could do any kind of prototypal implementation you like since it's just a normal function. If you search for "es5 inheritance" you should be able to apply any of those solutions.

Answer 2

I think my answer is late. But I do make a lot of React Components using traditional prototype based javascript objects. If you love prototype based object, you can try the following :)

A simple example:

step 1: install inherits module

npm install inherits -S

then,

const React = require('react'); // switch to import, if you like
const is = require('prop-types');
const inherits = require('inherits');

inherits(MyComponent, React.Component);
module.exports = MyComponent;
var prototype = MyComponent.prototype;

MyComponent.defaultProps = {
  onClick: function(){ }
};

MyComponent.propTypes = {
  onClick: is.func,
  href: is.string,
  label: is.string
}

function MyComponent(props) {
  React.Component.call(this, props);
  this.state = {clicked: false};
}

prototype.render = function() {
  return (
    <a href={this.props.href} onClick={this.props.onClick}>
      {this.props.label}
    </a>)
}

// for debugging purpose, set NODE_ENV production, will remove the following
if (process.env.NODE_ENV !== 'production') {
  MyComponent.displayName = 'MyComponent';
}

A more advanced way to separate your concerns is to put your methods in different files. ( Usually, the protected, or private methods, something you do not need to know after couple months or years.) Then, merge them onto the prototype object. You can do it in the following way.

...
const _proto = require('./prototype'); //make a prototype folder, and merge all files' methods into one.

...
var prototype = Object.assign(MyComponent.prototype, _proto);

Or, you want to make your component as an EventEmitter, you can do it like following:

....
const _proto = require('./prototype');
const Emitter = require('component-emitter');

....
var prototype = Object.assign(MyComponent.prototype, _proto, Emitter.prototype);

function MyComponent(props) {
  React.Component.call(this, props);

  this.onClick = _=> this.emit("click");
}

prototype.render = function() {
  return <a href={this.props.href} onClick={this.onClick}>{this.props.label}</a>
}

In the prototype folder, you can write like following:

index.js

Object.assign(exports, require('./styles.js').prototype)

styles.js

const prototype = exports.prototype = {};

prototype.prepareStyles = function() {

  var styles = Object.defineProperties({}, {
    wrapper: { get: _=> ({
      backgroundColor: '#333'
    })},

    inner: {get: _=> {
       return this.state.clicked ? {...} : {...}
    }}
  });

  Object.defineProperties(this, {
    styles: {get: _=> styles}
  })
}
//All the methods are prefixed by prototype, so it is easy to cut and paste the methods around different files, when you want to hide some methods or move some methods to be with the constructor to make your component more easy to read.

then, in the main file. simply call the method to prepare all the styles:

function MyComponent(props) {
  React.Component.call(this, props);

  this.prepareStyles();
}

and use the styles,

prototype.render = function() {
  return ( 
      <div style={this.styles.wrapper}>
        <div styles={this.styles.inner}>hello world</div>
      </div> 
  )
}