title: Encountered error “ReferenceError: $ is not defined” using react-materialize
body: <p>I'm relatively new to React/Webpack and I want to apply Materialize CSS, but I am getting error about not recognizing jQuery in my code. I do not know where to begin.</p>
  
  <p>I have a simple React Component as so:</p>
  
  <p><strong>src/component/header</strong></p>
  
  <pre><code>import React, { Component } from 'react';
  import { Navbar, NavItem } from 'react-materialize';
  export default class Header extends Component {
    render() {
      return (
        &lt;Navbar brand='logo' right&gt;
          &lt;NavItem href='get-started.html'&gt;Getting started&lt;/NavItem&gt;
          &lt;NavItem href='components.html'&gt;Components&lt;/NavItem&gt;
        &lt;/Navbar&gt;
      );
    }
  }
  </code></pre>
  
  <p><strong>package.json</strong></p>
  
  <pre><code>{
    "name": "redux-simple-starter",
    "version": "1.0.0",
    "description": "Simple starter package for Redux with React and Babel support",
    "main": "index.js",
    "repository": "git@github.com:StephenGrider/ReduxSimpleStarter.git",
    "scripts": {
      "start": "node ./node_modules/webpack-dev-server/bin/webpack-dev-server.js",
      "test": "mocha --compilers js:babel-core/register --require ./test/test_helper.js --recursive ./test",
      "test:watch": "npm run test -- --watch"
    },
    "author": "",
    "license": "ISC",
    "devDependencies": {
      "babel-core": "^6.2.1",
      "babel-loader": "^6.2.0",
      "babel-preset-es2015": "^6.1.18",
      "babel-preset-react": "^6.1.18",
      "chai": "^3.5.0",
      "chai-jquery": "^2.0.0",
      "jquery": "^2.2.1",
      "jsdom": "^8.1.0",
      "mocha": "^2.4.5",
      "node-sass": "^3.8.0",
      "react-addons-test-utils": "^15.3.1",
      "webpack": "^1.13.2",
      "webpack-dev-server": "^1.14.0"
    },
    "dependencies": {
      "babel-preset-stage-1": "^6.1.18",
      "css-loader": "^0.24.0",
      "jquery": "^2.2.4",
      "lodash": "^3.10.1",
      "materialize-css": "^0.97.7",
      "node-sass": "^3.8.0",
      "react": "^15.3.1",
      "react-bootstrap": "^0.30.3",
      "react-dom": "^15.3.1 ",
      "react-materialize": "^0.15.2",
      "react-redux": "^4.0.0",
      "react-router": "^2.0.1",
      "redux": "^3.0.4",
      "sass-loader": "^4.0.0",
      "shortid": "^2.2.6",
      "style-loader": "^0.13.1"
    }
  }
  </code></pre>
  
  <p><strong>webpack.config.js</strong></p>
  
  <pre><code>var path = require('path');
  module.exports = {
    entry: [
      './src/index.js'
    ],
    output: {
      path: __dirname,
      publicPath: '/',
      filename: 'bundle.js'
    },
    module: {
      loaders: [{
        exclude: /node_modules/,
        loader: 'babel',
        query: {
          presets: ['react', 'es2015', 'stage-1']
        }
      },{
        test: /\.s?css$/,
        loaders: ['style','css','sass'],
        include: path.join(__dirname, 'src')
      }]
    },
    resolve: {
      extensions: ['', '.js', '.jsx'],
      alias: {
      'jquery': path.join(__dirname, 'node_modules/jquery/dist/jquery'),
      }
    },
    devServer: {
      historyApiFallback: true,
      contentBase: './'
    }
  };
  </code></pre>
  
  <p>Error message:</p>
  
  <pre><code>Uncaught ReferenceError: $ is not defined
  </code></pre>
  
  <p><strong>index.html</strong></p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;
    &lt;head&gt;
      &lt;link rel="stylesheet" href="http://fonts.googleapis.com/icon?family=Material+Icons"&gt;
      &lt;link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.6/css/materialize.min.css"&gt;
    &lt;/head&gt;
    &lt;body&gt;
      &lt;div id="fcc"&gt;
        &lt;div class="container"&gt;&lt;/div&gt;
      &lt;/div&gt;
    &lt;/body&gt;
    &lt;script src="/bundle.js"&gt;&lt;/script&gt;
    &lt;script src="https://code.jquery.com/jquery-2.1.1.min.js"&gt;&lt;/script&gt;
    &lt;script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.6/js/materialize.min.js"&gt;&lt;/script&gt;
  &lt;/html&gt;
  </code></pre>