Javascript 未捕获的 ReferenceError：React 未定义

Uncaught ReferenceError: React is not defined

提问by sky_coder123

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

我正在尝试使用本教程使 ReactJS 与 rails 一起工作。我收到此错误：

---

---

Uncaught ReferenceError: React is not defined

Uncaught ReferenceError: React is not defined

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

但是我可以在浏览器控制台中访问 React 对象 我还添加了public/dist/turbo-react.min.js如此处所述，并在 application.js 中添加了一行，如本答案中所述，但没有运气。此外，给出错误：
//= require components
var React = require('react')
Uncaught ReferenceError: require is not defined

Can anyone suggest me on how to resolve this?

谁能建议我如何解决这个问题？

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

[编辑 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);

And this is my index.html.erb:

这是我的index.html.erb：

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

回答by Barnasaurus Rex

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 时，我能够重现此错误webpack.config.json：

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 windowobject) 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.Reactexists).

上面的配置告诉 webpack 不要require('react')通过加载 npm 模块来解析，而是期望一个window名为React. 解决方案是删除这部分配置（因此 React 将与您的 javascript 捆绑在一起）或在执行此文件之前从外部加载 React 框架（以便window.React存在）。

回答by Akshat Gupta

I got this error because I was using

我收到此错误是因为我正在使用

import ReactDOM from 'react-dom'

without importing react, once I changed it to below:

没有导入反应，一旦我将其更改为以下内容：

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

The error was solved :)

错误已解决:)

回答by J Santosh

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. 你没有将 React.JS 加载到你的页面中，2. 你在上面的脚本中加载了它到你的页面中。解决方案是在上面显示的脚本之前加载 JS 文件。

P.S

聚苯乙烯

Possible solutions.

可能的解决方案。

1. If you mention reactin externals section inside webpack configuration, then you must load react js files directly into your html before bundle.js
2. Make sure you have the line import React from 'react';

1. 如果你react在 webpack 配置中的 externals 部分提到，那么你必须在之前将 react js 文件直接加载到你的 html 中bundle.js
2. 确保你有线路 import React from 'react';

回答by Jephir

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

如果你使用 Webpack，你可以让它在需要时加载 React，而不必require在你的代码中显式地加载它。

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

回答by Imamudin Naseem

Adding to Santosh :

添加到 Santosh ：

You can load React by

您可以通过以下方式加载 React

import React from 'react'

回答by Santosh Suryawanshi

add

添加

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

before render function

渲染函数之前

this is because sometime error will pop up saying React is not defined

这是因为有时会弹出错误，说 React 未定义

adding react to the window will deal with these problem

向窗口添加反应将处理这些问题

回答by Abraham Jagadeesh

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

This may also work!

这也可能有效！

回答by nomad

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

我收到此错误是因为在我的代码中，我用小写react.createClass而不是大写拼错了一个组件定义React.createClass。

回答by Rainy

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

如果错误是 react 未定义，请添加 ==>import React from 'react';

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

如果错误是 reactDOM 未定义，请添加 ==>import ReactDOM from 'react-dom';