joshua-williams/index.html

## index.html
<!DOCTYPE html>
<html lang="en">
  <head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

    <!-- Bootstrap CSS -->
    <script type="text/javascript" src="/assets/styles.bundle.js"></script>
  </head>
  <body>
      <div id="react-container"></div>
      <!-- Optional JavaScript -->
      <!-- jQuery first, then Popper.js, then Bootstrap JS -->
      <script type="text/javascript" src="/assets/vendor.bundle.js"></script>
      <link href="https://fonts.googleapis.com/css?family=Open+Sans" rel="stylesheet">
      <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" />
      <script type="text/javascript" src="/assets/app.bundle.js"></script>
    </footer>
  </body>
</html>

## index.js
import React from 'react';
import ReactDom from 'react-dom';

class Welcome extends React.Component {
  render() {
   return <div>
     <h1>Welcome, {user}, to Modrn React Software</h1>
     </div>
  }
}
const mainElement = document.querySelector('#react-container');
ReactDom.render(<Welcome user="Joshua"/>, mainElement);

## package.json
{
  "name": "react-app",
  "version": "1.0.0",
  "description": "Modern React Software",
  "main": "index.js",
  "scripts": {
    "start": "webpack webpack-dev-server",
    "server": "webpack-dev-server",
    "webpack": "webpack"
  },
  "author": "Joshua D. Williams",
  "license": "ISC",
  "homepage": "https://whocancode.com",
  "dependencies": {
    "bootstrap": "^4.0.0-alpha.6",
    "font-awesome": "^4.7.0",
    "jquery": "^3.2.1",
    "popper.js": "^1.12.3",
    "react": "^15.6.1",
    "react-dom": "^15.6.1",
    "react-router": "^4.2.0",
    "tether": "^1.4.0"
  },
  "devDependencies": {
    "babel-core": "^6.26.0",
    "babel-loader": "^7.1.2",
    "babel-preset-env": "^1.6.0",
    "babel-preset-react": "^6.24.1",
    "css-loader": "^0.28.5",
    "node-sass": "^4.5.3",
    "sass-loader": "^6.0.6",
    "style-loader": "^0.18.2",
    "webpack": "^3.5.5",
    "webpack-dev-server": "^2.7.1"
  }
}

## webpack.config.js
const webpack = require('webpack');
const path = require('path');
const buildPath = path.join(__dirname, 'dist');

module.exports = {
    entry: {
        app: './src/index',
        styles: path.join(__dirname, 'scss/app.scss'),
        vendor: path.join(__dirname, 'src/vendor.js')
    },
    output: {
        path: path.join(buildPath, 'assets'),
        filename: '[name].bundle.js',
        publicPath: '/assets'
    },
    devServer: {
        inline: true,
        port: 3000,
        contentBase: buildPath,
        historyApiFallback: true
    },
    module: {
        rules: [
          {
            test: /\.jsx?$/,
            exclude: /(node_modules)/,
            //include: /(src\/app\.js)/,
            use: [
              {
                loader: 'babel-loader',
                options: {
                  presets: ['env','react']
                }
              },

            ]
          }, {
              test: /\.scss$/,
              use: [
                  {loader: 'style-loader'},
                  {loader: 'css-loader'},
                  {
                      loader: 'sass-loader',
                      options: {
                          sourceMap: true,
                          includePaths: [
                              "scss",
                              "node_modules/bootstrap/scss"
                          ]
                      }
                  }
              ]
          }
        ]
    },
    plugins: [
        new webpack.ProvidePlugin({
          $: 'jquery',
          jQuery: 'jquery',
          'window.jQuery': 'jquery',
          Tether: 'tether',
          react: 'react'

        })
    ]
}
	<!DOCTYPE html>
	<html lang="en">
	<head>
	<!-- Required meta tags -->
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

	<!-- Bootstrap CSS -->
	<script type="text/javascript" src="/assets/styles.bundle.js"></script>
	</head>
	<body>
	<div id="react-container"></div>
	<!-- Optional JavaScript -->
	<!-- jQuery first, then Popper.js, then Bootstrap JS -->
	<script type="text/javascript" src="/assets/vendor.bundle.js"></script>
	<link href="https://fonts.googleapis.com/css?family=Open+Sans" rel="stylesheet">
	<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" />
	<script type="text/javascript" src="/assets/app.bundle.js"></script>
	</footer>
	</body>
	</html>
	import React from 'react';
	import ReactDom from 'react-dom';

	class Welcome extends React.Component {
	render() {
	return <div>
	<h1>Welcome, {user}, to Modrn React Software</h1>
	</div>
	}
	}
	const mainElement = document.querySelector('#react-container');
	ReactDom.render(<Welcome user="Joshua"/>, mainElement);
	{
	"name": "react-app",
	"version": "1.0.0",
	"description": "Modern React Software",
	"main": "index.js",
	"scripts": {
	"start": "webpack webpack-dev-server",
	"server": "webpack-dev-server",
	"webpack": "webpack"
	},
	"author": "Joshua D. Williams",
	"license": "ISC",
	"homepage": "https://whocancode.com",
	"dependencies": {
	"bootstrap": "^4.0.0-alpha.6",
	"font-awesome": "^4.7.0",
	"jquery": "^3.2.1",
	"popper.js": "^1.12.3",
	"react": "^15.6.1",
	"react-dom": "^15.6.1",
	"react-router": "^4.2.0",
	"tether": "^1.4.0"
	},
	"devDependencies": {
	"babel-core": "^6.26.0",
	"babel-loader": "^7.1.2",
	"babel-preset-env": "^1.6.0",
	"babel-preset-react": "^6.24.1",
	"css-loader": "^0.28.5",
	"node-sass": "^4.5.3",
	"sass-loader": "^6.0.6",
	"style-loader": "^0.18.2",
	"webpack": "^3.5.5",
	"webpack-dev-server": "^2.7.1"
	}
	}
	const webpack = require('webpack');
	const path = require('path');
	const buildPath = path.join(__dirname, 'dist');

	module.exports = {
	entry: {
	app: './src/index',
	styles: path.join(__dirname, 'scss/app.scss'),
	vendor: path.join(__dirname, 'src/vendor.js')
	},
	output: {
	path: path.join(buildPath, 'assets'),
	filename: '[name].bundle.js',
	publicPath: '/assets'
	},
	devServer: {
	inline: true,
	port: 3000,
	contentBase: buildPath,
	historyApiFallback: true
	},
	module: {
	rules: [
	{
	test: /\.jsx?$/,
	exclude: /(node_modules)/,
	//include: /(src\/app\.js)/,
	use: [
	{
	loader: 'babel-loader',
	options: {
	presets: ['env','react']
	}
	},

	]
	}, {
	test: /\.scss$/,
	use: [
	{loader: 'style-loader'},
	{loader: 'css-loader'},
	{
	loader: 'sass-loader',
	options: {
	sourceMap: true,
	includePaths: [
	"scss",
	"node_modules/bootstrap/scss"
	]
	}
	}
	]
	}
	]
	},
	plugins: [
	new webpack.ProvidePlugin({
	$: 'jquery',
	jQuery: 'jquery',
	'window.jQuery': 'jquery',
	Tether: 'tether',
	react: 'react'

	})
	]
	}