title: require not defined error on bundled JS reactjs
body: <p>I'm new to Django and ReactJS, was trying to compile a simple JSX code to JS using this tutorial : <a href="http://geezhawk.github.io/2016/02/02/using-react-with-django-rest-framework.html" rel="nofollow">http://geezhawk.github.io/2016/02/02/using-react-with-django-rest-framework.html</a> 
  Didn't work, so I used <code>npm run dev</code> to compile, now it worked but giving error in browser console : Uncaught ReferenceError: react is not defined
  Here is my webpack.config.js</p>
  
  <pre><code>    var path = require('path');
  var webpack = require('webpack');
  var BundleTracker = require('webpack-bundle-tracker');
  var nodeExternals = require('webpack-node-externals');
  
  
  module.exports = {
      //the base directory (absolute path) for resolving the entry option
      context: __dirname,
      //the entry point we created earlier. Note that './' means
      //your current directory. You don't have to specify the extension  now,
      //because you will specify extensions later in the `resolve` section
      entry: './assets/js/index',
  
      output: {
          //where you want your compiled bundle to be stored
          path: path.resolve('./assets/bundles/'),
          //naming convention webpack should use for your files
          filename: '[name]-[hash].js',
      },
      target: 'node', // in order to ignore built-in modules like path, fs, etc.
      externals: {
      react: 'react'
  }, // in order to ignore all modules in node_modules folder
  
      plugins: [
          //tells webpack where to store data about your bundles.
          new BundleTracker({filename: './webpack-stats.json'}),
          //makes jQuery available in every module
          new webpack.ProvidePlugin({
              //React: "react",
              $: 'jquery',
              jQuery: 'jquery',
              'window.jQuery': 'jquery'
          })
      ],
  
      module: {
          loaders: [
              //a regexp that tells webpack use the following loaders on all
              //.js and .jsx files
              {test: /\.jsx?$/,
                  //we definitely don't want babel to transpile all the files in
                  //node_modules. That would take a long time.
                  /*exclude: /node_modules/,*/
                  //use the babel loader
                  loader: 'babel-loader',
                  query: {
                      //specify that we will be dealing with React code
                      presets: ['react']
                  }
              }
          ]
      },
  
      resolve: {
          //tells webpack where to look for modules
          modulesDirectories: ['node_modules'],
          //extensions that should be used to resolve modules
          extensions: ['', '.js', '.jsx']
       }
      }
  </code></pre>
  
  <p>And assets/bundles/index.js</p>
  
  <pre><code>    var React = require('react')
      var ReactDOM = require('react-dom')
      //snaha//
      var BooksList = React.createClass({
      loadBooksFromServer: function(){
          console.log(123454657);
          $.ajax({
              url: this.props.url,
              datatype: 'json',
              cache: false,
              success: function(data) {
                  this.setState({data: data});
              }.bind(this)
          })
      },
  
      getInitialState: function() {
          return {data: []};
      },
  
      componentDidMount: function() {
          this.loadBooksFromServer();
          setInterval(this.loadBooksFromServer,
                      this.props.pollInterval)
      },
      render: function() {
          if (this.state.data) {
              console.log('DATA!')
              var bookNodes = this.state.data.map(function(book){
                  return &lt;li&gt; {book.title} &lt;/li&gt;
              })
          }
          return (
              &lt;div&gt;
                  &lt;h1&gt;Hello React!&lt;/h1&gt;
                  &lt;ul&gt;
                      {bookNodes}
                  &lt;/ul&gt;
              &lt;/div&gt;
          )
        }
     })
  
       ReactDOM.render(&lt;BooksList url='/api/' pollInterval={1000} /&gt;,
      document.getElementById('container'))
  </code></pre>
  
  <p>And templates/body.html</p>
  
  <pre><code>    {% load render_bundle from webpack_loader %}
      &lt;!doctype html&gt;
      &lt;html&gt;
      &lt;head&gt;
       &lt;script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.14.7/react-with-addons.js"&gt;&lt;/script&gt;
     &lt;script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.14.7/react-dom.js"&gt;&lt;/script&gt;
       &lt;meta charset="UTF-8"&gt;
       &lt;title&gt;Hello React
          {% block content %}
              {{ id }}
          {% endblock %}
       &lt;/title&gt;
        &lt;/head&gt;
        &lt;body&gt;
       &lt;div id="container"&gt;&lt;/div&gt;
        {% render_bundle 'main' %}
        &lt;/body&gt;
        &lt;/html&gt;
  </code></pre>
  
  <p>Anything I'm missing? <a href="http://i.stack.imgur.com/D2E2u.png" rel="nofollow">here is my Django project structure</a></p>