リアクトは全世界的に利用可能です。

Question

私はReact（@ 13.3）でbabelとwebpackで遊んでいます。

私はこのように定義されたのコンポーネントがあります。

import BaseComponent from './BaseComponent'; 

export default class SomeComponent extends BaseComponent { 
    render() { 
     return (
      <div> 
        <img src="http://placekitten.com/g/900/600"/> 
      </div> 
     ); 
    } 
} 

をしかし、私は次のエラーを取得：私は、エラーを理解

Uncaught ReferenceError: React is not defined

を：JSXビットはReact.createElement(...)しかしReact ISNにコンパイルされます」インポートされていないので、現在のスコープ内にありません。

私の質問は この問題を回避するにはどうすればよいですか？どういうわけかwebpackでReactをグローバルに公開しなければなりませんか？使用

---

ソリューション：

私はsalehenラーマン提案@続きます。私webpack.config.jsで

：私も私のテストを修正するために必要なので、私は、ファイルhelper.jsにこれを追加

module: { 
    loaders: [{ 
     test: /\.js$/, 
     exclude: /node_modules/, 
     loader: 'react-hot!babel?plugins[]=react-require' 
    }, { 
     test: /\.css$/, 
     loader: 'style!css!autoprefixer?browsers=last 2 versions' 
    }] 
}, 

：私のテストが、その後発売され

require('babel-core/register')({ 
    ignore: /node_modules/, 
    plugins: ['react-require'], 
    extensions: ['.js'] 
}); 

次のコマンドで：

mocha --require ./test/helper.js 'test/**/*.js' 

Answer 1

My questions is : What's the clean way to work around this issue ? Do I have to somehow expose React globally with webpack ?

に似た設定を持っているあなたのWebPACKのバベルの設定を修正し、その後、プロジェクトにbabel-plugin-react-requireを追加し、 Reactを手動でインポートします。心の中で

React.render(
    <div>Yippee! No <code>import React</code>!</div>, 
    document.body // <-- Only for demonstration! Do not use document.body! 
); 

ベアしかし、babel-plugin-react-requireは特定ファイル、特定のファイルのためのでJSXタグの存在下で輸入のみ反応し、自動的に含めるようにコードを変換します。 JSXを使用しますが、ニーズが何らかの理由で反応しない他のすべてのファイルの場合は、手動で反応させ、インポートする必要があります。

Answer 2

あなたのノードmodulesディレクトリに反応している場合は、を追加することができますをファイルの先頭に追加します。あなたが設定の更新を適用したらあなたはせずにコンポーネントを反応させるの初期化することができ、

loaders: [ 
    { 
    test: /.js$/, 
    exclude: /node_modules/, 
    loader: 'babel-loader', 
    query: { 
     stage: 0, 
     optional: ['runtime'], 
     plugins: [ 
     'react-require' // <-- THIS IS YOUR AMENDMENT 
     ] 
    }, 
    } 
] 

今：

Answer 3

あなたはWebPACKののProvidePluginを使用することができます。 、使用し、以下を含むためにあなたのWebPACKの設定でプラグインのセクションを更新するには：

plugins: [ 
    new webpack.ProvidePlugin({ 
    'React': 'react' 
    }) 
] 

これは、しかし、