create-component-es6.js

import {createFactory, createClass} from 'react';

export function createComponent(render) {
  var def = typeof render === 'function' ? {render: render} : render;
  render = def.render;
  def.displayName = render.name;

  def.render = function () {
    const {data, children} = this.props;
    return render.call(this, data, children);
  };

  if (!def.getInitialState) {
    def.getInitialState = () => { return {}; };
  }

  if (def.componentDidMount) {
    const cdm = def.componentDidMount;
    def.componentDidMount = function () {
      cdm.call(this, this.props.data);
    };
  }

  if (def.componentWillReceiveProps) {
    const cwrp = def.componentWillReceiveProps;
    def.componentWillReceiveProps = function (newProps) {
      cwrp.call(this, newProps.data, this.props.data);
    };
  }

  if (def.componentWillUpdate) {
    const cwu = def.componentWillUpdate;
    def.componentWillUpdate = function () {
      cwu.call(this, this.props.data);
    };
  }

  if (def.componentDidUpdate) {
    const cdu = def.componentDidUpdate;
    def.componentDidUpdate = function () {
      cdu.call(this, this.props.data);
    };
  }

  if (def.shouldComponentUpdate) {
    const scu = def.shouldComponentUpdate;
    def.shouldComponentUpdate = function (newp, newState) {
      return scu.call(this, this.props.data, newp.data, this.state, newState);
    };
  }

  var component = createFactory(createClass(def));

  return function (data, ...args) {
    return component({data, key: data && data.key}, ...args);
  };
}

eksempel.js

import {createComponent} from './create-component-es'
import React, {DOM} from 'react';
const {h1, div} = DOM;

const MinKomponent = createComponent(({name}) => {
  return div({}, h1({}, `Hei ${name}!`));
});

React.render(MinKomponent({name: 'Dude'}), el);