ReactJS与npm的结合及其给出的跟随错误(意外令牌)

Question

任何信息都会非常有用，最初我还运行了npm命令。

我有过

./app-client.js模块构建失败: SyntaxError: /Users/dawatramani/ReactNodejs/app-client.js：

意外令牌(4:13)

  2 | var APP= require('./components/APP');
  3 | 
> 4 | React.render(<APP />,document.getElementById('react-container'));
    |              ^
  5 | 

(/Users/dawatramani/ReactNodejs/node_modules/babel-core/node_modules/babylon/lib/parser/location.js:22:13) at Parser.pp.unexpected (/Users/dawatramani/ReactNodejs/node_modules/babel-core/node_modules/babylon/lib/parser/util.js:89:8) at Parser.pp.parseExprAtom (/Users/dawatramani/ReactNodejs/node_modules/babel-core/node_modules/babylon/lib/parser/expression( (/Users/dawatramani/ReactNodejs/node_modules/babel-core/node_modules/babylon/lib/parser/expression.js:277:19) at Parser.pp.parseMaybeUnary (/Users/dawatramani/ReactNodejs/node_modules/babel-core/node_modules/babylon/lib/parser/expression.js:257:19) at Parser.pp.parseExprOps (/Users/dawatramani/ReactNodejs/node_modules/babel-core/node_ )modules/babylon/lib/parser/expression.js:188:19) at Parser.pp.parseMaybeConditional (/Users/dawatramani/ReactNodejs/node_modules/babel-core/node_modules/babylon/lib/parser/expression.js:165:19) at Parser.pp.parseMaybeAssign (/Users/dawatramani/ReactNodejs/node_modules/babel-core/node_modules/babylon/lib/parser/expression.js:128:19) at Parser.pp.parseExprListItem (/Users/dawatramani/ReactNodejs/node )_modules/babel-core/node_modules/babylon/lib/parser/expression.js:1046:16) at Parser.pp.parseCallExpressionArguments (/Users/dawatramani/ReactNodejs/node_modules/babel-core/node_modules/babylon/lib/parser/expression.js:353:20) at Parser.pp.parseSubscripts (/Users/dawatramani/ReactNodejs/node_modules/babel-core/node_modules/babylon/lib/parser/expression.js:316:31) at Parser.pp.parseExprSubscripts(/Users/dawatramani/ReactNodejs/node_modules/babel-core/node_modules/babylon/lib/parser/expression.js:287:15) at Parser.pp.parseMaybeUnary (/Users/dawatramani/ReactNodejs/node_modules/babel-core/node_modules/babylon/lib/parser/expression.js:257:19) at Parser.pp.parseExprOps (/Users/dawatramani/ReactNodejs/node_modules/babel-core/node_modules/babylon/lib/parser/expression.js:188:19)(/Users/dawatramani/ReactNodejs/node_modules/babel-core/node_modules/babylon/lib/parser/expression.js:165:19) at Parser.pp.parseMaybeAssign (/Users/dawatramani/ReactNodejs/node_modules/babel-core/node_modules/babylon/lib/parser/expression.js:128:19) at Parser.pp.parseExpression (/Users/dawatramani/ReactNodejs/node_modules/babel-core/node_modules/babylon/lib/parser( (/Users/dawatramani/ReactNodejs/node_modules/babel-core/node_modules/babylon/lib/parser/statement.js:163:19) at Parser.pp.parseBlockBody (/Users/dawatramani/ReactNodejs/node_modules/babel-core/node_modules/babylon/lib/parser/statement.js:529:21) at Parser.pp.parseTopLevel (/Users/dawatramani/ReactNodejs/node_modules/babel-core/ )node_modules/babylon/lib/parser/statement.js:36:8) at Parser.parse (/Users/dawatramani/ReactNodejs/node_modules/babel-core/node_modules/babylon/lib/parser/index.js:129:19) at parse (/Users/dawatramani/ReactNodejs/node_modules/babel-core/node_modules/babylon/lib/index.js:47:47) at File.parse (/Users/dawatramani/ReactNodejs/node_modules/babel-core/lib转换/file/index.js:517:34)在/Users/dawatramani/ReactNodejs/node_modules/babel-core/lib/transformation/pipeline.js:49:12 at /Users/dawatramani/ReactNodejs/node_modules/babel-core/lib/transformation/pipeline.js:49:12 at File.wrap (/Users/dawatramani/ReactNodejs/node_modules/babel-core/lib/transformation/file/index.js:563:16)的File.parseCode(/Users/dawatramani/ReactNodejs/node_modules/babel-core/lib/transformation/pipeline.js:47:17) at transpile (/Users/dawatramani/ReactNodejs/node_modules/babel-loader/index.js:14:22) at Object.module.exports (/Users/dawatramani/ReactNodejs/node_modules/babel-loader/index.js:88:12) at Pipeline.transform

Answer 1

对于当前版本的reactJS，您不应该使用React.render()，而应该使用ReactDOM.render()和import ReactDOM from "react-dom"。我想这能解决你的问题。

ReactDOM.render(<ComponentName />,document.getElementById('react-container'));

这是0.14引入的最新变化。React现在被分成一个核心库和DOM适配器。渲染现在是通过ReactDOM.render完成的。

DOCS

Answer 2

似乎您忘记在呈现方法中粘贴组件:)

React.render(,document.getElementById('react-container'));