gulp-react-jade-include

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')
);