[RUBY-ON-RAILS] catch되지 않은 오류 ReferenceError : 정의되지 않은 반응

catch되지 않은 오류 ReferenceError : 정의되지 않은 반응

나는이 자습서를 사용하여 레일 ReactJS 작업을 만들려고 노력하고 있습니다. 이 오류를 얻고있다 :

catch되지 않은 오류 ReferenceError : 정의되지 않은 반응

하지만 난 브라우저 콘솔에서 객체 반응에 액세스 할 수 있습니다 나는 또한 행운이 대답에 설명 된대로 // = 것은 application.js 구성 요소 라인을 필요로 추가도 여기에 설명 된 바와 같이 공공 / DIST / 터보 react.min.js을 추가합니다. 또한, VAR는 =이 ( '반응')이 필요한 오류를 제공 반작용 : catch되지 않은 오류 ReferenceError : 정의되지 않은 필요

누구든지이 문제를 해결하는 방법에 저를 제안 할 수 있습니까?

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

해결법

1. ==============================

   1.내 webpack.config.json에서 다음과 같은 덩어리 내 자바 스크립트를 구축하는 웹팩을 사용했을 때이 오류를 재현 할 수 있었다 :

   내 webpack.config.json에서 다음과 같은 덩어리 내 자바 스크립트를 구축하는 웹팩을 사용했을 때이 오류를 재현 할 수 있었다 :

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

   이 위의 구성은 NPM 모듈을로드하여 ( '반응')를 요구 해결, 대신 반작용이라는 전역 변수 (즉 윈도우 개체에 대한) 기대하지 않도록 웹팩을 알려줍니다. 이 솔루션은 하나 (그래서 당신의 자바 스크립트와 함께 번들로 제공됩니다 반응) 구성이 조각을 제거하거나이 파일이 (그래서 window.React의 존재를) 실행 외부 전에 프레임 워크 반응로드하는 것입니다.

2. ==============================

   2.내가 사용했기 때문에이 오류가있어

   내가 사용했기 때문에이 오류가있어

   import ReactDOM from 'react-dom'
   

   나는 아래로 변경하면 가져 오지 않고, 반응 :

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

   오류가 해결되었다 :

3. ==============================

   3.가능한 이유는 당신이 당신의 페이지에 위의 스크립트 후로드 2. 당신이 당신의 페이지에 React.JS를로드하지 않았다 1. 있습니다. 솔루션이 표시 스크립트 위의 전에 JS 파일을로드합니다.

   가능한 이유는 당신이 당신의 페이지에 위의 스크립트 후로드 2. 당신이 당신의 페이지에 React.JS를로드하지 않았다 1. 있습니다. 솔루션이 표시 스크립트 위의 전에 JS 파일을로드합니다.

   추신

   가능한 해결책.

4. ==============================

   4.당신이 웹팩를 사용하는 경우, 당신은 명시 적으로 코드를 필요로하지 않고도 필요한 때 반응로드 할 수 있습니다.

   당신이 웹팩를 사용하는 경우, 당신은 명시 적으로 코드를 필요로하지 않고도 필요한 때 반응로드 할 수 있습니다.

   webpack.config.js에 추가

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

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

5. ==============================

   5.산토에 추가 :

   산토에 추가 :

   당신은 반작용로드 할 수 있습니다

   import React from 'react'
   

6. ==============================

   6.

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

   이것은 또한 작동 할 수있다!

7. ==============================

   7.더하다

   더하다

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

   전 기능을 렌더링

   언젠가 오류가 정의되지 않은 반응 말하는 나타납니다 때문입니다

   창에 반응을 추가하는 것은 이러한 문제를 해결합니다

8. ==============================

   8.내 코드에서 나는 소문자 react.createClass와 대신 React.createClass 대문자 구성 요소 정의를 맞춤법이 틀린 때문에이 오류가 발생했습니다.

   내 코드에서 나는 소문자 react.createClass와 대신 React.createClass 대문자 구성 요소 정의를 맞춤법이 틀린 때문에이 오류가 발생했습니다.

9. ==============================

   9.표시되는 오류

   표시되는 오류

   그 가져온 후 반응

   마지막으로 가져 오기 반응-DOM을

   오류 IS 정의되지 않으며, == 추가하시기 바랍니다 반응하는 경우> 가져 오기 '반응'에서 반작용;

   오류가있는 경우 reactDOM은 '이-DOM 반응'에서> == 수입 ReactDOM를 추가하십시오 정의되지 않는다;

from https://stackoverflow.com/questions/32070303/uncaught-referenceerror-react-is-not-defined by cc-by-sa and MIT license