Nicht erfasster Referenzfehler: Reaktion ist nicht definiert

Mit diesem Tutorial versuche ich, ReactJS mit Schienen zum Laufen zu bringen . Ich erhalte diesen Fehler:

Uncaught ReferenceError: React is not defined

Aber ich kann auf das React-Objekt in der Browserkonsole zugreifen. Ich habe auch public / dist / turbo-react.min.js hinzugefügt, wie hier beschrieben , und auch Zeile in application.js hinzugefügt , wie in dieser Antwort beschrieben , ohne Erfolg. Zusätzlich gibt der Fehler:
//= require components
var React = require('react')
Uncaught ReferenceError: require is not defined

Kann mir jemand vorschlagen, wie ich das lösen kann?

[EDIT 1]
Quellcode als Referenz:
Dies ist meine comments.js.jsxDatei:

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);

Und das ist mein index.html.erb:

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

Ich konnte diesen Fehler reproduzieren, als ich Webpack verwendete, um mein Javascript mit dem folgenden Block in meinem zu erstellen webpack.config.json:

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

Diese obige Konfiguration weist das Webpack an, nicht require('react')durch Laden eines npm-Moduls aufzulösen , sondern eine windowaufgerufene globale Variable (dh für das Objekt) zu erwarten React. Die Lösung besteht darin, entweder diese Konfiguration zu entfernen (damit React mit Ihrem Javascript gebündelt wird) oder das React-Framework extern zu laden, bevor diese Datei ausgeführt wird (sofern window.Reactvorhanden).

Ich habe diesen Fehler erhalten, weil ich verwendet habe

import ReactDOM from 'react-dom'

ohne zu importieren reagieren, sobald ich es unten geändert habe:

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

Der Fehler wurde behoben :)

Mögliche Gründe sind: 1. Sie haben React.JS nicht auf Ihre Seite geladen, 2. Sie haben es nach dem obigen Skript auf Ihre Seite geladen. Die Lösung besteht darin, die JS-Datei vor dem oben gezeigten Skript zu laden.

PS

Mögliche Lösungen.

1. Wenn Sie reactim Abschnitt "Extern" in der Webpack-Konfiguration erwähnen, müssen Sie die reaktions-js-Dateien vorher direkt in Ihr HTML ladenbundle.js
2. Stellen Sie sicher, dass Sie die Leitung haben import React from 'react';

Wenn Sie Webpack verwenden, können Sie React bei Bedarf laden lassen, ohne es explizit requirein Ihren Code aufnehmen zu müssen.

Zu webpack.config.js hinzufügen :

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

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

Versuchen Sie hinzuzufügen:

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

vor der render()Funktion.

Dies verhindert manchmal, dass ein Fehler in der Popup-Datei angezeigt wird:

Reaktion ist nicht definiert

Durch Hinzufügen Reactzum Fenster werden diese Probleme gelöst.

Hinzufügen zu Santosh:

Sie können React by laden

import React from 'react'

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

Das kann auch funktionieren!

Ich habe diesen Fehler erhalten, weil ich in meinem Code eine Komponentendefinition mit Kleinbuchstaben react.createClassanstelle von Großbuchstaben falsch geschrieben habe React.createClass.

Ich stand vor dem gleichen Problem. Ich habe es durch Importieren gelöst Reactund ReactDOMwie folgt:

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

Der angezeigte Fehler

Nach diesem Import reagieren

Zum Schluss React-Dom importieren

Wenn der Fehler "Reagieren" nicht definiert ist, fügen Sie bitte ==> hinzuimport React from 'react';

Wenn der Fehler "reactDOM" nicht definiert ist, fügen Sie bitte ==> hinzuimport ReactDOM from 'react-dom';

Wenn Sie mit Typoskript, stellen Sie sicher , dass Sie tsconfig.jsonhat "jsx": "react"innerhalb "compilerOptions".