React.createClass私はenvirementに反応し、このラインを使用してコードを実行するためにWebPACKの使用、機能ではないWebPACKのエラー

Question

をcomplingことができる：

webpack -d && webpack-dev-server --content-base src/ --inline --hot --port 1234 

CMDは、いくつかのビルド実行され、よりラインを示しています：

webpack: Compiled successfully. 

の代わり：

webpack: bundle is now VALID 

私は例で見たように。

、それはブラウザのコンソール上で言うより：

Uncaught TypeError: React.createClass is not a function 

それは何だろうか？

私の依存関係：

"dependencies": { 
    "react": "^16.0.0", 
    "react-dom": "^16.0.0" 
}, 
"devDependencies": { 
    "babel-core": "^6.26.0", 
    "babel-loader": "^7.1.2", 
    "babel-preset-es2015": "^6.24.1", 
    "babel-preset-react": "^6.24.1", 
    "webpack": "^3.8.1", 
    "webpack-dev-server": "^2.9.4" 
} 

私のコード：

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

// Create component 
var TodoComponent = React.createClass({ 
    render: function() { 
    return(
     <h1>Hello!!</h1> 
    ); 
    } 
}); 

// put component into html page 

ReactDOM.render(<TodoComponent />, document.getElementById('todo-container')); 

ところで、これはここで私の最初の質問ですが、 はそう先発のミスのための私を許してください..;）

Answer 1

Reactのバージョン16.xではReact.createClassがcreate-react-classという独自のパッケージに移動されました。ここ

ドキュメント： https://reactjs.org/blog/2017/09/26/react-v16.0.html#packaging

だから、あなたはnpm i create-react-class --saveを行う必要があります。その後、

そして、あなたのコードを調整します

var React = require('react'); 
var ReactDOM = require('react-dom'); 
var createClass = require('create-react-class'); 

// Create component 
var TodoComponent = createClass({ 
    render: function() { 
    return(
     <h1>Hello!!</h1> 
    ); 
    } 
}); 

// put component into html page 

ReactDOM.render(<TodoComponent />, document.getElementById('todo-container')); 

そうしないと、反応でより慣用であるES6 classコンポーネントを、使用する必要があります。

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

// Create component 
class TodoComponent extends React.Component { 
    render() { 
     return(
      <h1>Hello!!</h1> 
     ); 
    } 
} 

// put component into html page 

ReactDOM.render(<TodoComponent />, document.getElementById('todo-container'));