Use Babel to compile React JSX with Grunt

Have you heard about React? Check it out if you haven't.

Here's a quick configuration to add Babel, a JavaScript compiler, to your Grunt process.

With the following you will transform your .jsx files to .js that will browser will understand and process.

Enjoy.

package.json


 "name": "XXX",
 "version": "1.0.0",
 "description": "XXXXXXX",
 "devDependencies": {
   ......
   "grunt-babel": ">= 6.0.0",
   "babel-plugin-transform-react-jsx": ">= 6.3",
   "babel-preset-es2015": ">= 6.3",
   "babel-preset-react": ">= 6.3"
 }
}Code language: JavaScript (javascript)

Gruntfile.js

babel: {
  options: {
    plugins: ['transform-react-jsx'],
    presets: ['es2015', 'react']
  },
  jsx: {
    files: [{
      expand: true,
      cwd: 'source/js/jsx/', // Custom folder
      src: ['*.jsx'],
      dest: 'source/js/jsx-compiled/', // Custom folder
      ext: '.js'
    }]
  }
}Code language: CSS (css)

Leave a Reply

Your email address will not be published. Required fields are marked *