Gulp Reactify With React.js Component -Tutorial Savvy

Reactify is a Browserify for React JSX.
To know more about Browserify check my previous post about introduction to Browserify.
Browserify enable the code shared between Client and server side.
In this demo,”We will learn to create Gulp task to integrate Browserify-reactify to generate bundle that can be used by client side”.
The demo requires the following packages installed in the machine npm,gulp,gulp-browserify,reactify and react.

React library can be installed using npm install react –save command.The following screenshot shows the terminal with react installation.

Reactify can be installed by using npm install reactify –save command.The following screenshot shows the terminal with reactify installation.

Gulp-browserify can installed by using npm install gulp-browserify –save command.The following screenshot shows the terminal with gulp-browserify installation in progress.

The updated project structure GulpReactifyDemo looks like following screenshot.

The content of package.json are as follows with all dependent modules are listed.

{
  "name": "GulpReactifyDemo",
  "version": "0.0.1",
  "description": "Gulp Reactify Demo",
  "author": "Sandeep",
  "license": "ISC",
  "repository": {
    "type": "git"
  },
  "dependencies": {
    "gulp": "^3.8.11",
    "gulp-browserify": "^0.5.1",
    "react": "^0.13.2",
    "reactify": "^1.1.0"
  }
}

The react component definition is present in dev/my-script.js file.The content of dev/my-script.js file are as follows.

var React = require('react');
var MyName = React.createClass({
    render: function() {
        return (
            <p>{this.props.name}</p>
        );
    }
});
module.exports = MyName;
React.render(<MyName name="Sandeep"/>,document.body)

The gulp task for reactify is present in Gulpfile.js file.The content of Gulpfile.js file are as follows.

var gulp = require('gulp'),
    browserify = require('gulp-browserify');
gulp.task('reactify', function() {
    gulp.src('dev/my-script.js')
        .pipe(browserify({transform: 'reactify'}))
        .pipe(gulp.dest('dist/'));
});
gulp.task('default',['reactify']);
gulp.task('watch', function() {
    gulp.watch('dev/*.js', ['default']);
});

The gulp task can be executed by calling gulp command in the terminal.The following screenshot shows the Gulp in execution in a terminal.

We can also execute Gulp watch command to keep listening to the dev/my-script.js file and output reactified code in dist/my-script.js file.

The dist/my-script.js file contains the browserified/reactified code generated by Gulp task.
Now we can use the dist/my-script.js file in index.html file to render in the browser.The content of index.html file is as follows.

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>JSX Reactified Using Gulp Demo</title>
</head>
<body>
<script  src="dist/my-script.js"></script>
</body>
</html>