Errore di riferimento non rilevato: React non è definito

Sto cercando di far funzionare ReactJS con rails usando questo tutorial. Ricevo questo errore:

Uncaught ReferenceError: React is not defined

Ma posso accedere all'oggetto React nella console del browser.Ho anche aggiunto public / dist / turbo-react.min.js come descritto qui e ho anche aggiunto la riga in application.js come descritto in questa risposta a sfortuna. Inoltre, dà l'errore:
//= require components
var React = require('react')
Uncaught ReferenceError: require is not defined

Qualcuno può suggerirmi come risolvere questo problema?

[EDIT 1]
Codice sorgente di riferimento:
questo è il mio comments.js.jsxfile:

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

E questo è il mio index.html.erb:

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

Sono stato in grado di riprodurre questo errore quando stavo usando webpack per creare il mio javascript con il seguente blocco nel mio webpack.config.json:

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

Questa configurazione precedente dice a webpack di non risolvere require('react')caricando un modulo npm, ma di aspettarsi invece una variabile globale (cioè windowsull'oggetto) chiamata React. La soluzione è rimuovere questo pezzo di configurazione (in modo che React venga fornito in bundle con il tuo javascript) o caricare il framework React esternamente prima che questo file venga eseguito (in modo che window.Reactesista).

Ho ricevuto questo errore perché stavo usando

import ReactDOM from 'react-dom'

senza importare reagire, una volta che l'ho cambiato in seguito:

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

L'errore è stato risolto :)

Se stai usando Webpack, puoi farlo caricare React quando necessario senza doverlo esplicitamente requirenel tuo codice.

Aggiungi a webpack.config.js :

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

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

Le ragioni possibili sono 1. non hai caricato React.JS nella tua pagina, 2. l'hai caricato dopo lo script sopra nella tua pagina. La soluzione è caricare il file JS prima dello script mostrato sopra.

PS

Possibili soluzioni.

1. Se si menziona reactnella sezione esterna all'interno della configurazione del webpack, è necessario caricare prima i file react js direttamente nel proprio htmlbundle.js
2. Assicurati di avere la linea import React from 'react';

Prova ad aggiungere:

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

prima della render()funzione.

Questo a volte impedisce la restituzione di un messaggio di errore:

React non è definito

L'aggiunta Reactalla finestra risolverà questi problemi.

Aggiunta a Santosh:

Puoi caricare React by

import React from 'react'

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

Anche questo potrebbe funzionare!

Ho ricevuto questo errore perché nel mio codice ho scritto male la definizione di un componente con lettere minuscole react.createClassanziché maiuscole React.createClass.

Stavo affrontando lo stesso problema. L'ho risolto importando Reacte mi ReactDOMpiace come segue:

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

Se stai usando Babel e React 17, potresti dover aggiungere "runtime2:" automatic "a config.

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

L'errore visualizzato

dopo che l'importazione reagisce

Infine importa il file react-dom

se l'errore è reagire non è definito, aggiungere ==>import React from 'react';

se l'errore è ReactionDOM non è definito, aggiungi ==>import ReactDOM from 'react-dom';

Se stai usando TypeScript, assicurati che il tuo file tsconfig.jsonabbia "jsx": "react"all'interno "compilerOptions".