Uncaught TypeError: (0, _react.createClass) не является функцией

Question

У меня проблема с новым проектом React, Webpack.Не удается устранить ошибку в появившейся консоли браузера: "Uncaught TypeError: (0, _react.createClass) не является функцией"

Можете ли вы мне помочь?

Снимок экрана Opera Opera

webpack.config.babel.js

import path from 'path';

export default {
    mode: 'development', // development, production or none
    entry: './assets/js/index.js',
    output: {
        path: path.resolve(__dirname, 'dist/js'),
        filename: 'bundle.js',
        sourceMapFilename: 'bundle.map'
    },
    // devtool: '#source-map',
    module: {
        rules: [{
            test: /\.js$/,
            exclude: /node_modules/,
            loaders: ['babel-loader']
        }]
    }
};

.babelrc

{
    "presets": [
        "env",
        "stage-0",
        "react"
    ]
}

index.js

import { createClass } from 'react';
import { render } from 'react-dom';

const Note = createClass({
    displayName: 'Note',
    render() {
        return (
            <div className='TEST'>
                Hello world
            </div>
        );
    }
});

render(
    <Note />,
    document.body
);

Скриншот проекта в Visual Studio Code

package.json

{
  "dependencies": {
    "normalize.css": "^8.0.0",
    "react": "^16.4.0",
    "react-dom": "^16.4.0"
  },
  "devDependencies": {
    "babel-core": "^6.26.3",
    "babel-loader": "^7.1.4",
    "babel-preset-env": "^1.7.0",
    "babel-preset-react": "^6.24.1",
    "babel-preset-stage-0": "^6.24.1",
    "eslint": "^4.19.1",
    "eslint-plugin-react": "^7.8.2",
    "path": "^0.12.7",
    "webpack": "^4.10.2",
    "webpack-cli": "^2.1.4"
  },
  "name": "notes",
  "version": "0.0.1",
  "description": "",
  "main": "webpack.config.babel.js",
  "scripts": {
    "build": "webpack",
    "watch": "webpack --watch",
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "Andrew Dyachenko",
  "license": "ISC"
}

Answer 1

createClass функция удалена из react v16.0.

Я не знаю, почему вы этого хотите.(возможно, если вам нужно перенести старый проект)

В любом случае, вам нужно установить другой пакет create-react-class.

npm i -s create-react-class

А затем

import { render } from 'react-dom';
import createReactClass from 'create-react-class';


const Note = createReactClass({
    displayName: 'Note',
    render() {
        return (
            <div className='TEST'>
                Hello world
            </div>
        );
    }
});

render(
    <Note />,
    document.getElementById('root') // rendering on document.body is bad. You should avoid it. Create a tag with id `root`
);

---

Если вы следуете любому старому учебнику (если есть), новый синтаксис будет

import { render } from 'react-dom';
import { component }from 'react';

class Note extends component{
    displayName: 'Note',
    render() {
        return (
            <div className='TEST'>
                Hello world
            </div>
        );
    }
}

// or, just simply  (in this case)

const Note2 = () => <div className='TEST'>Hello world</div>;

render(
    <Note />,
    document.getElementById('root') 
);