javascript - react - Error de referencia no capturado: Reaccionar no está definido

reactdom is not defined

Question

Estoy tratando de hacer que ReactJS funcione con rieles usando this tutorial. Recibo este error:

Uncaught ReferenceError: React is not defined

Pero puedo acceder al objeto React en la consola del navegador
También agregué public/dist/turbo-react.min.js como se describe here y también agregué //= require components line en application.js como se describe en esta respuesta sin suerte. Adicionalmente,
var React = require(''react'') da el error:
Uncaught ReferenceError: require is not defined

¿Alguien puede sugerirme sobre cómo resolver esto?

[EDITAR 1]
Código fuente para referencia:
Este es mi archivo 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);

Y este es mi index.html.erb :

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

Answer 1

Las posibles razones son 1. no cargó React.JS en su página, 2. lo cargó después del script anterior en su página. La solución es cargar el archivo JS antes del script que se muestra arriba.

PD

Soluciones posibles.

1. Si menciona react en la sección externa dentro de la configuración del paquete web, debe cargar los archivos react js directamente en su html antes de bundle.js
2. Asegúrese de tener la import React from ''react''; línea import React from ''react'';

Answer 2

Pude reproducir este error cuando estaba usando webpack para construir mi javascript con el siguiente fragmento en mi webpack.config.json :

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

Esta configuración anterior le dice a webpack que no resuelva el require(''react'') cargando un módulo npm, sino que espere una variable global (es decir, en el objeto de la window ) llamada React . La solución es eliminar esta pieza de configuración (por lo que React se incluirá con su javascript) o cargar el marco React externamente antes de que se ejecute este archivo (para que exista window.React ).

Answer 3

Recibí este error porque estaba usando

import ReactDOM from ''react-dom''

sin importar reaccionar, una vez que lo cambié a continuación:

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

El error fue resuelto :)

Answer 4

Si está utilizando Webpack, puede hacer que cargue React cuando sea necesario sin tener que solicitarlo explícitamente en su código.

Añadir a webpack.config.js :

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

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

Answer 5

añadir

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

antes de la función de render

Esto se debe a que en algún momento aparecerá un error diciendo que React no está definido

agregar reaccionar a la ventana se ocupará de estos problemas

Answer 6

El error mostrado

después de esa importación reaccionar

Finalmente importa react-dom

si el error es reaccionar no se define, agregue ==> import React from ''react'';

si el error es reactDOM no está definido, agregue ==> import ReactDOM from ''react-dom'';

Answer 7

react.createClass este error porque en mi código react.createClass mal una definición de componente con react.createClass en minúsculas en lugar de react.createClass en mayúsculas.

Answer 8

Agregando a Santosh:

Puedes cargar Reaccionar por

import React from ''react''

Answer 9

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

¡Esto también puede funcionar!