- React & Webpack are peerDependencies (will be installed automatically with npm 2 but left to end-user under npm 3)
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
});- If
localsis 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(andstyle-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!-
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.
- Thanks to kilokeith for valuable contributions