external-jsx-loader

A webpack loader to be used with standalone JSX files, in order to separate the component's logic from its template.

Install

npm install --save-dev external-jsx-loader

or (same thing, but shorter):

npm i -D external-jsx-loader

Usage

1. Create your component same as before (Eg. my-component.js)
2. Move the code (including the JSX tags) from the render() method to a new file (Eg. my-component.jsx)
3. In your component's definition file, require the JSX file (Eg. const view = require('./my-component.jsx');)
4. In the render() method, return view(this);
5. Configure webpack to use the external-jsx loader for the template files, based on the file extension you chose for your templates

(See the sample "Hello World!" app in the demo folder)

Webpack config

The easiest way is to configure it as a pre-loader:

{
	module: {
		preLoaders: [
			{test: /\.jsx$/, loader: 'external-jsx' /*...*/}
		],

		loaders: [
			{test: /\.jsx?$/, loader: 'babel' /*...*/}
		]
	}
}

But you can configure it as a loader too:

{
	module: {
		loaders: [
			{test: /\.jsx$/, loader: 'babel!external-jsx' /*...*/},
			{test: /\.js$/,  loader: 'babel' /*...*/}
		]
	}
}

Either way, you have to make sure the loader is executed before the babel loader. (And yes, the babel loader will still have to be executed on the template files)

Example

File: my-component.js

const React = require('react');
const view  = require('./my-component.jsx'); // require the template

class MyComponent extends React.Component {
	constructor(props) {
		super(props);

		this.state  = {who: 'World'};
		this.greet  = this.greet.bind(this);
		this.update = this.update.bind(this);
	}

	greet(evt) {
		alert(`Hello ${this.state.who}`);
	}

	update(evt) {
		this.setState({who: evt.target.value});
	}

	render() {
		return view(this); // render the template passing `this` as the context
	}
}

module.exports = MyComponent;

File: my-component.jsx

<div>
	<h1>Hello!</h1>

	<input value={this.state.who} onChange={this.update} type="text" />
	<button onClick={this.greet}>Say hi!</button>
</div>

You can also require and use components in your template file or even have javascript code, just like before:

const AnotherComponent = require('./path/to/another-component.js');

<AnotherComponent>
	{/*if*/ (this.state.on) ? (
		<span className="lights-on">ON</span>
	)/*else*/ : (
		<span className="lights-off">OFF</span>
	)/*endif*/}
</AnotherComponent>

(the code you might have had in the render() method should be moved here if you really can't find a better place for it)