25

こんにちは、この種の質問が何度も寄せられていることは知っていますが、答えが得られませんでした。

React hello world の例を書こうとしています。app.jsxとhomepage.jsxの2つのファイルしかありません。ファイルをバンドルするためにwebpackを使用しています。

しかし、コードを実行すると、Uncaught ReferenceError: React is not defined

私のホームページ.jsxは次のようになります

"use strict";

var React = require('react');

var Home = React.createClass({
    render : function() {
        return (
            <div className="jumbotron">                
                <h1> Hello World</h1> 
            </div>
        );
    }
});

module.exports = Home;

私のapp.jsは次のようになります

var ReactDOM = require('react-dom');

var Home = require('./components/homePage');

ReactDOM.render(
  <Home/>,
  document.getElementById('app')
);

Uncaught ReferenceError: React is not definedブラウザでは、7行目、つまりホームページが必要な場所にスローされます。

しかし、 app.jsx に var React = require('react') を追加すると、正常に動作します。

私はこれを理解していません。私はそれを利用しているhomepage.jsxにreactを含めました。app.jsx では、React を使用しないため、react-dom のみが必要です。次に、app.jsx でエラーが発生する理由。

助けてください!!

4

2 に答える 2

42

app.jsあなたをこれに変えてください

var React = require('react');
var ReactDOM = require('react-dom');

var Home = require('./components/homePage');

ReactDOM.render(
    <Home/>,
    document.getElementById('app')
);

JSX は呼び出しに変換されるReact.createElement()ため、スコープに React が必要です。そうです、あなたはで使用Reactしていapp.jsます。React.*JSX または直接呼び出しを使用するときはいつでも、それをインポートすることに慣れてください。

于 2016-02-11T15:02:24.903 に答える