Uncaught ReferenceError: React không được xác định

Tôi đang cố gắng làm cho ReactJS hoạt động với đường ray bằng cách sử dụng hướng dẫn này . Tôi nhận được lỗi này:

Uncaught ReferenceError: React is not defined

Nhưng tôi có thể truy cập đối tượng React trong bảng điều khiển trình duyệt, tôi cũng đã thêm public / dist / turbo-react.min.js như được mô tả ở đây và cũng đã thêm dòng trong application.js như được mô tả trong câu trả lời này . Ngoài ra, gây ra lỗi:
//= require components
var React = require('react')
Uncaught ReferenceError: require is not defined

Bất cứ ai có thể gợi ý cho tôi về cách giải quyết điều này?

[EDIT 1]
Mã nguồn để tham khảo:
Đây là comments.js.jsxtệp của tôi :

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

Và đây là của tôi index.html.erb:

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

Tôi có thể tạo lại lỗi này khi tôi đang sử dụng webpack để xây dựng javascript của mình với đoạn mã sau trong của tôi webpack.config.json:

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

Cấu hình trên cho biết webpack không giải quyết require('react')bằng cách tải một mô-đun npm, mà thay vào đó để mong đợi một biến toàn cục (tức là trên windowđối tượng) được gọi React. Giải pháp là xóa phần cấu hình này (vì vậy React sẽ được đóng gói cùng với javascript của bạn) hoặc tải React framework ra bên ngoài trước khi tệp này được thực thi (để tệp window.Reacttồn tại).

Tôi gặp lỗi này vì tôi đang sử dụng

import ReactDOM from 'react-dom'

mà không cần nhập phản ứng, sau khi tôi thay đổi nó thành bên dưới:

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

Lỗi đã được giải quyết :)

Các lý do có thể là 1. bạn không tải React.JS vào trang của mình, 2. bạn tải nó sau đoạn script trên vào trang của mình. Giải pháp là tải tệp JS trước tập lệnh được hiển thị ở trên.

PS

Phương pháp khả thi.

1. Nếu bạn đề cập reacttrong phần bên ngoài bên trong cấu hình webpack, thì bạn phải tải các tệp phản ứng js trực tiếp vào html của bạn trước khibundle.js
2. Hãy chắc chắn rằng bạn có dòng import React from 'react';

Nếu bạn đang sử dụng Webpack, bạn có thể để nó tải React khi cần thiết mà không cần phải ghi rõ ràng requirenó trong mã của bạn.

Thêm vào webpack.config.js :

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

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

Cố gắng thêm:

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

trước render()hàm.

Điều này đôi khi ngăn chặn lỗi trả về cửa sổ bật lên:

React không được xác định

Thêm Reactvào cửa sổ sẽ giải quyết những vấn đề này.

Thêm vào Santosh:

Bạn có thể tải React bằng cách

import React from 'react'

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

Điều này cũng có thể hoạt động!

Tôi gặp lỗi này vì trong mã của mình, tôi viết sai chính tả định nghĩa thành phần bằng chữ thường react.createClassthay vì chữ hoa React.createClass.

Tôi đã phải đối mặt với cùng một vấn đề. Tôi đã giải quyết nó bằng cách nhập Reactvà ReactDOMnhư sau:

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

Lỗi hiển thị

sau khi nhập đó phản ứng

Cuối cùng nhập react-dom

nếu lỗi là phản ứng không được xác định, vui lòng thêm ==>import React from 'react';

nếu lỗi là reactDOM không được xác định, vui lòng thêm ==>import ReactDOM from 'react-dom';

Nếu bạn đang sử dụng TypeScript, hãy đảm bảo rằng bạn tsconfig.jsoncó "jsx": "react"bên trong "compilerOptions".