React.js: how to decouple jsx out of JavaScript

Question

Is there any way to move the jsx from a component\'s render function to a separate file? If so, how do I reference the jsx in the render function?

Answer 1

I just separated JSX into anonymous function files

template.js

export default (component) => {
return 
Hello {component.props.name}
}

my-component.js

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

export default MyComponent extends Component {
   render() {
     return template(this);
   }
}

In template you can access props or state or functions using component variable.