Webpack Babel React

package.json

{
  "name": "giccoo",
  "version": "1.0.0",
  "main": "main.js",
  "author": "Kelvin",
  "license": "MIT",
  "scripts": {
    "dev": "webpack-dev-server --devtool eval-source-map --colors --hot --inline --content-base ./dist",
    "build": "webpack --colors"
  },
  "dependencies": {
    "path": "^0.12.7",
    "react": "^16.0.0",
    "react-dom": "^16.0.0",
    "webpack": "^3.8.1"
  },
  "devDependencies": {
    "babel-core": "^6.26.0",
    "babel-loader": "^7.1.2",
    "babel-preset-es2015": "^6.24.1",
    "babel-preset-react": "^6.24.1",
    "html-webpack-plugin": "^2.30.1",
    "webpack-dev-server": "^2.9.4"
  }
}

Run code npm install

webpack.config.js

const path = require('path');
// const HtmlWebpackPlugin = require('html-webpack-plugin');

module.exports = {
  entry: ['./src/main.js'],
  output: {
    path: path.resolve('dist'),
    filename: '[name]-build.js'
  },
  module: {
    loaders: [
      { test: /\.js$/, loader: 'babel-loader', exclude: /node_modules/ },
      { test: /\.jsx$/, loader: 'babel-loader', exclude: /node_modules/ }
    ]
  },
  watch: true
}

main.js

import React from 'react';
import ReactDOM from 'react-dom';
import App from './components/App.jsx';


if (document.getElementById('root')) {
    ReactDOM.render(<App name="kelvin" />, document.getElementById('root'));
}

App.jsx

/*
    ./client/components/App.jsx
*/
import React from 'react';

const TEMP = "nice"
const MSUM = (i) => i + 1

export default class App extends React.Component {
    constructor(props) {
        super(props)
        console.log(`${TEMP} job!`,MSUM(5),props)
        this.props = props
    }
  render() {
    return(
     <div style={{textAlign: 'center'}}>
         <h1>Hello World {this.props.name}</h1>
     </div>
    );
  }
}

.babelrc

/* 
    ./.babelrc
*/  
{
    "presets":[
        "es2015", "react"
    ]
}

Run code npm run dev