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"
 }
}

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'
    }]
  }
}

About Rick

Senior Front-end Software Engineer from Barcelona, Haidong Gumdo Instructor (korean martial art of the sword), street photographer, travel lover, TV addict, Boston Red Sox fan, and privacy advocate.

Leave a Reply

Add <code> Some Code </code> by using this tags.

*
*