简单的 React.render() 给出错误答案

【问题标题】：Simple React.render() gives error简单的 React.render() 给出错误
【发布时间】：2016-07-12 04:18:36
【问题描述】：

我正在尝试创建一个简单的反应应用程序，它呈现一些内容。安装了 react 和 webpack 所需的依赖，甚至更多的包，但没有一个起作用

在我的 APP.js 文件中

var React = require('react');

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

module.exports = APP;

app-client.js 文件

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

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

运行 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)

【问题讨论】：

如果您打算使用 JSX，那么您需要转译代码或包含客户端编译器，应该是关于此 here 的信息。到目前为止，这两个答案充其量是不准确的，最坏的情况是完全错误的。您可能还想阅读getting started 指南。他们还有一个入门工具包，您可以在那里学习。

标签： javascript reactjs ecmascript-6 react-jsx jsx

【解决方案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'));

【讨论】：

最好在您发布的代码中添加解释作为答案，这样可以帮助访问者理解为什么这是一个好的答案。

【解决方案2】：

你需要使用这个语法：https://facebook.github.io/react/blog/2015/10/01/react-render-and-top-level-api.html

ReactDOM.render(reactElement, domContainerNode)

【讨论】：