Installation

First up, obviously;

  npm install --save-dev jsx-control-statements-jstransform

Webpack

For webpack you'll want to npm install the existing JSTransform Loader and then chain it in front of your existing JSX Loader, setting it to use the control statements visitors like so:

  {..., loader: 'jsx-loader!jstransform-loader?jsx-control-statements-jstransform/jstransform'}

Node-JSX

If you're using Node-JSX to transpile inside node, you can just use the included server transformer as an additional transform, which you pass in during the install of Node JSX.

var nodeJsx = require('node-jsx');
var serverTransformer = require('jsx-control-statements-jstransform/server-transformer');

nodeJsx.install({
  extension: '.jsx',
  additionalTransform: serverTransformer
});

Browserify (without Babel)

As with Webpack, use the Babel plugin if you're using Babel, otherwise you need to use JSTransformify to run the JSTransform visitors - doing this depends on how you use Browserify.

Command Line

browserify -t [ jstransformify -v jsx-control-statements-jstransform/jstransform ] app.js > bundle.js

Gulp

This is a bit more involved given than I can't find a nice way to pass options to gulp-browserify. Unfortunately you have to do something a bit like this:

var jstransformify = require('jstransformify');
var jsxControlStatements = require('jsx-control-statements-jstransform');
var reactify = require('reactify'); 

function jsxControlStatementsify(filename) {
  return jstransformify(filename, {visitors: jsxControlStatements});
}

...
// (in your task)
  gulp.src('src/entry.js')
    .pipe(browserify({
      transform: [jsxControlStatementsify, reactify]
    }))
    .pipe(gulp.dest('./dist'));