title: React.createElement throws Component not defined
body: <p>I'm currently playing around with <code>ReactJS</code> using <code>TypeScript</code> as the underlying language wher I define my components.</p>
  
  <p>I saw on many sites, that it is possible to render such components within a page (in my case <code>cshtml</code>). Especially <a href="https://channel9.msdn.com/Series/aspnetmonsters/ASPNET-Monsters-94-React-with-Server-Side-Rendering" rel="nofollow noreferrer">here</a> which I tried to accomplish.
  To do so there should be something like:</p>
  
  <pre><code>&lt;!-- ... --&gt;
  &lt;body&gt;
      &lt;div id="myTargetId"&gt;&lt;/div&gt;
  &lt;/body&gt;
  &lt;!-- ... --&gt;
  
  &lt;script src="@(Url.Content("~/Scripts/React/dist/commons.js"))"&gt;&lt;/script&gt;
  &lt;script src="@(Url.Content("~/Scripts/React/dist/MyComponent.js"))"&gt;&lt;/script&gt;
  &lt;script&gt;
      ReactDOM.render(React.createElement(MyComponent, {}), document.getElementById("targetId"));
  &lt;/script&gt;
  </code></pre>
  
  <p>Currently I get the following error:</p>
  
  <blockquote>
    <p>Uncaught ReferenceError: MyComponent is not defined</p>
  </blockquote>
  
  <p>This is what my <code>MyComponent.tsx</code> looks like:</p>
  
  <pre><code>import * as React from "react";
  
  export interface IMyComponentProps { }
  export interface IMyComponentState { }
  
  export class MyComponent extends React.Component&lt;IMyComponentProps, IMyComponentState&gt; {
      render(): JSX.Element {
          return (
              &lt;p&gt;This comes from ReactJs&lt;/p&gt;
          );
      }
  }
  </code></pre>
  
  <p>To pack this all together I am using <code>webpack</code> with the following <code>webpack.config.js</code> (simplified):</p>
  
  <pre><code>const webpack = require("webpack");
  module.exports = {
      entry: {
          MyComponent: "./Scripts/React/Modules/MyComponent.tsx"
      },
      output: {
          path: path.join(__dirname, "./Scripts/React/dist/"),
          filename: "[name].js"
      },
  
      externals: {
          "react": "React",
          "react-dom": "ReactDOM"
      }
  };
  </code></pre>
  
  <p>And, finally, this is the emitted <code>JavaScript</code>:</p>
  
  <pre><code>webpackJsonp([0],[
  /* 0 */
  /***/ (function(module, exports, __webpack_require__) {
  
  "use strict";
  
  Object.defineProperty(exports, "__esModule", { value: true });
  const React = __webpack_require__(1);
  class MyComponent extends React.Component {
      render() {
          return (React.createElement("p", null, "This comes from ReactJs"));
      }
  }
  exports.MyComponent = MyComponent;
  
  
  /***/ }),
  /* 1 */
  /***/ (function(module, exports) {
  
  module.exports = React;
  
  /***/ })
  ],[0]);
  //# sourceMappingURL=MyComponent.js.map
  </code></pre>
  
  <p>What am I missing here?</p>