単純なReact.render（）はエラーを返します

Question

私はいくつかのコンテンツをレンダリングする簡単な反応アプリを作成しようとしています。反応しWebPACKの、より一層のパッケージの必要な依存関係をインストールしたのですが、どれも実行している時に

var React = require('react'); 

var APP = React.createClass({ 
render: function(){ 
    return(<h1>Hello React</h1>); 
} 
}); 

module.exports = APP; 

アプリ-client.jsファイル

var React = require('react'); 
var APP = require('./components/APP'); 

React.render(<APP />, document.getElementById('react-container')); 

を提出私のAPP.jsで

を働いていませんコマンドwebpackエラー：

ERROR in ./app-client.js 
Module build failed: SyntaxError: /Users/akash/Dropbox/learning/pollingApp/start/app-client.js: Unexpected token (4:13) 
2 | var APP = require('./components/APP'); 
3 | 
> 4 | React.render(<APP />, document.getElementById('react-container')); 
    |   ^
at Parser.pp.raise (/Users/akash/Dropbox/learning/pollingApp/start/node_modules/babylon/lib/parser/location.js:22:13) 
at Parser.pp.unexpected (/Users/akash/Dropbox/learning/pollingApp/start/node_modules/babylon/lib/parser/util.js:89:8) 
at Parser.pp.parseExprAtom (/Users/akash/Dropbox/learning/pollingApp/start/node_modules/babylon/lib/parser/expression.js:522:12) 
at Parser.pp.parseExprSubscripts (/Users/akash/Dropbox/learning/pollingApp/start/node_modules/babylon/lib/parser/expression.js:277:19) 
at Parser.pp.parseMaybeUnary (/Users/akash/Dropbox/learning/pollingApp/start/node_modules/babylon/lib/parser/expression.js:257:19) 
at Parser.pp.parseExprOps (/Users/akash/Dropbox/learning/pollingApp/start/node_modules/babylon/lib/parser/expression.js:188:19) 
at Parser.pp.parseMaybeConditional (/Users/akash/Dropbox/learning/pollingApp/start/node_modules/babylon/lib/parser/expression.js:165:19) 
at Parser.pp.parseMaybeAssign (/Users/akash/Dropbox/learning/pollingApp/start/node_modules/babylon/lib/parser/expression.js:128:19) 
at Parser.pp.parseExprListItem (/Users/akash/Dropbox/learning/pollingApp/start/node_modules/babylon/lib/parser/expression.js:1046:16) 
at Parser.pp.parseCallExpressionArguments (/Users/akash/Dropbox/learning/pollingApp/start/node_modules/babylon/lib/parser/expression.js:353:20) 
at Parser.pp.parseSubscripts (/Users/akash/Dropbox/learning/pollingApp/start/node_modules/babylon/lib/parser/expression.js:316:31) 
at Parser.pp.parseExprSubscripts (/Users/akash/Dropbox/learning/pollingApp/start/node_modules/babylon/lib/parser/expression.js:287:15) 
at Parser.pp.parseMaybeUnary (/Users/akash/Dropbox/learning/pollingApp/start/node_modules/babylon/lib/parser/expression.js:257:19) 
at Parser.pp.parseExprOps (/Users/akash/Dropbox/learning/pollingApp/start/node_modules/babylon/lib/parser/expression.js:188:19) 
at Parser.pp.parseMaybeConditional (/Users/akash/Dropbox/learning/pollingApp/start/node_modules/babylon/lib/parser/expression.js:165:19) 
at Parser.pp.parseMaybeAssign (/Users/akash/Dropbox/learning/pollingApp/start/node_modules/babylon/lib/parser/expression.js:128:19) 
at Parser.pp.parseExpression (/Users/akash/Dropbox/learning/pollingApp/start/node_modules/babylon/lib/parser/expression.js:92:19) 
at Parser.pp.parseStatement (/Users/akash/Dropbox/learning/pollingApp/start/node_modules/babylon/lib/parser/statement.js:163:19) 
at Parser.pp.parseBlockBody (/Users/akash/Dropbox/learning/pollingApp/start/node_modules/babylon/lib/parser/statement.js:529:21) 
at Parser.pp.parseTopLevel (/Users/akash/Dropbox/learning/pollingApp/start/node_modules/babylon/lib/parser/statement.js:36:8) 
at Parser.parse (/Users/akash/Dropbox/learning/pollingApp/start/node_modules/babylon/lib/parser/index.js:129:19) 
at parse (/Users/akash/Dropbox/learning/pollingApp/start/node_modules/babylon/lib/index.js:47:47) 
at File.parse (/Users/akash/Dropbox/learning/pollingApp/start/node_modules/babel-core/lib/transformation/file/index.js:517:34) 
at File.parseCode (/Users/akash/Dropbox/learning/pollingApp/start/node_modules/babel-core/lib/transformation/file/index.js:603:20) 
at /Users/akash/Dropbox/learning/pollingApp/start/node_modules/babel-core/lib/transformation/pipeline.js:49:12 
at File.wrap (/Users/akash/Dropbox/learning/pollingApp/start/node_modules/babel-core/lib/transformation/file/index.js:563:16) 
at Pipeline.transform (/Users/akash/Dropbox/learning/pollingApp/start/node_modules/babel-core/lib/transformation/pipeline.js:47:17) 
at transpile (/Users/akash/Dropbox/learning/pollingApp/start/node_modules/babel-loader/index.js:14:22) 
at Object.module.exports (/Users/akash/Dropbox/learning/pollingApp/start/node_modules/babel-loader/index.js:88:12) 

Answer 1

react-domモジュールを使用すると、React Dom APIを使用する必要があります。 ReactDom.renderは現在、レンダリングのための新しいAPIに反応コンポーネント

var ReactDom = require('react-dom'); 
var APP = require('./components/APP'); 

ReactDom.render(<APP />, document.getElementById('react-container')); 

Answer 2

この構文を使用する必要があります。https://facebook.github.io/react/blog/2015/10/01/react-render-and-top-level-api.html

ReactDOM.render(reactElement, domContainerNode)