var React = require("react"); Почему не работает?

Question

Бьюсь над проблемой уже третий день, перерыл весь интернет на русском и на английском (как смог). Ответа не нашёл. Прошу вашей помощи.

Суть проблемы: установил через npm React и ReactDOM. В node_modules они добавились. Подключаю. Не видит. Пишет в консоли "React is undefined". А если подключаю через cdn, то все работает.

Что в коде:

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

var Note = React.createClass({
    render() {
        return <div>Me</div>
    }
});

ReactDOM.render(
    <Note />,
    document.getElementById("app")
);

Answer 1

Возможно вы используете ECMAScript6. Попробуйте вместо:

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

Написать

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

Answer 2

СreateClass это устаревший способ объявления компонентов. В вашем случае объявить компонент можно так

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

class Note extends Component {
  render() {
   return (
    Hello!
  )
 }
}

Чтобы создать структуру проекта на Реакт рекомендую воспользоваться модулем create-react-app, очень удобная штука.

Answer 3

Вот пример реализации стандартного компонента в 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) Контейнер

Answer 4

еще проблема "React is undefined" возникает тогда, когда библиотека установлена, но не добавлена в package.json

проверьте в этом файле "dependencies:"

если нет, то устанавливайте модули командой:

npm i react --save

Answer 5

еще так можно

import * as React from 'react';