Using ReactJS with Browserify and Gulp

18 July 2014
javascript

ReactJS uses a special syntax called JSX, not the normal JS one. Usually, when you want to work with ReactJS JSX files, you need to transform it to a normal JS file and then operate on that file. However, with the help of Reactify, a transform for Browserify, you won’t need to compile jsx to js files anymore, just use it directly from your code.

For example, I have two files: view.jsx and main.js. view.jsx contains the definition for React view and main.js is the website’s main script that loads the view through require().

view.jsx

var React = require('react');

var MyView = React.createClass({
  render: function(){
    return (
      <div>
        Example
      </div>
    );
  }
});
module.exports = MyView;

main.js

var React = require('react');

var view = require('./view.jsx'); // need to specify the jsx extension
React.renderComponent(view(), document.getElementById('content'));

Next, create a Gulp task for compiling main.js using Browserify

var browserify = require('browserify');
var gulp = require('gulp');
var source = require("vinyl-source-stream");
var reactify = require('reactify');

gulp.task('browserify', function(){
  var b = browserify();
  b.transform(reactify); // use the reactify transform
  b.add('./main.js');
  return b.bundle()
    .pipe(source('main.js'))
    .pipe(gulp.dest('./dist'));
});

After you run this task (using gulp browserify), the output file will be placed in ./dist folder.