Working gulpfile.js with gulp-babel ES6 and React

gulpfile_react.js

var gulp = require('gulp');
var babel = require("gulp-babel");
var sourcemaps = require('gulp-sourcemaps');
var concat = require('gulp-concat');
var uglify = require('gulp-uglify');

gulp.task('default', () => {
    return gulp.src('js/main.js')
        .pipe(sourcemaps.init())
        .pipe(babel({
            presets: ['es2015','react']
        }))
        .pipe(concat('all.js'))
        .pipe(uglify())
        .pipe(sourcemaps.write('.'))
        .pipe(gulp.dest('build'));
});

gulp.task('watch', function () {
    gulp.watch('js/*.js', ['default']);
});

gulpfile_react_browserify.js

const gulp = require('gulp');
const sourcemaps = require('gulp-sourcemaps');
const concat = require('gulp-concat');
const uglify = require('gulp-uglify');
const browserify = require('browserify');
const babelify = require('babelify');
const source = require('vinyl-source-stream');
const rename = require('gulp-rename');
const streamify = require('gulp-streamify');


gulp.task('default', () => {
    return browserify('main.js')
        .transform(babelify, {presets: ["es2015", "react"]})
        .bundle()
        .pipe(source('all.js'))
        .pipe(gulp.dest('build'))
        .pipe(rename('all.min.js'))
        .pipe(streamify(concat('all.min.js')))
        .pipe(streamify(uglify()))
        .pipe(sourcemaps.write('.'))
        .pipe(gulp.dest('build'));
});

gulp.task('watch', () => {
    gulp.watch('js/*.js', ['default']);
});

Bro how to run this?

This is an older approach to compiling react - try using gulp-babel with presets: ["@babel/env", "@babel/preset-react"]