TypescriptとWebPackを使用して反応コンポーネントをレンダリングする際のエラー

Question

最も簡単な反応コンポーネントを作成しようとしています。こんにちはページをレンダリングするだけですが、私のコンソールにはエラーが表示されています。コンパイラとしてtypescriptを使用しています。私は私のプロジェクトのための設定を取得するには、このガイドに従うことをしようとしています：https://github.com/Microsoft/TypeScript-React-Starter

エラーここ

Uncaught ReferenceError: React is not defined 
    at Object.<anonymous> (external "React":1) 
    at __webpack_require__ (bootstrap 2fd03459d628585593a4:19) 
    at Object.module.exports (index.tsx:1) 
    at __webpack_require__ (bootstrap 2fd03459d628585593a4:19) 
    at Object.<anonymous> (bundle.js:3669) 
    at __webpack_require__ (bootstrap 2fd03459d628585593a4:19) 
    at module.exports.ctor.super_ (bootstrap 2fd03459d628585593a4:62) 
    at bootstrap 2fd03459d628585593a4:62 

は私のWebPACKの設定である：ここで

module.exports = { 
    entry: "./src/index.tsx", 
    output: { 
     filename: "bundle.js", 
     path: __dirname + "/dist", 
     publicPath: "/dist/" 
    }, 

    // Enable sourcemaps for debugging webpack's output. 
    devtool: "source-map", 

    devServer: { 
     headers: { 
      'Access-Control-Allow-Origin': '*' 
     }, 
     port: 8282 
    }, 

    resolve: { 
     // Add '.ts' and '.tsx' as resolvable extensions. 
     extensions: [".ts", ".tsx", ".js", ".json"] 
    }, 

    module: { 
     rules: [ 
      // All files with a '.ts' or '.tsx' extension will be handled by 'awesome-typescript-loader'. 
      { test: /\.tsx?$/, loader: "awesome-typescript-loader" }, 

      // All output '.js' files will have any sourcemaps re-processed by 'source-map-loader'. 
      { enforce: "pre", test: /\.js$/, loader: "source-map-loader" } 
     ] 
    }, 

    // When importing a module whose path matches one of the following, just 
    // assume a corresponding global variable exists and use that instead. 
    // This is important because it allows us to avoid bundling all of our 
    // dependencies, which allows browsers to cache those libraries between builds. 
    externals: { 
     "react": "React", 
     "react-dom": "ReactDOM" 
    }, 
}; 

myindex.tsxある

import * as React from "react"; 
import * as ReactDOM from "react-dom"; 

import { Hello } from "./components/Hello"; 

ReactDOM.render(
    <Hello compiler="TypeScript" framework="React" />, 
    document.getElementById("example") 
); 

ここに私のこんにちはコンポーネント

import * as React from "react"; 

export interface HelloProps { compiler: string; framework: string; } 

// 'HelloProps' describes the shape of props. 
// State is never set so we use the 'undefined' type. 
export class Hello extends React.Component<HelloProps, undefined> { 
    componentWillMount() { 
     if ('pluginLoaded' in window) { 
      (window as any).pluginLoaded('hello', function (port: any, context: any) { 
       // Future work should interact with the message channel here 
      }); 
     } 
    } 

    render() { 
     return <h1>Hello from {this.props.compiler} and {this.props.framework}!</h1>; 
    } 
} 

Answer 1

reactとreact-domをExternalsと定義しました。 webpack configのexternalオプションのコメントに書いたように、対応するグローバル変数が存在することが予想されます。

ReactのバージョンをHTMLに含める必要があります。あなたのHTMLに以下のスクリプトを含めることで、CDNからReactを使用することができます。

<script crossorigin src="https://unpkg.com/react@15/dist/react.js"></script> 
<script crossorigin src="https://unpkg.com/react-dom@15/dist/react-dom.js"></script> 

これはReactの開発版であり、本番環境で使用する予定がある場合は、縮小版を使用する必要があります。詳細はReact - Using a CDNを参照してください。