[javascript] ReactJS :“Uncaught SyntaxError : Unexpected token <”
ReactJS에서 사이트 구축을 시작하려고합니다. 그러나 JS를 별도의 파일에 넣으려고 할 때 “Uncaught SyntaxError : Unexpected token <“오류가 발생하기 시작했습니다.
/** @jsx React.DOM */JS 파일 맨 위에 추가하려고했지만 아무것도 고치지 않았습니다. 다음은 HTML 및 JS 파일입니다. 무엇이 잘못되었는지에 대한 아이디어가 있습니까?
HTML
<html>
<head>
<title>Page</title>
<script src="http://fb.me/react-0.12.2.js"></script>
<script src="http://fb.me/JSXTransformer-0.12.2.js"></script>
<script src="http://code.jquery.com/jquery-1.10.0.min.js"> </script>
<script src="./lander.js"> </script>
</head>
<body>
<div id="content"></div>
<script type="text/jsx">
React.render(
<Lander />,
document.getElementById('content')
);
</script>
</body>
</html>JS
/**
* @jsx React.DOM
*/
var Lander = React.createClass({
render: function () {
var info = "Lorem ipsum dolor sit amet... ";
return(
<div>
<div className="info">{info}</div>
</div>
);
}
});편집 : type="text/jsx"착륙선 코드를 포함하는 스크립트 태그 에 추가해야한다는 것을 깨달았습니다 . 그러나 이것을 추가하고 다시로드하면이 경고가 표시됩니다.
“당신은에서 브라우저 JSX 변압기를 사용하는 제품에 대한 귀하의 JSX를 미리 컴파일해야합니다 -. http://facebook.github.io/react/docs/tooling-integration.html#jsx “
이 오류가 뒤 따릅니다.
“XMLHttpRequest는 file : ///Users/…/lander.js를로드 할 수 없습니다. 교차 출처 요청은 http, data, chrome-extension, https, chrome-extension-resource와 같은 프로토콜 스키마에 대해서만 지원됩니다.”
브라우저 jsx 변환이 작동하도록하려면 다른 작업이 필요한 것 같지만 그것이 무엇인지 잘 모르겠습니다.
편집 : OOOOH MAMP 등을 사용하여 호스팅해야합니까?
답변
업데이트-대신 사용 :
<script type="text/babel" src="./lander.js"></script>다음 type="text/jsx"과 같이 scriptJSX Transformer에 의해 변환되어야하는 JavaScript 파일을 포함하는 데 사용되는 태그 의 속성으로 추가하십시오 .
<script type="text/jsx" src="./lander.js"></script>그런 다음 MAMP 또는 다른 서비스를 사용하여 여기에 설명 된대로 모든 포함이 작동하도록 localhost에서 페이지를 호스팅 할 수 있습니다 .
모든 도움에 감사드립니다!
답변
JSTransform은 더 이상 사용되지 않습니다 . 대신 babel을 사용하세요.
<script type="text/babel" src="./lander.js"></script>답변
다음 type="text/babel"과 같이 스크립트 태그의 속성으로 추가 합니다.
<script type="text/babel" src="./lander.js"></script>답변
type="text/babel".jsx 파일을 포함하는 스크립트에 추가 하고 다음 을 추가하십시오. <script src="https://npmcdn.com/babel-core@5.8.38/browser.min.js"></script>
답변
당신이 뭔가를 가지고 있다면
Uncaught SyntaxError: embedded: Unexpected token다음과 같은 장소에서 쉼표를 놓쳤을 것입니다.
var CommentForm = React.createClass({
getInitialState: function() {
return {author: '', text: ''};
}, // <---- DON'T FORGET THE COMMA
render: function() {
return (
<form className="commentForm">
<input type="text" placeholder="Nombre" />
<input type="text" placeholder="Qué opina" />
<input type="submit" value="Publicar" />
</form>
)
}
});답변
가지고있는 코드가 정확합니다. JSX 코드는 JS로 컴파일해야합니다.
답변
다음과 같은 오류가 발생하는 경우 :
SyntaxError : embed : Unexpected token (107 : 9) 105
중괄호가 누락되었을 수 있습니다.
