Package Exports

jade-react-loader

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (jade-react-loader) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

Jade to React JS loader for Webpack

PreRequisites

React & Webpack are peerDependencies (will be installed automatically with npm 2 but left to end-user under npm 3)

Usage

Like any loader can be set up in a configuration file but to use in a require statement:

var React = require("react");

var template = require("jade-react!./react/components/template.jade");

var JadeComponent = React.createClass({
    render: template
});

Passing Arguments to templates

If locals is an object specifying the components props you can then render the template on the page like so:

React.render(React.createElement(JadeComponent, locals), document.getElementById("reactivePlace"));

OR by passing options through the loader

var React = require("react");

// pass options as json
var template = require("jade-react?{locals: {}, basedir: "", pretty: true}!./react/components/template.jade");

var JadeComponent = React.createClass({
    render: template
});

OR by passing arguments directly to the template function
For example if you are using the css-loader (and style-loader) to create modular CSS packages
- typical webpack config:

  module: {
    loaders: [
      {
        test: /\.css$/,
        loader: 'style!css?modules&localIdentName=[name]__[local]___[hash:base64:5]'
      }
    ]
  }

then you could pass these styles to your jade template like so:

var React = require("react");
var styles = require('./template.css');

var template = require("jade-react!./react/components/template.jade");

var JadeComponent = React.createClass({
    render: function () {
        return template({styles: styles})
    }
});

where they could be referenced as class names:

section(className=styles.content)
  h1 Hey There!

More Info

A simple example app (using ES6 syntax) can be seen at jade-react-loader-example
Loader uses the react-jade package and Jade templates are subject to the same limitations as listed there.

Acknowledgements

Thanks to kilokeith for valuable contributions