[Solved]-How to get React to work with Grunt and Babel?-Reactjs

Hope you got your solution still answering here, it will help some people who needs to work react with grunt and babel

make sure first you have installed the followings:

npm install --save-dev grunt-babel babel-cli

Grunt plugin for Babel grunt-babel

npm install --save-dev babel-plugin-transform-es2015-modules-amd 

npm install babel-preset-env --save-dev 

npm install --save-dev babel-cli babel-preset-react

then add a grunt task/gruntfile as below :

module.exports = function (grunt) {
'use strict';
  grunt.initConfig({
    babel: {
        options: {
            sourceMap: false,
            presets: ["env", "react"],
            plugins: ["transform-es2015-modules-amd"]
        },
        dist: {
            files: [{
                expand: true,
                cwd: './src',
                src: ['*.js'],
                dest: './generated',
                ext: '.js'
            }]
        }
    }
  });
  grunt.loadNpmTasks('grunt-babel');
  grunt.registerTask('default', ['babel']);
};

package.json

   "devDependencies": {
       "babel-cli": "^7.0.0-beta.3",
       "babel-core": "7.0.0-alpha.19",
       "babel-plugin-transform-es2015-modules-amd": "^7.0.0-alpha.19",
       "babel-preset-env": "^2.0.0-beta.2",
       "babel-preset-es2015": "7.0.0-alpha.19",
       "babel-preset-react": "^7.0.0-alpha.19",
       "grunt-babel": "^7.0.0",
 }

Hope this helps.

EDITED

babel -> @babel

Since Babel 7 the Babel team switched to scoped packages, so you now have to use @babel/core instead of babel-core.

Your dependencies will need to be modified like so:

babel-cli -> @babel/cli. Ex: babel- with @babel/.

package.json will be look like below:

"@babel/cli": "^7.1.2",
"@babel/core": "^7.1.2",
"@babel/preset-env": "^7.1.0",
"@babel/preset-react": "^7.0.0",
"grunt-babel": "^8.0.0",