Reactjs : 예기치 않은 토큰 '<'오류
나는 Reactjs로 시작했고
li태그 를 표시하는 간단한 구성 요소를 작성하고 있었고이 오류가 발생했습니다.
예기치 않은 토큰 '<'
http://jsbin.com/UWOquRA/1/edit?html,js,console,output 아래 jsbin에 예제를 넣었습니다.
내가 뭘 잘못하고 있는지 알려주세요.
type = "text / babel"을 사용하여 해결했습니다.
<script src="js/reactjs/main.js" type = "text/babel"></script>
업데이트 : React 0.12+에서는 JSX pragma가 더 이상 필요하지 않습니다.
파일 상단에 JSX pragma를 포함해야합니다.
/** @jsx React.DOM */
이 줄이 없으면 jsx바이너리 및 브라우저 내 변환기가 파일을 변경하지 않고 그대로 둡니다.
예기치 않은 토큰 '<' 문제 는 바벨 사전 설정이 누락 되었기 때문입니다.
해결책 : 다음과 같이 웹팩 구성을 구성해야합니다.
{
test :/\.jsx?$/,
exclude:/(node_modules|bower_components)/,
loader :'babel',
query :{
presets:['react','es2015']
}
}
여기서 .jsx는 .js 및 .jsx 형식을 모두 확인합니다.
다음과 같이 노드를 사용하여 바벨 종속성을 간단히 설치할 수 있습니다.
npm install babel-preset-react
감사합니다
제 경우에는 스크립트 태그에 type 속성을 포함하지 못했습니다.
<script type="text/jsx">
JSX 코드를 자바 스크립트로 트랜스 파일 / 컴파일하거나 브라우저 내 변환기를 사용해야합니다.
봐 http://facebook.github.io/react/docs/getting-started.html 과의 양지 <script>태그를, 당신은 JSX의 브라우저에서 작업에 포함 된 사람들이 필요합니다.
이 오류가 발생하여 이틀 동안 해결할 수 없었기 때문에 오류 수정이 매우 간단합니다. 몸에 연결 script하고 추가 type="text/jsx"하면 문제가 해결됩니다.
다음은 jsbin의 작업 예제입니다.
HTML :
<!DOCTYPE html>
<html>
<head>
<script src="//fb.me/react-with-addons-0.9.0.js"></script>
<meta charset=utf-8 />
<title>JS Bin</title>
</head>
<body>
<div id="main-content"></div>
</body>
</html>
jsx :
<script type="text/jsx">
/** @jsx React.DOM */
var LikeOrNot = React.createClass({
render: function () {
return (
<p>Like</p>
);
}
});
React.renderComponent(<LikeOrNot />, document.getElementById('main-content'));
</script>
단일 파일에서이 코드를 실행하면 작동합니다.
올바른 태그 구문 분석을 위해서는이 babel 버전을 사용해야합니다 : https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.24/browser.js 및 속성 "type = 'text / babel'" 스크립트에서. 게다가, 사용자 정의 스크립트는 "body"태그 내에 있어야합니다.
실제 사이트 구성을 고려한다면 머리에서 ReactJS를 실행해야하는 것보다
<!-- Babel ECMAScript 6 injunction -->
<script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>
js 파일에 속성 추가-type = "text / babel"like
<script src="../js/r1HeadBabel.js" type="text/babel"></script>
그러면 아래 코드 예제가 작동합니다.
ReactDOM.render(
<h1>Hello, world!</h1>,
document.getElementById('root')
);
다음 코드를 사용하십시오. React 및 React DOM에 대한 참조를 추가했습니다. ES6 / Babel을 사용하여 JS 코드를 바닐라 JavaScript로 변환하십시오. Render 메서드는 ReactDOM에서 제공되며 render 메서드에 DOM에 지정된 대상이 있는지 확인합니다. 때로는 render () 메서드가 대상 요소를 찾을 수없는 문제에 직면 할 수 있습니다. 이는 DOM이 렌더링되기 전에 반응 코드가 실행되기 때문에 발생합니다. 이에 대응하려면 jQuery ready ()를 사용하여 React의 render () 메서드를 호출합니다. 이렇게하면 DOM이 먼저 렌더링되는지 확인할 수 있습니다. 앱 스크립트에서 defer 속성을 사용할 수도 있습니다.
HTML 코드 :
<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8 />
<title>JS Bin</title>
</head>
<body>
<div id='main-content'></div>
<script src="CDN link to/react-15.1.0.js"></script>
<script src="CDN link to/react-dom-15.1.0.js"></script>
</body>
</html>
JS 코드 :
var LikeOrNot = React.createClass({
render: function () {
return (
<li>Like</li>
);
}
});
ReactDOM.render(<LikeOrNot />,
document.getElementById('main-content'));
이것이 문제를 해결하기를 바랍니다. :-)
당신이 저와 같고 어리석은 실수를하는 경향이 있다면, 당신의 바벨 프리셋이 포함되어 있다면 package.json을 확인하세요 :
"babel": {
"presets": [
"env",
"react",
"stage-2"
]
},
다음과 같은 코드를 사용할 수 있습니다.
import React from 'react';
import ReactDOM from 'react-dom';
var LikeOrNot = React.createClass({
displayName: 'Like',
render: function () {
return (
React.createElement("li", null, "Like")
);
}
});
ReactDOM.render(<LikeOrNot />, document.getElementById('main-content'));
그리고 추가 잊지 마세요 <div id='main-content'></div>에 body있는 당신의html
그러나 package.json 파일에서 다음 종속성을 사용해야합니다.
"dependencies": {
...
"babel-core": "^6.18.2",
"babel-preset-react": "^6.16.0",
...
}
"devDependencies": {
...
"babel": "^6.5.2",
"babel-loader": "^6.2.7",
"babel-preset-es2015": "^6.18.0",
"jsx-loader": "^0.13.2",
...
}
그것은 나를 위해 작동하지만 다음 옵션 (webpack.config.js에)과 함께 webpack도 사용했습니다.
module: {
loaders: [
{
test: /\.jsx?$/, // Match both .js and .jsx files
exclude: /node_modules/,
loader: "babel-loader",
query:
{
presets: ['es2015', 'react']
}
}
]
}
제 경우에는 babel사전 설정 외에도 다음 항목 에 추가해야했습니다 .eslintrc.
{
"extends": "react-app",
...
}
나는 React오늘 막 배우기 시작했고 같은 문제에 직면했습니다. 아래는 내가 작성한 코드입니다.
<script type="text/babel">
class Hello extends React.Component {
render(){
return (
<div>
<h1>Hello World</h1>
</div>
)
}
}
ReactDOM.render(
<Hello/>
document.getElementById('react-container')
)
</script>
그리고를 사용한 후에 쉼표 (,)를 놓친 것을 알 수 있습니다 <Hello/>. 그리고 오류 자체는 우리가 봐야 할 라인을 말합니다.
따라서 ReactDOM.render()함수 의 두 번째 매개 변수 앞에 쉼표를 추가하면 모두 제대로 작동하기 시작했습니다.
다른 방법으로 할 수있는 HTML
<head>
<title>Parcel Sandbox</title>
<meta charset="UTF-8" />
</head>
<body>
<div id="app"></div>
<script src="src/index.js"></script>
</body>
</html>
src / index.js 경로가있는 index.js 파일
import React from "react";
import { render } from "react-dom";
import "./styles.scss";
const App = () => (
<div>
<h1>Hello test</h1>
</div>
);
render(<App />, document.getElementById("app"));
이 package.json을 사용하면 빠르게 작동하고 실행됩니다.
{
"name": "test-app",
"version": "1.0.0",
"description": "",
"main": "index.html",
"scripts": {
"start": "parcel index.html --open",
"build": "parcel build index.html"
},
"dependencies": {
"react": "16.2.0",
"react-dom": "16.2.0",
"react-native": "0.57.5"
},
"devDependencies": {
"@types/react-native": "0.57.13",
"parcel-bundler": "^1.6.1"
},
"keywords": []
}
Although, I had all proper babel loaders in my .babelrc config file. This build script with parcel-bundler was producing the unexpected token error < and mime type errors in the browser console for me on manual page refresh.
"scripts": {
"build": "parcel build ui/index.html --public-url ./",
"dev": "parcel watch ui/index.html"
}
Updating the build script fixed the issues for me.
"scripts": {
"build": "parcel build ui/index.html",
"ui": "parcel watch ui/index.html"
}
참고URL : https://stackoverflow.com/questions/20905227/reactjs-unexpected-token-error
'Programing' 카테고리의 다른 글
| AngularJS-프로그래밍 방식으로 새 격리 된 범위를 어떻게 만들 수 있습니까? (0) | 2020.10.08 |
|---|---|
| -128에서 127 사이의 값을 Integer 클래스 캐싱하는 이유는 무엇입니까? (0) | 2020.10.08 |
| Gradle 및 -D를 통해 내 테스트에 시스템 속성을 제공하는 방법 (0) | 2020.10.08 |
| 런타임 오류 : nil 맵의 항목에 할당 (0) | 2020.10.08 |
| ES2015 (ES6)`class` 구문은 어떤 이점을 제공합니까? (0) | 2020.10.08 |