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

Leave a Reply

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

*
*