I have been struggling with the problem for the third day, I rummaged through the entire Internet in Russian and in English (as I could). No answer found. I ask for your help.

The essence of the problem: installed through npm React and ReactDOM. They were added to node_modules . I connect. Does not see. Writes in the console "React is undefined". And if I connect via cdn, then everything works.

What is in the code:

 var React = require("react"); var ReactDOM = require("react-dom"); var Note = React.createClass({ render() { return <div>Me</div> } }); ReactDOM.render( <Note />, document.getElementById("app") );
  • 2
    Connect where? What tools do you use to require in client code? browserify? webpack? requirejs? - Pavel Mayorov
  • 1. I connect in the .jsx file. There were no problems with jsx compilation in js. 2. To build a project using Gulp.js. In it, require works as expected (except with React). Neither browserify nor webpack nor requirejs use. If my question is very simple and the answer is obvious to you, then please help. I really do not understand why it does not work. - parser
  • Show how your file looks in a browser. - Pavel Mayorov
  • Link to the image: skrinshoter.ru/s/171116/FI5gRX?a - parser
  • It is not in the browser. - Pavel Mayorov

5 answers 5

Perhaps you are using ECMAScript6. Try instead:

 var React = require("react"); var ReactDOM = require("react-dom");

Write

 import React from 'react'; import ReactDOM from 'react-dom';
  • YES folder e him react named on the screen you can see - Hangeldy Ilebaev

CreateClass is an obsolete way to declare components. In your case, you can declare the component as follows.

 import React from 'react'; import ReactDOM from 'react-dom'; class Note extends Component { render() { return ( Hello! ) } }

To create a project structure for React, I recommend using the create-react-app module, a very handy thing.

    Here is an example of the implementation of a standard component in React.

    App.js

     import React, { Component } from 'react'; export default class App extends Component { render() { return ( <h1 className="h1">Hello world!</h1> ); } }

    Index.js

     import React from 'react'; import ReactDOM from 'react-dom'; import App from './App'; // Указываете путь до компонента App ReactDOM.render(<App />, document.getElementById('root')); // 1) Указываем какой компонент будет стартовым 2) Контейнер

      another problem "React is undefined" occurs when the library is installed but not added to package.json

      check in this file "dependencies:"

      if not, install the modules with the command:

       npm i react --save

        it is still possible

         import * as React from 'react';