title: React code not showing in browser
body: <p>I'm using Webpack to bundle some React code written in JSX format. I have everything up and running as far as compiling goes and it looks as though every thing is correct in the <code>bundle.js</code> output file. When I import it into an HTML file and try to display the React code it doesn't show up for some reason. I've made a regular javascript file and included it in the <code>main.js</code> so that it is also included in the Webpack output file <code>bundle.js</code> and this does show up in the browser. So when the <code>bundle.js</code> is used in my html file I just get the text "Hello, im located in a seperate file" and not the React elements.</p>
  
  <p><strong>React Code(main.js)</strong></p>
  
  <pre><code>require('./extra.js');
  
  var React = require('react');
  var ReactDOM = require('react-dom');
  
  ReactDOM.render(
      &lt;h1&gt;Hello, world!&lt;/h1&gt;,
      document.getElementById('example')
  );
  </code></pre>
  
  <p><strong>Regular JS File(extra.js)</strong></p>
  
  <pre><code>document.write("Hello, im located in a seperate file");
  </code></pre>
  
  <p><strong>Output file after running webpack(bundle.js)</strong></p>
  
  <pre><code>/******/ (function(modules) { // webpackBootstrap
  /******/    // The module cache
  /******/    var installedModules = {};
  
  /******/    // The require function
  /******/    function __webpack_require__(moduleId) {
  
  /******/        // Check if module is in cache
  /******/        if(installedModules[moduleId])
  /******/            return installedModules[moduleId].exports;
  
  /******/        // Create a new module (and put it into the cache)
  /******/        var module = installedModules[moduleId] = {
  /******/            exports: {},
  /******/            id: moduleId,
  /******/            loaded: false
  /******/        };
  
  /******/        // Execute the module function
  /******/        modules[moduleId].call(module.exports, module, module.exports, __webpack_require__);
  
  /******/        // Flag the module as loaded
  /******/        module.loaded = true;
  
  /******/        // Return the exports of the module
  /******/        return module.exports;
  /******/    }
  
  
  /******/    // expose the modules object (__webpack_modules__)
  /******/    __webpack_require__.m = modules;
  
  /******/    // expose the module cache
  /******/    __webpack_require__.c = installedModules;
  
  /******/    // __webpack_public_path__
  /******/    __webpack_require__.p = "";
  
  /******/    // Load entry module and return exports
  /******/    return __webpack_require__(0);
  /******/ })
  /************************************************************************/
  /******/ ([
  /* 0 */
  /***/ function(module, exports, __webpack_require__) {
  
      __webpack_require__(1);
  
      React.render(React.createElement(
          "h1",
          null,
          "hello world"
      ), document.getElementById("app"));
  
      var HelloMessage = React.createClass({
          displayName: "HelloMessage",
  
          render: function () {
              return React.createElement(
                  "div",
                  null,
                  "Hello ",
                  this.props.name
              );
          }
      });
      ReactDOM.render(React.createElement(HelloMessage, { name: "John" }), mountNode);
  
  /***/ },
  /* 1 */
  /***/ function(module, exports) {
  
      /**
       * Created by sf on 1/14/2016.
       */
  
      document.write("Hello, im located in a seperate file");
  
  /***/ }
  /******/ ]);
  </code></pre>
  
  <p><strong>HTML file im using the script in</strong></p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;
  &lt;head lang="en"&gt;
      &lt;meta charset="UTF-8"&gt;
      &lt;title&gt;&lt;/title&gt;
  &lt;/head&gt;
  &lt;body&gt;
  &lt;div id="example"&gt;&lt;/div&gt;
  
  &lt;script src="bundle.js" type="text/javascript"&gt;&lt;/script&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>