Yakalanmamış Referans Hatası: Tepki tanımlanmadı

Bu öğreticiyi kullanarak ReactJS'in raylarla çalışmasını sağlamaya çalışıyorum . Bu hatayı alıyorum:

Uncaught ReferenceError: React is not defined

Ama tarayıcı konsoluna nesneyi tepki erişebilir Ben de eklendi kamu / dist / turbo react.min.js açıklandığı gibi burada da ilave açıklandığı gibi application.js hattını bu cevap hayır şans. Ek olarak, şu hatayı verir:
//= require components
var React = require('react')
Uncaught ReferenceError: require is not defined

Biri bana bunu nasıl çözeceğimi önerebilir mi?

[DÜZENLE 1]
Referans için kaynak kodu:
Bu benim comments.js.jsxdosyam:

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

Ve bu benim index.html.erb:

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

Javascript'imi aşağıdaki parçamda oluşturmak için webpack'i kullanırken bu hatayı yeniden oluşturabildim webpack.config.json:

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

Yukarıdaki bu yapılandırma, webpack'e require('react')bir npm modülü yükleyerek çözümlememesini , bunun yerine çağrılan bir genel değişken (yani windownesnede) beklemesini söyler React. Çözüm, ya bu konfigürasyon parçasını kaldırmak (yani React, javascript'inizle birlikte paketlenecek) ya da React çerçevesini bu dosya çalıştırılmadan önce (böylece window.Reactvar olacak şekilde) harici olarak yüklemektir .

Bu hatayı aldım çünkü kullanıyordum

import ReactDOM from 'react-dom'

react'i içe aktarmadan, aşağıdaki şekilde değiştirdikten sonra:

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

Hata çözüldü :)

Webpack kullanıyorsanız, kodunuzda açıkça belirtmek zorunda kalmadan gerektiğinde React'i yüklemesini sağlayabilirsiniz require.

Webpack.config.js'ye ekleyin :

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

Bkz. Http://webpack.github.io/docs/shimming-modules.html#plugin-provideplugin

Olası nedenler şunlardır: 1. React.JS'yi sayfanıza yüklemediniz, 2. Sayfanıza yukarıdaki koddan sonra yüklediniz. Çözüm, JS dosyasını yukarıda gösterilen komut dosyasından önce yüklemektir.

PS

Muhtemel çözümler.

1. Web reactpaketi yapılandırması içindeki harici bölümünden bahsediyorsanız, daha önce react js dosyalarını doğrudan html'nize yüklemelisiniz.bundle.js
2. Hattın olduğundan emin ol import React from 'react';

Eklemeyi deneyin:

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

render()işlevden önce .

Bu bazen, pop-up'ın geri gelmesini engeller:

React tanımlanmadı

ReactPencereye eklemek bu sorunları çözecektir.

Santosh'a ekleniyor:

React'i şu şekilde yükleyebilirsiniz:

import React from 'react'

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

Bu da işe yarayabilir!

Bu hatayı aldım çünkü kodumda bir bileşen tanımını react.createClassbüyük harf yerine küçük harfle yanlış yazdım React.createClass.

Ben de aynı sorunla karşı karşıyaydım. Ben ithal ederek bunu çözüldü Reactve ReactDOMaşağıdaki gibi gibi:

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

Babel ve React 17 kullanıyorsanız, yapılandırmaya "runtime2:" automatic "eklemeniz gerekebilir.

 {
     "presets": ["@babel/preset-env", ["@babel/preset-react", {
        "runtime": "automatic"
     }]]
 }

Görüntülenen hata

bundan sonra ithalat tepki

Sonunda react-dom'u içe aktarın

hata tepki ise tanımlı değilse, lütfen ==> ekleyinimport React from 'react';

hata reactDOM tanımlı değilse, lütfen ==> ekleyinimport ReactDOM from 'react-dom';

TypeScript kullanıyorsanız tsconfig.json, "jsx": "react"içinde bulunduğunuzdan emin olun "compilerOptions".