Uncaught ReferenceError: React non definito

Question

Sto cercando di far funzionare ReactJS con le guide utilizzando il tutorial this. Sto ottenendo questo errore:

---

Uncaught ReferenceError: React is not defined

Ma posso accedere all'oggetto reagire in console del browser
Ho anche aggiunto public/dist/turbo-react.min.js come descritto here ed anche ha aggiunto //= require components linea in application.js come descritto in this answer senza fortuna. Inoltre,
var React = require('react') dà l'errore:
Uncaught ReferenceError: require is not defined

Qualcuno mi può suggerire su come risolvere questo?

[EDIT 1]
Il codice sorgente di riferimento:
Questo è il mio comments.js.jsx di file:

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> 

Answer 1

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

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

Questa configurazione sopra dice a webpack di non risolvere require('react') caricando un modulo npm, ma invece di prevedere una variabile globale (ad es. sull'oggetto window) chiamato React. La soluzione è rimuovere questa configurazione (in modo che React sia in bundle con javascript) o caricare il framework React esternamente prima dell'esecuzione di questo file (in modo che esista window.React).

Answer 2

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

P.S

Soluzioni possibili.

1. Se si parla react nella sezione esterni all'interno di configurazione webpack, allora è necessario caricare reagiscono file js direttamente nel tuo html prima bundle.js
2. Assicurarsi di avere la linea import React from 'react';

Answer 3

Aggiungendo a Santosh:

È possibile caricare reagire

import React from 'react' 

Answer 4

Se si utilizza Webpack, si può avere caricare reagire quando necessario, senza dover esplicitamente require nel codice.

Aggiungi al webpack.config.js:

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

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

Answer 5

ho ottenuto questo errore perché nel mio codice ho scritto male una definizione componente react.createClass minuscole al posto delle lettere maiuscole reagire. createClass.

Answer 6

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

Questo può anche funzionare!

Answer 7

ho ottenuto questo errore perché stavo usando

import ReactDOM from 'react-dom' 

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

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

L'errore è stato risolto :)

Answer 8

The displayed error

after that import react

Finally import react-dom

se l'errore è reagire non è definire, si prega di aggiungere ==>import React from 'react';

se l'errore è reactDOM non è definire, si prega di aggiungere ==>import ReactDOM from 'react-dom';