Reactjs Skeleton — with gulp and browserify

This story is all about how to start development in Reactjs. I am going to divide this story in 3 parts.

  1. Introduction
  2. Problem which I have faced.
  3. Solution of problem.

Introduction

Reactjs provides getting start guide and it contains the different ways to start with react.

Aim : You need to work on ‘jsx’ files if you are working with react, so the main aim is to compile the jsx file, and all these 3 methods achieve the same thing.

These are the following ways to get start with react
1) Using react with browserify npm package
2) Using react with webpack npm package
3) Using react with babel-core library.

Problem

I was newbie at React so, I started with 3rd option which is the easiest for me. In the 3rd method you just need to include babel-core js library which compile jsx in the browser.

So, till then it was good enough for me to work in this pattern but problem came in my way when I wanted use react plugin like ReactBootstrap, how can I use ‘require’ in front end? then I looked into other plugins of react and I relished that every plugin provides npm package and I need to use ‘require’ feature in front end side to use those plugins. but How can I do that?

Solution

To resolve this problem I went back to react and I choose the 1st method which allows me use ‘require’.

To use that I need to install nodejs in my system and after that need to install some npm packages to compile jsx. I used react, react-dom, babelify, babel-preset-react npm packages.

$ npm install --save react react-dom babelify babel-preset-react
$ npm install -g browserify
$ browserify -t [ babelify --presets [ react ] ] main.js -o bundle.js

Let me explain the code block
#1) To install npm packages.
#2) To install browserify globally, so we can use it to compile jsx
#3) to compile main.js and bundle the js in bundle.js

Now here is one problem you need to run the #3) command every time after you save your react file, which is tedious. So, the flow is I develop the component save the file, then I need to recompile using browserify and then refresh the browser screen to test the output. I had the feeling that I can reduce this recompile step. and at that time Gulp came in the picture.

Gulp : gulp is the automation tool which gives you the power of automate your task.

So, Aim : Let gulp to compile jsx files with using browerify and babel, because gulp can watch on your files and fire events whenever you change the file.


So, I used the gulp for 2 reasons :
1) To compile jsx using Browserify
2) To watch on our source file and recompile automatically whenever file is changed.

Install the npm packages

$ npm install --save react react-dom babel-preset-react
$ npm install --save-dev babelify browserify gulp gulp-react gulp-util reactify vinyl-source-stream
$ npm install -g gulp

You need to have gulpfile.js in your root folder if you want to run the gulp.

var gulp = require(‘gulp’);
var browserify = require(‘browserify’);
var source = require(“vinyl-source-stream”);
var reactify = require(‘reactify’);
gulp.task(‘browserify’, function() {
var b = browserify({
entries: [‘src/main.js’], //entry file
debug: true
});
b.transform(reactify); // use the reactify transform
return b.bundle()
.pipe(source(‘main.js’))
.pipe(gulp.dest(‘./dist’));
});
gulp.task(‘watch’, function() {
gulp.watch(‘src/*.js’, [‘browserify’]);
gulp.watch(‘src/*.jsx’, [‘browserify’]);
});
gulp.task(‘default’, [‘watch’,’browserify’]);

and then last one

$ gulp

that’s it.

Now I don’t need to compile jsx every time by myself, gulp do it for me and I can also use any react plugin easily.

I created the skeleton for react to get a kick start development with react. 
Here is the Github Repo.

One clap, two clap, three clap, forty?

By clapping more or less, you can signal to us which stories really stand out.