未捕获的ReferenceError：未定义React

我正在尝试使用本教程来使ReactJS在rails中工作。 我得到这个错误：

---

Uncaught ReferenceError: React is not defined

但是我可以在浏览器控制台中访问React对象
我还join了public / dist / turbo-react.min.js ，并且在application.js中添加了//= require components行，就像这个答案中描述的那样 ，没有运气。 另外，
var React = require('react')给出错误：
Uncaught ReferenceError: require is not defined

任何人都可以build议我如何解决这个问题？

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

Answer 1

当我使用webpack在webpack.config.json中使用以下块创build我的JavaScript时，我能够重现此错误：

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

这个上面的configuration告诉webpack不通过加载一个npm模块来parsingrequire('react') ，而是期望一个名为React的全局variables（即在window对象上）。 解决的办法是删除这段configuration（所以React将与你的javascript捆绑在一起），或者在执行这个文件之前从外部加载React框架（以便window.React存在）。

Answer 2

可能的原因是1.您没有将React.JS加载到您的页面中，2.您已将上面的脚本加载到您的页面中。 解决方法是在上面显示的脚本之前加载JS文件。

PS

可能的解决scheme。

1. 如果你在webpackconfiguration里面的externals部分提到了react ，那么你必须在bundle.js之前直接加载js文件到你的html中
2. 确保你已经import React from 'react';行import React from 'react';

Answer 3

如果你正在使用Webpack，你可以在需要的时候加载React，而不必在你的代码中明确地require它。

添加到webpack.config.js ：

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

请参阅http://webpack.github.io/docs/shimming-modules.html#plugin-provideplugin

Answer 4

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

 import ReactDOM from 'react-dom' 

没有导入反应，一旦我把它改为如下：

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

错误已解决:)

Answer 5

添加到Santosh：

你可以加载反应

 import React from 'react' 

Answer 6

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

这也可能工作！

Answer 7

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