Uncaught ReferenceError: React nie jest zdefiniowany

Próbuję sprawić, by ReactJS działał z szynami, korzystając z tego samouczka. Otrzymuję ten błąd:

Uncaught ReferenceError: React is not defined

Ale mogę uzyskać dostęp do obiektu React w konsoli przeglądarki. Dodałem również public / dist / turbo-respons.min.js, jak opisano tutaj, a także dodałem wiersz w application.js, jak opisano w tej odpowiedzi, na brak szczęścia. Dodatkowo podaje błąd:
//= require components
var React = require('react')
Uncaught ReferenceError: require is not defined

Czy ktoś może mi zasugerować, jak rozwiązać ten problem?

[EDYCJA 1]
Kod źródłowy w celach informacyjnych:
to jest mój comments.js.jsxplik:

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

A to jest moje index.html.erb:

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

Udało mi się odtworzyć ten błąd, gdy korzystałem z pakietu internetowego do zbudowania mojego javascript z następującym fragmentem w moim webpack.config.json:

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

Powyższa konfiguracja mówi webpackowi, aby nie rozwiązywał problemu require('react')przez ładowanie modułu npm, ale zamiast tego oczekiwał zmiennej globalnej (tj. Na windowobiekcie) o nazwie React. Rozwiązaniem jest albo usunięcie tego elementu konfiguracji (aby React był dołączony do twojego javascript), albo załadowanie frameworka Reacta zewnętrznie przed wykonaniem tego pliku (tak, że window.Reactistnieje).

Otrzymałem ten błąd, ponieważ używałem

import ReactDOM from 'react-dom'

bez importu zareaguj, gdy zmieniłem to poniżej:

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

Błąd został rozwiązany :)

Możliwe przyczyny: 1. nie załadowałeś React.JS na swoją stronę, 2. załadowałeś go po powyższym skrypcie na swojej stronie. Rozwiązaniem jest załadowanie pliku JS przed pokazanym powyżej skryptem.

PS

Możliwe rozwiązania.

1. Jeśli wspomnisz reactw sekcji zewnętrznych w konfiguracji webpacka, to musisz załadować pliki reagujące js bezpośrednio do swojego HTML przedbundle.js
2. Upewnij się, że masz linię import React from 'react';

Jeśli używasz Webpacka, możesz załadować Reacta w razie potrzeby bez konieczności jawnego wpisywania requiretego w kodzie.

Dodaj do webpack.config.js :

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

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

Spróbuj dodać:

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

przed render()funkcją.

Czasami zapobiega to zwracaniu się wyskakujących okienek:

React nie jest zdefiniowany

Dodanie Reactdo okna rozwiąże te problemy.

Dodawanie do Santosha:

Możesz załadować Reacta przez

import React from 'react'

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

To też może zadziałać!

Otrzymałem ten błąd, ponieważ w moim kodzie błędnie wpisałem definicję komponentu małymi literami react.createClasszamiast wielkimi literami React.createClass.

Miałem ten sam problem. Rozwiązałem to importując Reacti ReactDOMpolubiłem w następujący sposób:

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

Wyświetlany błąd

po tym imporcie zareaguje

Wreszcie zaimportuj reag-dom

jeśli błąd reaguje nie jest zdefiniowany, dodaj ==>import React from 'react';

jeśli błąd to responseDOM nie jest zdefiniowany, dodaj ==>import ReactDOM from 'react-dom';

Jeśli używasz maszynopis, upewnij się, że tsconfig.jsonma "jsx": "react"zasięgu "compilerOptions".