ReferenceError Tidak Tertangkap: React tidak ditentukan

Saya mencoba membuat ReactJS berfungsi dengan rel menggunakan tutorial ini . Saya mendapatkan kesalahan ini:

Uncaught ReferenceError: React is not defined

Tetapi saya dapat mengakses objek React di konsol browser. Saya juga menambahkan public / dist / turbo-react.min.js seperti yang dijelaskan di sini dan juga menambahkan baris di application.js seperti yang dijelaskan dalam jawaban ini tidak berhasil. Selain itu, berikan kesalahan:
//= require components
var React = require('react')
Uncaught ReferenceError: require is not defined

Adakah yang bisa menyarankan saya tentang cara menyelesaikan ini?

[EDIT 1]
Kode sumber untuk referensi:
Ini adalah comments.js.jsxfile saya :

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

Dan ini milik saya index.html.erb:

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

Saya dapat mereproduksi kesalahan ini ketika saya menggunakan webpack untuk membangun javascript saya dengan potongan berikut di saya webpack.config.json:

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

Konfigurasi di atas memberi tahu webpack untuk tidak menyelesaikan require('react')dengan memuat modul npm, tetapi mengharapkan variabel global (yaitu pada windowobjek) dipanggil React. Solusinya adalah dengan menghapus konfigurasi ini (sehingga React akan digabungkan dengan javascript Anda) atau memuat kerangka kerja React secara eksternal sebelum file ini dijalankan (jadi itu window.Reactada).

Saya mendapat kesalahan ini karena saya menggunakan

import ReactDOM from 'react-dom'

tanpa mengimpor react, setelah saya mengubahnya menjadi di bawah ini:

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

Kesalahan teratasi :)

Jika Anda menggunakan Webpack, Anda dapat membuatnya memuat React saat diperlukan tanpa harus secara eksplisit requirememasukkannya ke dalam kode Anda.

Tambahkan ke webpack.config.js :

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

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

Kemungkinan alasannya adalah 1. Anda tidak memuat React.JS ke halaman Anda, 2. Anda memuatnya setelah skrip di atas ke dalam halaman Anda. Solusi memuat file JS sebelum skrip yang ditunjukkan di atas.

PS

Solusi yang memungkinkan.

1. Jika Anda menyebutkan reactdi bagian eksternal di dalam konfigurasi webpack, maka Anda harus memuat file react js langsung ke html Anda sebelumnyabundle.js
2. Pastikan Anda memiliki garis import React from 'react';

Coba tambahkan:

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

sebelum render()fungsinya.

Ini terkadang mencegah kesalahan untuk muncul kembali:

React tidak ditentukan

Menambahkan Reactke jendela akan menyelesaikan masalah ini.

Menambahkan ke Santosh:

Anda dapat memuat React dengan

import React from 'react'

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

Ini juga bisa berhasil!

Saya mendapat kesalahan ini karena dalam kode saya, saya salah mengeja definisi komponen dengan huruf kecil, react.createClassbukan huruf besar React.createClass.

Saya menghadapi masalah yang sama. Saya menyelesaikannya dengan mengimpor Reactdan ReactDOMmenyukai sebagai berikut:

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

Jika Anda menggunakan Babel dan React 17, Anda mungkin perlu menambahkan "runtime2:" automatic "ke konfigurasi.

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

Kesalahan yang ditampilkan

setelah impor itu bereaksi

Terakhir, impor react-dom

jika error adalah react tidak didefinisikan, tambahkan ==>import React from 'react';

jika error reactDOM tidak ditentukan, tambahkan ==>import ReactDOM from 'react-dom';

Jika Anda menggunakan TypeScript, pastikan Anda tsconfig.jsonmemilikinya di "jsx": "react"dalamnya "compilerOptions".