grunt-react task just hangs when I try to run it

Question

I'm trying to automate .jsx template compiling. I'm using grunt to achieve this goal. But at the moment my grunt task for .jsx compiling just hangs and nothing happens...

I added NPM package grunt-react . Then I added configuration for it:

module.exports = function( grunt ){
    grunt.loadNpmTasks('grunt-react');

    grunt.initConfig({
        react: {
            dynamic_mappings: {
                files: [
                    /* ui-components compiling */
                    {
                        expand: true,
                        cwd: './scripts/components',
                        src: ['**/**.jsx'],
                        dest: './scripts/components/dest',
                        ext: '.js'
                    }
                ]
            }
        }
    });

    grunt.registerTask('react', ['react']);
};

Then I trying to run this task using grunt grunt react and the task is hangs... and nothing happens. It's looks like some process running, but in reality nothing happens.

Grunt versions:
grunt-cli v0.1.13
grunt v0.4.5

Operating system Windows 7.

Answer 1

I learned the issue and got the solution. On June 12th, 2015, the React team has deprecated JSTransform and react-tools , which grunt-react package uses. Instead this module author recomend to use Babel.

I installed Babel and related packages using command:

npm install --save-dev grunt-babel babel-preset-es2015 babel-plugin-transform-react-jsx babel-preset-react

Then I configured my Gruntfile.js to use Babel for compiling .jsx files to .js:

module.exports = function( grunt ){
    grunt.loadNpmTasks('grunt-babel');

    grunt.initConfig({
        pkg: grunt.file.readJSON('package.json'),
        babel: {
            options: {
                plugins: ['transform-react-jsx'],
                presets: ['es2015', 'react']
            },
            jsx: {
                files: [{
                    expand: true,
                    cwd: './scripts/components',
                    src: ['*.jsx'],
                    dest: './scripts/components',
                    ext: '.js'
                }]
            }
        }
    });

    grunt.registerTask('react', ['babel']);
};

And now, when I run the command grunt react my react .jsx components is compiling.