MyComponent.js

import React, { Component } from 'react';
import template from './MyComponentsTemplate';

export class MyComponent extends Component {
  /* skipping all this */
  
  render() {
    retun template.call(this)
  }
}

MyComponent1.jsx

import React, { Component } from 'react';

export class MyComponent extends Component {
  constructor(props) {
    super(props);
    this.state = {
	  foo: "foo",
	  bar: "bar"
    }
  }

  handleFormSubmit(event) {
    event.preventDefault();
    /* ... */
  }

  render() {
    return(
      <form onSubmit={ this.handleFormSubmit.bind(this) } >
        <input type="text" value={ this.foo } ref="foo" />
        <button type="submit">Go!</button>
      </form>
    )
  }
}

MyComponent2.jsx

import React, { Component } from 'react';

var template = function template() { return(
<form onSubmit={ this.handleFormSubmit.bind(this) } >
  <input type="text" value={ this.foo } ref="foo" />
  <button type="submit">Go!</button>
</form>
)}

export class MyComponent extends Component {
  constructor(props) {
    super(props);
    this.state = {
    foo: "foo",
    bar: "bar"
    }
  }

  handleFormSubmit(event) {
    event.preventDefault();
    /* ... */
  }

  render() {
    return(
	  return template.call(this);
    )
  }
}

MyComponentTemplate.jsx

import React from 'react';
var template = function(){return(

<form onSubmit={ this.handleFormSubmit.bind(this) } >
  <input type="text" value={ this.foo } ref="foo" />
  <button type="submit">Go!</button>
</form>

)}

export default template;