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.