Uncaught ReferenceError: React не определен

Я пытаюсь заставить ReactJS работать с рельсами, используя этот учебник. Я получаю эту ошибку:

Uncaught ReferenceError: React is not defined

Но я могу получить доступ к объекту React в консоли браузера
Я также добавил public/dist/turbo-react.min.js, как описано здесь, а также добавил строку //= require components в application.js, как описано в этом ответе, не повезло. Кроме того,
var React = require('react') дает ошибку:
Uncaught ReferenceError: require is not defined

Может ли кто-нибудь предложить мне, как это решить?

[ИЗМЕНИТЬ 1]
Исходный код для справки:
Это мой файл comments.js.jsx:

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

И это мой index.html.erb:

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

Ответ 1

Я смог воспроизвести эту ошибку, когда я использовал webpack для создания своего javascript со следующим фрагментом в webpack.config.json:

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

Эта вышеприведенная конфигурация сообщает webpack не разрешать require('react') путем загрузки модуля npm, но вместо этого ожидать глобальную переменную (т.е. на объекте window), называемую React. Решение состоит в том, чтобы либо удалить эту конфигурацию (так что React будет связан с вашим javascript), либо загрузить структуру React извне до того, как этот файл будет выполнен (так что window.React существует).

Ответ 2

Возможными причинами являются: 1. вы не загрузили React.JS на свою страницу, 2. вы загрузили его после указанного выше script на свою страницу. Решение загружает JS файл до показанного выше script.

P.S

Возможные решения.

Если вы упомянете react в разделе externals внутри конфигурации webpack, то вы должны загрузить файлы js-ответов непосредственно в свой html до bundle.js
Убедитесь, что у вас есть строка import React from 'react';

Ответ 3

Если вы используете Webpack, вы можете загрузить его при необходимости, без необходимости явно указывать require в своем коде.

Добавить в webpack.config.js:

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

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

Ответ 4

Я получил эту ошибку, потому что использовал

import ReactDOM from 'react-dom'

без импорта, как только я изменил его ниже:

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

Ошибка решена:)

Ответ 5

Добавление в Сантош:

Вы можете загрузить React с помощью

import React from 'react'

Ответ 6

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

Это также может работать!

Ответ 7

Я получил эту ошибку, потому что в своем коде я ошибся с определением компонента с нижним регистром response.createClass вместо верхнего регистра React.createClass.

Ответ 8

Отображаемая ошибка

после этого импорт реагирует

Наконец импортировать реакцию

Если ошибка реагирует не определяется, добавьте == > import React from 'react';

Если ошибка в реакцииDOM не определена, добавьте == > import ReactDOM from 'react-dom';