webpackでReactが動かない

前提・実現したいこと

現在新規プロジェクトに向けてwebpackでReact導入してGulpで動かそうと試していますが、
下記のようなエラーが出力されてしまいます。
こちら、エラー出さずにうまく出力されてほしいのが願望です。

発生している問題・エラーメッセージ

ERROR in ./src/js/page/index.js
Module parse failed: Unexpected token (78:6)
You may need an appropriate loader to handle this file type.
|   render: function () {
|     return (
|       <div>
|         Hello React!!
|       </div>

該当のソースコード

■gulpfile.js

/* ----------------------------------------------------------------------------------
node_modulesに格納されている各プラグインを読み込む
---------------------------------------------------------------------------------- */
var gulp          = require('../../node_modules/gulp');
var browserSync   = require('../../node_modules/browser-sync');
var watch         = require('../../node_modules/gulp-watch');
var sass          = require('../../node_modules/gulp-sass');
var runSequence   = require('../../node_modules/run-sequence');
var plumber       = require('../../node_modules/gulp-plumber');
var notify        = require('../../node_modules/gulp-notify');
var cache         = require('../../node_modules/gulp-cached');
var sourcemaps    = require('../../node_modules/gulp-sourcemaps');
var csso          = require('../../node_modules/gulp-csso');
var postcss       = require('../../node_modules/gulp-postcss');
var cssnext       = require('../../node_modules/postcss-cssnext');
var mqpacker      = require('../../node_modules/css-mqpacker');

//webpack設定
var webpack       = require('../../node_modules/webpack');
var webpackStream = require('../../node_modules/webpack-stream');

// webpack.config.jsの設定を読み込む
var webpackConfig = require('./webpack.config.js');


/* ----------------------------------------------------------------------------------
ファイルの変更を監視して、変更を即座にブラウザ反映
---------------------------------------------------------------------------------- */
gulp.task('browser-sync', function() {
	browserSync.init({
		// Webアプリケーションが動作しているアドレス(例ではIPアドレス)
		proxy: 'templates/' // プロキシを設定
	});
});
gulp.task('bs-reload', function() {
	browserSync.reload();
});


/* ----------------------------------------------------------------------------------
SASSをcssにコンパイル
---------------------------------------------------------------------------------- */
var AUTOPREFIXER_BROWSERS = [
  'last 2 version',
  'ie >= 10',
  'iOS >= 7',
  'Android >= 4.4'
];
gulp.task('sass', function() {
    var processors = [
      cssnext({
            browsers: AUTOPREFIXER_BROWSERS
        })
    ];
    return gulp.src(['src/sass/**/*.scss']).pipe(plumber({
    errorHandler: notify.onError('Error: <%= error.message %>')
    }))
    .pipe(sourcemaps.init())
    .pipe(sass())
    .pipe(csso())//min化
    .pipe(postcss(processors))//postcss化
    .pipe(postcss([mqpacker()]))//メディアクエリ一括化
    .pipe(sourcemaps.init({loadMaps: true}))
    .pipe(sourcemaps.write('./'))
    .pipe(gulp.dest('../public/css/'));
});


/* ----------------------------------------------------------------------------------
jsファイルの更新
---------------------------------------------------------------------------------- */
gulp.task('js',function() {
	return gulp.src('../public/js/**/*.js')
	.pipe(plumber())
	.pipe(cache('js-cache'))
	.pipe(gulp.dest( '../public/js/'))
	.pipe(browserSync.stream());
});
gulp.task('webpack', function() {
    return gulp.src('src/js/**/*.js').pipe(plumber({
        errorHandler: notify.onError('Error: <%= error.message %>')
    }))
    .pipe(webpackStream(webpackConfig, webpack))
    .pipe(gulp.dest('../public/js/'));
});


/* ----------------------------------------------------------------------------------
ファイルを並列・直列化
---------------------------------------------------------------------------------- */
gulp.task('build_scss', function(done) {
	runSequence('sass','bs-reload', done);
});
gulp.task('build_js', function (done) {
    runSequence('webpack','js','bs-reload', done);
});


/* ----------------------------------------------------------------------------------
ファイルの監視
---------------------------------------------------------------------------------- */
gulp.task('default',['browser-sync'],function() {
	watch(['src/sass/**/*.scss'], function(e) {
		gulp.start(['build_scss']);
	});

	watch(['src/html/**/*'], function(e) {
		gulp.start(['build_html'],'bs-reload');
	});

	watch(['src/js/**/*.js'], function(e) {
		gulp.start(['build_js','bs-reload']);
	});

	watch(['../public/images/**/*.+(jpg|gif|png|ico|svg)'], function(e) {
		gulp.start(['bs-reload']);
	});

	gulp.watch('../public/**/*.+(html|php)', ['bs-reload']);
});

■webpack.config.js

const path = require('path');
const UglifyJsPlugin = require('../../node_modules/uglifyjs-webpack-plugin');

var jsRootDir = './src/js/';
var webpack = require('../../node_modules/webpack');

var webpackConfig = {
    // インポートファイル（ここに新規ファイルを追加していく）
    entry: {
        main: jsRootDir + 'main.js', // 共通
        index: jsRootDir + 'page/index.js' // トップページ
    },
    // ビルド実行して実際に出力されるファイル
    output: {
        path: path.join(__dirname, 'dist'),
        publicPath: './public/js/',
        filename: "[name].js"
    },

    module: {
        loaders: [
            {
                test: /.(js|jsx)$/, // jsxも対象にする
                loader: 'babel-loader', // 使用するloader
                exclude: /node_modules/,
                include: [
                    path.resolve(__dirname, 'dist'),
                ],

                // babelと一緒に使うES2015とReactの指定
                query: {
                    presets: ["es2015", "react"],
                }
            }
        ]
    },

    externals: {
        jQuery: 'jQuery'
    },
    node: {
        setImmediate: false
    },
    plugins: [
        new webpack.ProvidePlugin({
            $: 'jquery',
            jQuery: 'jquery'
        }),
        new webpack.optimize.UglifyJsPlugin({
            compress: {
                dead_code: true,
                warnings: false
            },
            comments: false,
            mangle: false,
            sourceMap: true
        }),
        new webpack.HotModuleReplacementPlugin()
    ],
    devtool: 'source-map'
}
module.exports = webpackConfig;

■package.json

{
  "name": "template",
  "version": "0.0.0",
  "description": "template",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "babel-cli": "^6.26.0",
    "babel-loader": "^8.0.4",
    "babel-preset-env": "^1.7.0",
    "babel-preset-react": "^6.24.1",
    "browser-sync": "^2.18.2",
    "css-loader": "^1.0.0",
    "css-mqpacker": "^6.0.2",
    "gulp": "^3.9.1",
    "gulp-autoprefixer": "^3.1.1",
    "gulp-cached": "^1.1.1",
    "gulp-changed": "^1.3.2",
    "gulp-clean-css": "^3.7.0",
    "gulp-combine-media-queries": "^0.2.0",
    "gulp-compass": "^2.1.0",
    "gulp-concat": "^2.6.1",
    "gulp-connect-php": "0.0.8",
    "gulp-csscomb": "^3.0.8",
    "gulp-cssmin": "^0.1.7",
    "gulp-csso": "^3.0.1",
    "gulp-ejs": "^3.1.1",
    "gulp-gzip": "^1.4.1",
    "gulp-htmlhint": "^0.3.1",
    "gulp-imagemin": "^3.1.1",
    "gulp-notify": "^2.2.0",
    "gulp-plumber": "^1.1.0",
    "gulp-postcss": "^7.0.1",
    "gulp-rename": "^1.2.2",
    "gulp-sass": "^3.0.0",
    "gulp-sftp": "^0.1.5",
    "gulp-uglify": "^2.0.0",
    "gulp-util": "^3.0.8",
    "gulp-watch": "^4.3.11",
    "imagemin-pngquant": "^5.0.0",
    "jquery": "^3.3.1",
    "postcss-cssnext": "^3.1.0",
    "react": "^16.5.2",
    "react-dom": "^16.5.2",
    "rimraf": "^2.6.1",
    "run-sequence": "^1.2.2",
    "style-loader": "^0.23.0",
    "vinyl-ftp": "^0.5.0",
    "webpack": "^3.10.0",
    "webpack-stream": "^4.0.0"
  },
  "dependencies": {
    "animejs": "^2.2.0",
    "del": "^2.2.2",
    "imagemin-pngquant": "^5.0.0"
  }
}

■index.js

import React from 'react';
import ReactDOM from 'react-dom';

var HelloReact = React.createClass({
  render: function () {
    return (
      <div>
        Hello React!!
      </div>
    );
  }
});

ReactDOM.render(
  <HelloReact />,
  document.querySelector(".testtest")
);