web-dev-qa-db-fra.com

UnCaught ReferenceError: React n'est pas défini

Salut, je sais que ce type de question a été posée plusieurs fois mais je n'ai pas pu obtenir la réponse.

J'essaie d'écrire un exemple React hello world. Je n'ai que deux fichiers, un app.jsx et un autre homepage.jsx. J'utilise webpack pour regrouper les fichiers.

Mais quand j'exécute le code, j'obtiens Uncaught ReferenceError: React is not defined

Mon homepage.jsx ressemble à ceci

"use strict";

var React = require('react');

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

module.exports = Home;

Mon app.js ressemble à ceci

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

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

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

Dans le navigateur, il lance Uncaught ReferenceError: React is not defined à la ligne 7, c'est-à-dire là où j'ai besoin d'une page d'accueil.

Mais lorsque j'ajoute var React = require ('react') dans app.jsx, cela fonctionne bien.

Je ne comprends pas ça. J'ai inclus réagir dans homepage.jsx où je l'utilise. Dans app.jsx, je n'ai besoin que de react-dom car je n'utilise pas React. Alors pourquoi il donne une erreur dans app.jsx.

Pls aide !!

reactjswebpackreact-dom
16
Aniket

Changez votre app.js En ceci

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

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

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

JSX est transformé en appels React.createElement(), donc React est requis dans la portée. Donc oui, vous utilisez React dans app.js. Get utilisé pour l'importer chaque fois que vous utilisez JSX ou que vous appelez directement React.*.

40
Andreyco

Vous pouvez l'avoir sans l'exiger dans votre code.

Ajouter à webpack.config.js :

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

Voir http://webpack.github.io/docs/shimming-modules.html#plugin-provideplugin

9
MiF