Uncaught ReferenceError: React n'est pas défini

J'essaie de faire fonctionner ReactJS avec des rails en utilisant ce tutoriel. J'obtiens cette erreur:

Uncaught ReferenceError: React is not defined

Mais je peux accéder à l'objet React dans la console du navigateur.J'ai également ajouté public / dist / turbo-react.min.js comme décrit ici et également ajouté une ligne dans application.js comme décrit dans cette réponse à pas de chance. De plus, donne l'erreur:
//= require components
var React = require('react')
Uncaught ReferenceError: require is not defined

Quelqu'un peut-il me suggérer comment résoudre ce problème?

[EDIT 1]
Code source pour référence:
Ceci est mon comments.js.jsxfichier:

var Comment = React.createClass({
  render: function () {
    return (
      <div className="comment">
        <h2 className="commentAuthor">
          {this.props.author}
        </h2>
          {this.props.comment}
      </div>
      );
  }
});

var ready = function () {
  React.renderComponent(
    <Comment author="Richard" comment="This is a comment "/>,
    document.getElementById('comments')
  );
};

$(document).ready(ready);

Et voici mon index.html.erb:

<div id="comments"></div>

J'ai pu reproduire cette erreur lorsque j'utilisais webpack pour créer mon javascript avec le morceau suivant dans mon webpack.config.json:

externals: {
    'react': 'React'
},

Cette configuration ci-dessus indique à webpack de ne pas résoudre require('react')en chargeant un module npm, mais plutôt d'attendre une variable globale (c'est-à-dire sur l' windowobjet) appelée React. La solution est soit de supprimer cette partie de la configuration (donc React sera fourni avec votre javascript), soit de charger le framework React en externe avant que ce fichier ne soit exécuté (afin qu'il window.Reactexiste).

J'ai eu cette erreur parce que j'utilisais

import ReactDOM from 'react-dom'

sans importer de réagir, une fois que je l'ai changé en ci-dessous:

import React from 'react';
import ReactDOM from 'react-dom';

L'erreur a été résolue :)

Les raisons possibles sont 1. vous n'avez pas chargé React.JS dans votre page, 2. vous l'avez chargé après le script ci-dessus dans votre page. La solution consiste à charger le fichier JS avant le script ci-dessus.

PS

Solutions possibles.

1. Si vous mentionnez reactdans la section externals de la configuration du webpack, vous devez charger les fichiers react js directement dans votre html avantbundle.js
2. Assurez-vous d'avoir la ligne import React from 'react';

Si vous utilisez Webpack, vous pouvez le charger de React en cas de besoin sans avoir à le faire explicitement requiredans votre code.

Ajoutez à webpack.config.js :

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

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

Essayez d'ajouter:

import React from 'react'
import { render } from 'react-dom'
window.React = React

avant la render()fonction.

Cela empêche parfois une erreur de retour de pop-up:

React n'est pas défini

L'ajout Reactà la fenêtre résoudra ces problèmes.

Ajout à Santosh:

Vous pouvez charger React par

import React from 'react'

import React, { Component, PropTypes } from 'react';

Cela peut également fonctionner!

J'ai eu cette erreur parce que dans mon code, j'ai mal orthographié une définition de composant avec des minuscules react.createClassau lieu de majuscules React.createClass.

J'étais confronté au même problème. Je l'ai résolu en important Reactet ReactDOMcomme suit:

import React from 'react';
import ReactDOM from 'react-dom';

L'erreur affichée

après cette importation, réagissez

Enfin importer react-dom

si l'erreur est la réaction n'est pas définie, veuillez ajouter ==>import React from 'react';

si l'erreur est reactDOM n'est pas défini, veuillez ajouter ==>import ReactDOM from 'react-dom';

Si vous utilisez tapuscrit, assurez - vous que votre tsconfig.jsona à l' "jsx": "react"intérieur "compilerOptions".