Overview
If we want to set up a fast way to develop React web apps, we have to be able to compile jsx files quickly. To accomplish this, we use browserify and grunt. Read the following posts before going further: Setup Grunt, Continuous NodeJS.
Step 1: Installation
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
# ### in Terminal ###
npm install --save react
npm install --save-dev grunt
npm install --save-dev load-grunt-tasks
npm install --save-dev grunt-contrib-watch
npm install --save-dev grunt-contrib-clean
npm install --save-dev grunt-nodemon
npm install --save-dev grunt-concurrent
npm install --save-dev grunt-browserify
npm install --save-dev grunt-react
touch Gruntfile.js
Step 2: Setup
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
// ### in Gruntfile.js ###
module.exports = function(grunt){
require('load-grunt-tasks')(grunt);
grunt.initConfig({
watch: {
livereload: {
tasks: ['clean', 'browserify'],
options: {
livereload: true
},
files: [
'./public/**/*.less',
'./public/**/*.jsx',
'./public/**/*.js',
'./views/**/*.ejs'
]
}
}, // End watch
nodemon: {
dev: {
options: {
nodeArgs: ['--debug'],
file: '--debug ./bin/www'
}
}
}, //End nodemon
concurrent: {
dev: {
options: {
logConcurrentOutput: true
},
tasks: ['watch', 'nodemon:dev']
}
}, // End concurrent
clean: {
build: {
src: ['./public/javascripts/build.min.js']
}
}, // End clean
browserify: {
options: {
transform: [ require('grunt-react').browserify ]
},
files: {
src: ['./public/javascripts/**/*.jsx', './public/javascripts/**/*.js'],
dest: './public/javascripts/build.min.js'
}
} // End browserify
});
grunt.registerTask('default', ['clean', 'browserify', 'concurrent:dev']);
};
watch: Will watch changes and run clean, browserify and reload.
nodemon: Will restart the server when files change.
concurrent: Will run both watch and nodemon at the same time.
clean: Will remove the old build.min.js
browserify: Will concatinate all the js files and jsx files into 1.
Step 3: Dev
With this setup, we can add jsx and js files. Your directory (at the beginning… it shouldn’t look this way) will look like this.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
.
├── Gruntfile.js
├── app.js
├── bin
│ └── www
├── package.json
├── public
│ ├── images
│ ├── javascripts
│ │ ├── build.min.js
│ │ ├── driver.jsx
│ │ └── test.jsx
│ └── stylesheets
│ ├── style.css
│ └── style.less
├── routes
│ ├── index.js
│ └── users.js
└── views
├── error.ejs
└── index.ejs
1
2
3
4
5
6
7
8
9
10
11
12
13
// ### in test.jsx ###
/** @jsx React.DOM */
var React = require('react');
var Test = React.createClass({
render: function(){
return (
<h1>Hello From React</h1>
);
}
});
module.exports = Test;
1
2
3
4
5
6
7
8
9
10
// ### in driver.jsx ###
/** @jsx React.DOM */
var React = require('react');
var Test = require('./test.jsx');
window.onload = function(){
React.render(<Test />, document.body);
};
You have to make sure to require build.min.js in index.ejs.
Now you can simply call grunt and the server will start up. Any change you make to a jsx, js, less or ejs file will reload the server and the browser tab.