jsx-template-loader

jsx template loader for webpack

Allows you to keep your react templates in a separate file, rather than inlining them. This way, your React components can stay vanilla js files. (This loader should be chained with babel-loader, see webpack.config.js example for details.)

Installation

npm install jsx-template-loader

Usage

Puppy.react.js

var jsxTempl = require('jsx-template!./puppy.jsx');

export default React.createClass({
  render: function() {
    return jsxTemplate({name: 'Thunderclaw', message: 'Woof!'});
  }
});

puppy.jsx

<h1 class="name">{context.name}</h1>
<p class="message">{context.message}</p>

webpack.config.js

// ...
module: {
  loaders: [
    {
      test: /\.jsx/,
      loaders: [
        'jsx-template-loader',
        'babel-loader'
      ]
    }
  ]
}
// ...