잡히지 않은 ReferenceError : React가 정의되지 않았습니다

이 튜토리얼을 사용하여 ReactJS를 레일과 함께 작동 시키려고합니다 . 이 오류가 발생합니다.

Uncaught ReferenceError: React is not defined

하지만 난 브라우저 콘솔에서 객체 반응에 액세스 할 수 있습니다 I도 추가 공개 / DIST / 터보 react.min.js 설명 된대로 여기에 또한 추가 설명 application.js 라인을 이 답변에 행운을. 또한 오류를 제공합니다.
//= require components
var React = require('react')
Uncaught ReferenceError: require is not defined

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

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

webpack을 사용하여 다음 청크로 내 자바 스크립트를 빌드 할 때이 오류를 재현 할 수있었습니다 webpack.config.json.

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

위의 구성은 웹팩이 require('react')npm 모듈을로드하여 해결하지 않고 대신라는 전역 변수 (즉, window객체에서) 를 기대 하도록 지시 합니다 React. 해결책은이 구성 부분을 제거하거나 (React가 자바 스크립트와 함께 번들로 제공됨)이 파일이 실행되기 전에 React 프레임 워크를 외부에서로드하는 것입니다 ( window.React존재 하기 때문에 ).

내가 사용했기 때문에이 오류가 발생했습니다.

import ReactDOM from 'react-dom'

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

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

오류가 해결되었습니다. :)

가능한 이유는 1. 페이지에 React.JS를로드하지 않았고, 2. 페이지에 위의 스크립트 후에로드했습니다. 해결책은 위에 표시된 스크립트 전에 JS 파일을로드하는 것입니다.

추신

가능한 해결책.

1. reactwebpack 구성 내부의 externals 섹션에서 언급 한 경우 먼저 react js 파일을 html로 직접로드해야합니다.bundle.js
2. 라인이 있는지 확인하십시오 import React from 'react';

Webpack을 사용하는 경우 require코드 에 명시 적으로 추가하지 않고도 필요할 때 React를로드하도록 할 수 있습니다 .

webpack.config.js에 추가하십시오 .

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

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

추가해보십시오 :

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

render()기능 전에 .

이것은 때때로 팝업 반환 오류를 방지합니다.

React가 정의되지 않았습니다.

React창에 추가하면 이러한 문제가 해결됩니다.

Santosh에 추가 :

React를로드 할 수 있습니다.

import React from 'react'

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

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

내 코드 react.createClass에서 대문자 대신 소문자로 구성 요소 정의를 잘못 입력했기 때문에이 오류가 발생했습니다 React.createClass.

나는 같은 문제에 직면했다. 다음 React과 ReactDOM같이 가져 와서 해결했습니다 .

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

표시된 오류

수입 후 반응

마지막으로 react-dom 가져 오기

오류가 반응이 정의되지 않은 경우 추가하십시오 ==>import React from 'react';

오류가 reactDOM이 정의되지 않은 경우 ==>를 추가하십시오.import ReactDOM from 'react-dom';

당신이 타이프 라이터를 사용하는 경우, 반드시 당신이 있는지 확인 tsconfig.json이 "jsx": "react"내 "compilerOptions".