Gulp-react converts jsx into js code, performs error reporting and solution

  node.js, question

Just contacted react and found that gulp-react can convert jsx into js for execution, so gulp-react is used to convert jsx into JS;
The libraries on which react runs are as follows. browser.js is responsible for converting jsx to js, so why did I report an error when I adjusted the browser.js annotation?
Jsx code is as follows, is a demos:

clipboard.png

Babelrc is as follows:

bracket
 "presets":[
 'es2015','react'
 ],
 "plugins":[]
 bracket

Gulpfile.js reads as follows:

gulp.task('babel',()=>{
 return gulp.src('zouxiu/js/es6.jsx')
 .pipe(babel())
 // .pipe(react())
 .pipe(rename('router.js'))
 .pipe(gulp.dest('zouxiu/js/build/'));
 });

After transformation, index.html quoted the following:

clipboard.png

I changed the original babel to javascript (because I don’t think babel is needed now that I have used gulp-react to convert it, I haven’t changed babel here, browser.js is annotated, since browsers don’t load router.js) and I also annotated browser.js;
Then the browser reported the error:

clipboard.png
(also don’t know where is wrong)
Novice, by the way, what are the plug-ins Babel-Preset-Reach and babel-preset-es2015 used for?

  1. It is suggested to paste up the code to find out what the problem is.

  2. babel-preset-reactAndbabel-preset-es2015Can be regarded as yesbabelPlug-in supplement of compilation function. OriginallybabelIt is only a tool to compile es6 code into es5 code. However, the es standard has developed rapidly and many new features have been proposed, but they have not been implemented on browsers (and may never be implemented), such asasync, awaitThis; However, developers hope to use these features in actual code writing, so such plug-ins appear. These plug-ins can be said to be babel’s choices in the overall code structure. The specific plug-in list can be found here:http://babeljs.io/docs/plugins/.
    If you want to know more details, please read babel’s website.