/gulp-render

Pre-render React components at compile time. E.g. SomePage.jsx -> some-page.html

Primary LanguageJavaScriptMIT LicenseMIT

gulp-render   Build Status Dependency Status Tips Gitter

Pre-render React components at compile time.

How to Install

NPM

$ npm install gulp-render --save-dev

How to Use

Example 1:

var gulp = require('gulp');
var render = require('gulp-render');

gulp.task('default', function() {
  return gulp.src('src/pages/**/*.jsx')
    .pipe(render({template: 'src/pages/_template.html'}))
    .pipe(gulp.dest('build'));
});

Example 2:

var gulp = require('gulp');
var render = require('gulp-render');

gulp.task('default', function() {
  return gulp.src('src/pages/**/*.jsx')
    .pipe(render({
      template:
        '<!doctype html>' +
        '<html><head><title><%=title%></title></head>' +
        '<body><%=body%></body></html>',
      harmony: false,
      data: {title: 'Page Title'}
    }))
    .pipe(gulp.dest('build'));
});

React Component Sample (src/pages/SomePage.jsx)

var React = require('react');
var DefaultLayout = require('../layouts/DefaultLayout.jsx');

var SomePage = React.createClass({
  statics: {
    layout: DefaultLayout
  },
  render() {
    return (
      <div className="container">
        <h1>React Component Sample</h1>
        <p>Lorem ipsum dolor sit amet.</p>
      </div>
    );
  }
});

module.exports = SomePage;

API

render(options)

option values default
template Lo-Dash template string or filename null
harmony true: enable ES6 features true
stripTypes true: enable Flow type annotations true
hyphenate true: SomePage.jsx -> some-page.html true
staticMarkup true: HTML output will not have data-react-* attributes false
data E.g. {title: 'Hello'} or function(file) { ... } object or function

Related Projects

React.js Starter Kit - a skeleton for an isomorphic web application (SPA)

License

The MIT License (MIT) @ Konstantin Tarkus (@koistya)