index.js

import view from './view';
import model from './model';
import proptypes from './proptypes';

import { merge } from './utils';

import { render } from 'react-dom';

const Comp = merge(view, model, proptypes);

render(<Comp title="this is title" />, document.getElementById('root'));

model.js

let initalState = {
    count: 1,
};

export default {
    onInit() {
        this.state = initalState;
    },

    // life cycle
    componentWillReceiveProps(nextProps) {
        // ...
    },
  
    onCountAdd() {
      this.setState({
        ...this.state,
        count: this.state.count + 1,
      });
    },
};

proptypes.js

import PropTypes from 'prop-types';

export default {
    title: PropTypes.string.isRequired,
};

utils.js

export const merge = (view, model, proptypes) => {
    class MergedComponent extends React.Component {
        constructor() {
            super(...arguments);

            Object.keys(model).forEach(key => {
                this[key] = model[key].bind(this);
            });

            this.onInit();
        }

        render() {
            return view.call(this);
        }
    }
    if (proptypes) {
        MergedComponent.propTypes = proptypes;
    }

    return MergedComponent;
}

view.js

import React from 'react';

// do not use arrow function here
export default function(){
    const {
        count,
    } = this.state;
  
    const {
      title,
    } = this.props;
    
    const {
        onCountAdd,
    } = this;
  
    return (
        <div>
          {title}
          {count}
          <button onClick={onCountAdd} />
        </div>
    );
};