Referência não capturadaError: React não está definido

Estou tentando fazer o ReactJS funcionar com trilhos usando este tutorial. Estou recebendo este erro:

Uncaught ReferenceError: React is not defined

Mas posso acessar o objeto React no console do navegador . Também adicionei public / dist / turbo-react.min.js conforme descrito aqui e também adicionei linha em application.js, conforme descrito nesta resposta sem sorte. Além disso, dá o erro:
//= require components
var React = require('react')
Uncaught ReferenceError: require is not defined

Alguém pode me sugerir como resolver isso?

[EDIT 1]
Código-fonte para referência:
Este é meu comments.js.jsxarquivo:

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 este é o meu index.html.erb:

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

Consegui reproduzir esse erro quando estava usando o webpack para construir meu javascript com o seguinte trecho em meu webpack.config.json:

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

Esta configuração acima diz ao webpack para não resolver require('react')carregando um módulo npm, mas sim esperar uma variável global (isto é, no windowobjeto) chamada React. A solução é remover esta parte da configuração (então o React será empacotado com o seu javascript) ou carregar o framework React externamente antes que este arquivo seja executado (para que window.Reactexista).

Recebi este erro porque estava usando

import ReactDOM from 'react-dom'

sem importar reagir, uma vez que mudei para abaixo:

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

O erro foi resolvido :)

Se você estiver usando o Webpack, pode fazer com que ele carregue o React quando necessário, sem ter que explicitamente requireem seu código.

Adicione a webpack.config.js :

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

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

Os possíveis motivos são 1. você não carregou o React.JS em sua página, 2. você o carregou após o script acima em sua página. A solução é carregar o arquivo JS antes do script mostrado acima.

PS

Soluções possíveis.

1. Se você mencionar reactna seção externa dentro da configuração do webpack, você deve carregar os arquivos react js diretamente em seu html antesbundle.js
2. Certifique-se de ter a linha import React from 'react';

Tente adicionar:

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

antes da render()função.

Isso às vezes evita que o erro de pop-up retorne:

React não está definido

Adicionar Reactà janela resolverá esses problemas.

Adicionando ao Santosh:

Você pode carregar o React por

import React from 'react'

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

Isso também pode funcionar!

Recebi este erro porque em meu código eu digitei incorretamente uma definição de componente com letras minúsculas em react.createClassvez de maiúsculas React.createClass.

Eu estava enfrentando o mesmo problema. Resolvi importando Reacte ReactDOMgosto da seguinte maneira:

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

Se você estiver usando o Babel e o React 17, pode ser necessário adicionar "runtime2:" automatic "à configuração.

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

O erro exibido

depois dessa importação reagir

Finalmente importe a reação

se o erro for reagir não for definido, adicione ==>import React from 'react';

se o erro for reactDOM não definido, adicione ==>import ReactDOM from 'react-dom';

Se você estiver usando TypeScript, certifique-se de que tsconfig.jsonestá "jsx": "react"dentro de "compilerOptions".