running Gulp gives throw er; // Unhandled 'error' event

Question

main.js

var React = require('react'); 
 var App = require('./components/app.js');
 React.render(
<App />,
    document.getElementById('container')
);

app.js

var React = require('react'); 
  var App = React.createClass({
render: function(){
    return (
        <p>Hello</p>
    );
}
});
module.exports = App;

is there any problem in gulpfile.js? because it works fine if i write react component code inside main.js file.

Answer 1

You're forgetting to transform your JSX into Javascript.

Here's my gulp build task - It uses browserify and reactify to transform and bundle my components, then minifies them, and finishes by placing them into a directory that my application reads from.

var gulp = require('gulp');
var uglify = require('gulp-uglify');
var source = require('vinyl-source-stream');
var browserify = require('browserify');
var reactify = require('reactify');
var streamify = require('gulp-streamify');

gulp.task('build', function () {
    browserify({
        entries : ['./js_modules/main.js'],
        transform : [reactify],
    })
    .bundle()
    .pipe(source('bundle.js'))
    .pipe(streamify(uglify('bundle.js')))
    .pipe(gulp.dest('src/main/webapp/js/bundle.js'));
});