Include external jade templates into react JSX files

Options

• options: apply any JADE options

Example

Let us have such welcome.jade file

.welcome-back
  .greating Welcome back {this.props.title}
  .avatar
    img.img-circle(alt="{this.props.title}" src="{this.props.avatar}")

The following gulp snippet

var react = require('gulp-react'),
    reactJadeInclude = require('gulp-react-jade-include'),

gulp.task('renderJSXWithJADE', function(){
  return stream = gulp.src("welcome.jsx")
    .pipe(reactJadeInclude({
      pretty: true
    }))
    .pipe(react())
    .pipe(gulp.dest("dest"));
});

Will turn

var Welcome = React.createClass({
  render: function() {
    return (
      <include src="welcome.jade"/>
    );
  }
});

React.render(
  <Welcome title="Prometeus" avatar="media/avatar.jpg" />,
  document.getElementById('welcome')
);

Into welcome.js file

var Welcome = React.createClass({displayName: "Welcome",
  render: function() {
    return (
        React.createElement("div", {class: "welcome-back"}, 
          React.createElement("div", {class: "greating"}, "Welcome back Prometeus"), 
          React.createElement("div", {class: "avatar"}, React.createElement("img", {alt: "Prometeus", src: "media/avatar.jpg", class: "img-circle"}))
        )
    );
  }
});
React.render(
  React.createElement(Welcome, null),
  document.getElementById('welcome')
);

Or you can skip rendering JSX to JS, so such gulp snippet

var react = require('gulp-react'),
    reactJadeInclude = require('gulp-react-jade-include'),

gulp.task('renderJSXWithJADE', function(){
  return stream = gulp.src("welcome.jsx")
    .pipe(reactJadeInclude({
      pretty: true
    }))
    .pipe(gulp.dest("dest"));
});

Will turn

var Welcome = React.createClass({
  render: function() {
    return (
      <include src="welcome.jade"/>
    );
  }
});

React.render(
  <Welcome title="Prometeus" avatar="media/avatar.jpg" />,
  document.getElementById('welcome')
);

Into welcome.jsx file

var Welcome = React.createClass({
  render: function() {
    return (
        <div className="welcome-back">
            <div className="greating">Welcome back {this.props.title}</div>
            <div className="avatar">
                <img alt={this.props.title} src={this.props.avatar} className="img-circle">
            </div>
        </div>
    );
  }
});

React.render(
  <Welcome title="Prometeus" avatar="media/avatar.jpg" />,
  document.getElementById('welcome')
);