일부 콘텐츠를 렌더링하는 간단한 반응 앱을 만들려고합니다. 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)
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'));
이 기사는 인터넷에서 수집됩니다. 재 인쇄 할 때 출처를 알려주십시오.
침해가 발생한 경우 연락 주시기 바랍니다[email protected] 삭제
몇 마디 만하겠습니다