put your react component in a closure

App.js

import React from 'react';
import reclass from './reclass';
import Greeter from './Greeter';

function App(ctx) {
  ctx.state = { civility: 'Mr.' };

  function changeCivility(e) {
    ctx.setState({ civility: e.target.value });
  }

  function render(_, { civility }) {
    return (
      <div>
        <p>
          <label>Civility </label>
          <input value={civility} onChange={changeCivility} />
        </p>
        <Greeter civility={civility} />
      </div>
    );
  }

  return { render };
}

export default reclass(App);

Greeter.js

import React from 'react';
import reclass from './reclass';

function Greeter(ctx) {
  ctx.state = { name: 'Smith' };

  function changeName(e) {
    ctx.setState({ name: e.target.value });
  }

  function componentWillReceiveProps(newProps) {
    console.log('got new props', newProps);
  }

  function render({ civility }, { name }) {
    return (
      <div>
        <label>Name </label>
        <input
          placeholder="Type your name"
          value={ctx.state.name}
          onChange={changeName}
        />
        <h3>
          Hello {civility} {name}
        </h3>
      </div>
    );
  }

  return { render, componentWillReceiveProps };
}

export default reclass(Greeter);

index.js

import React from 'react';
import { render } from 'react-dom';
import App from './App';

render(<App />, document.getElementById('root'));

reclass.js

import React from 'react';

export default function reclass(factory) {
  return class extends React.Component {
    static displayName = factory.name;
    constructor(props) {
      super(props);
      Object.assign(this, factory(this));
      const render = this.render;
      this.render = () => {
        return render(this.props, this.state);
      };
    }
  };
}