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

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

Uncaught ReferenceError: React is not defined

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

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

[EDIT 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>

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

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

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

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

import ReactDOM from 'react-dom'

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

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

Ошибка решилась :)

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

PS

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

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

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

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

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

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

Попробуй добавить:

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

перед render()функцией.

Иногда это предотвращает появление ошибки при возврате всплывающего окна:

Реагировать не определено

Добавление Reactв окно решит эти проблемы.

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

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

import React from 'react'

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

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

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

Я столкнулся с той же проблемой. Я решил это путем импорта Reactи ReactDOMвроде следующего:

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

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

после этого импортная реакция

Наконец импортируйте react-dom

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

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

Если вы используете машинопись, убедитесь , что ваш tsconfig.jsonесть "jsx": "react"внутри "compilerOptions".