Cheat sheet: Ubuntu 16.04 + NodeJS + React + Grunt + Babel + Browserify Configuration

1. Install NodeJS
>sudo apt-get install nodejs nodejs-legacy

2. Create a project using npm
>npm init

3. Install React
>npm install --save react react-dom

4. Install Babel and plugins
>npm install --save-dev grunt-babel
>npm install babel-preset-env --save-dev
>npm install --save-dev babel-plugin-syntax-jsx

The last command line is for JSX which is highly recommended by React.

5.Config .babelrc

{

"plugins": ["syntax-jsx"],

"presets": [

["env", {

"targets": {

"chrome": 52,

"browsers": ["last 2 versions", "safari 7"]

}

}]

]

}

6.Install Grunt and plugins
>npm install -g grunt-cli
>npm install grunt --save-dev
>npm install grunt-contrib-jshint --save-dev

7. Config Grunt file

module.exports = function(grunt) {

// Project configuration.

grunt.initConfig({

pkg: grunt.file.readJSON('package.json'),

babel: {

options: {

sourceMap: true

},

dist: {

files: {

"build/app.js": "src/index.js"

}

}

}

});

// Load the plugin that provides the "uglify" task.

grunt.loadNpmTasks('grunt-babel');

// Default task(s).

grunt.registerTask('default', ['babel']);

};

8. Create two directories named src and build. And create index.js under 'src' folder. 

import React from 'react';

import ReactDOM from 'react-dom';

ReactDOM.render(

<h1>Hello, world!</h1>,

document.getElementById('root')

);

9. Try to run command 'grunt'. app.js should be successfully generated.

10. Install Browserify. 
>npm install grunt-browserify

In the next blog, we will use browserify to create a bundled js for browser use.