Uncaught ReferenceError: React не визначено

Я намагаюся змусити ReactJS працювати з рейками, використовуючи цей підручник. Я отримую цю помилку:

Uncaught ReferenceError: React is not defined

Але я можу отримати доступ до об'єкта React у консолі браузера, я також додав public / dist / turbo-response.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у розділі зовнішніх елементів конфігурації веб-пакета, то вам слід завантажувати реагуючі файли js безпосередньо у ваш htmlbundle.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у вікно вирішить ці проблеми.

Додавання до Santosh:

Ви можете завантажити 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';

Відображена помилка

після цього імпортна реакція

Нарешті імпорт реакція-dom

якщо реакція на помилку не визначена, додайте ==>import React from 'react';

якщо помилка reagiraDOM не визначена, додайте ==>import ReactDOM from 'react-dom';

Якщо ви використовуєте TypeScript, переконайтеся, що у вас tsconfig.jsonє "jsx": "react"всередині "compilerOptions".