未捕获的ReferenceError: React未定义

I am trying to make ReactJS work with rails using this tutorial. I am getting this error:

我正在尝试使用本教程使反应物js与rails一起工作。我得到了这个错误:

---

Uncaught ReferenceError: React is not defined

未捕获的ReferenceError: React未定义

But I can access the React object in browser console
I also added public/dist/turbo-react.min.js as described here and also added //= require components line in application.js as described in this answer to no luck. Additionally,
var React = require('react') gives the error:
Uncaught ReferenceError: require is not defined

但是我可以访问浏览器控制台中的React对象，我还添加了public/dist/turbo-反应式。min。这里描述的js以及添加//=需要应用程序中的组件行。正如在这个答案中描述的那样，没有运气。此外，var React = require(' React ')给出了错误:Uncaught ReferenceError: require未定义

Can anyone suggest me on how to resolve this?

谁能告诉我怎么解决这个问题吗?

[EDIT 1]
Source code for reference:
This is my comments.js.jsx file:

[编辑1]参考源代码:这是我的评论。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);

And this is my index.html.erb:

这是我的index。html。erb:

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

8 个解决方案

#1

I was able to reproduce this error when I was using webpack to build my javascript with the following chunk in my webpack.config.json:

当我使用webpack构建我的javascript时，我可以重现这个错误。

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

This above configuration tells webpack to not resolve require('react') by loading an npm module, but instead to expect a global variable (i.e. on the window object) called React. The solution is to either remove this piece of configuration (so React will be bundled with your javascript) or load the React framework externally before this file is executed (so that window.React exists).

上面的配置告诉webpack不要通过加载npm模块来解决require(“react”)，而应该期望一个名为react的全局变量(即窗口对象)。解决方案是要么删除这部分配置(因此React将与javascript绑定)，要么在执行此文件之前从外部加载React框架(即该窗口)。反应存在)。

#2

Possible reasons are 1. you didn't load React.JS into your page, 2. you loaded it after the above script into your page. Solution is load the JS file before the above shown script.

可能的原因是1。你没有负荷的反应。进入你的页面，2。您在上面的脚本之后将它加载到您的页面中。解决方案是在上面显示的脚本之前加载JS文件。

P.S

附:

Possible solutions.

可能的解决方案。

1. If you mention react in externals section inside webpack configuration, then you must load react js files directly into your html before bundle.js
2. 如果您在webpack配置中的externals小节中提到react，那么您必须在bundl .js之前将react js文件直接加载到html中
3. Make sure you have the line import React from 'react';
4. 确保您的行导入响应于“React”;

#3

If you are using Webpack, you can have it load React when needed without having to explicitly require it in your code.

如果您正在使用Webpack，您可以让它在需要时进行加载响应，而不必在代码中显式地要求它。

Add to webpack.config.js:

添加webpack.config.js:

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

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

看到http://webpack.github.io/docs/shimming-modules.html plugin-provideplugin

#4

I got this error because I was using

我得到这个错误是因为我在使用

import ReactDOM from 'react-dom'

without importing react, once I changed it to below:

没有导入response，一旦我将它改为:

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

The error was solved :)

错误解决了:)

#5

Adding to Santosh :

增加桑托什:

You can load React by

您可以加载response by

import React from 'react'

#6

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

This may also work!

这可能也工作!

#7

I got this error because in my code I misspelled a component definition with lowercase react.createClass instead of uppercase React.createClass.

我犯了这个错误，因为在我的代码中，我拼错了一个小写react的组件定义。用createClass代替大写的反应堆。

#8

The displayed error

显示的错误

after that import react

导入后的反应

Finally import react-dom

最后导入react-dom

if error is react is not define,please add ==>import React from 'react';

如果error is是react未定义，请添加==>导入response from 'react';

if error is reactDOM is not define,please add ==>import ReactDOM from 'react-dom';

如果错误是无定义的反应物，请添加==>从“反应物-dom”导入反应物;