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 George
  .avatar
	img.img-circle(alt="George Smith" src="media/avatar.jpg")

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 />,
  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 George"), 
		  React.createElement("div", {class: "avatar"}, React.createElement("img", {alt: "George Lastname", 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 />,
  document.getElementById('welcome')
);

Into welcome.jsx file

var Welcome = React.createClass({
  render: function() {
	return (
		<div class="welcome-back">
			<div class="greating">Welcome back George</div>
			<div class="avatar">
				<img alt="George Lastname" src="media/avatar.jpg" class="img-circle">
			</div>
		</div>
	);
  }
});

React.render(
  <Welcome />,
  document.getElementById('welcome')
);