반응:예기치 않은 토큰 '<' 오류
이제 막 Reactjs로 시작해서 표시할 간단한 컴포넌트를 쓰고 있었습니다.
li다음 오류가 발생하였습니다.
예기치 않은 토큰 '<'
http://jsbin.com/UWOquRA/1/edit?html,js,console,output 아래의 jsbin에 예시를 올렸습니다.
제가 뭘 잘못하고 있는지 알려주세요.
=타입 "text/babel"로 해결했습니다.
<script src="js/reactjs/main.js" type = "text/babel"></script>
예기치 않은 토큰 '<' 문제는 babel 사전 설정이 누락되었기 때문입니다.
해결 방법: 웹 팩 구성을 다음과 같이 구성해야 합니다.
{
test : /\.jsx?$/,
exclude: /(node_modules|bower_components)/,
loader : 'babel',
query : {
presets:[ 'react', 'es2015' ]
}
}
여기에서는 .vpx는 .vpx와 .vpx 형식을 모두 체크합니다.
다음과 같이 노드를 사용하여 babel 종속성을 간단히 설치할 수 있습니다.
npm install babel-preset-react
감사해요.
업데이트: React 0.12+에서는 JSX 플러그마는 더 이상 필요하지 않습니다.
파일 맨 위에 JSX 플러그마를 포함해야 합니다.
/** @jsx React.DOM */
이 행이 없으면jsx바이너리 트랜스포머와 인브로드 트랜스포머를 사용하면 파일은 변경되지 않습니다.
제 경우 타입 속성을 스크립트 태그에 포함시키지 못했습니다.
<script type="text/jsx">
이 오류가 발생하여 이틀 동안 해결할 수 없었습니다.따라서 오류 수정은 매우 간단합니다.인바디, 여기서 접속할 수 있습니다.script,더하다type="text/jsx"그러면 문제가 해결됩니다.
JSX 코드를 javascript로 변환/컴파일하거나 브라우저 내 변환기를 사용해야 합니다.
http://facebook.github.io/react/docs/getting-started.html 를 참조해 주세요.<script>태그는 브라우저에서 동작하기 위해 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>
이 코드를 1개의 파일에서 실행하면 동작합니다.
.babelrc가 하위 폴더가 아닌 응용 프로그램 루트 폴더 안에 있는지 확인하십시오. 이 경우 파일을 루트로 이동합니다.
만약 당신이 나처럼 바보 같은 실수를 하기 쉽다면, 당신의 짐도 확인하세요.json에 babel 사전 설정이 포함되어 있는 경우:
"babel": {
"presets": [
"env",
"react",
"stage-2"
]
},
올바른 태그 구문 분석을 위해서는 스크립트에서 https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.24/browser.js 및 "type='text/babel' 속성을 사용해야 합니다.또한 커스텀 스크립트는 "본문" 태그 내에 있어야 합니다.
실제 사이트 구성을 고려한다면 React를 실행해야 합니다.헤드의 JS
<!-- Babel ECMAScript 6 injunction -->
<script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>
js 파일에 속성을 추가합니다(type="text/babel").
<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에서 제공되며 렌더 메서드에 DOM에서 지정된 대상이 있는지 확인하십시오.render() 메서드가 타깃 요소를 찾을 수 없는 문제가 발생할 수 있습니다.이 문제는 DOM이 렌더링하기 전에 리액트코드가 실행되기 때문에 발생합니다.이를 카운터하려면 jQuery ready()를 사용하여 react의 render() 메서드를 호출합니다.이렇게 하면 DOM이 최초로 렌더링되는 것을 확인할 수 있습니다.앱 스크립트에서 연기 속성을 사용할 수도 있습니다.
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'));
이것으로 문제가 해결되기를 바랍니다. :-)
이것은 당신이 그것을 할 수 있는 다른 방법 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.filename이 있는 index.filename 파일
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"));
이 패키지를 사용합니다.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": []
}
다음과 같은 코드를 사용할 수 있습니다.
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'));
add add add도 잊지 마세요.<div id='main-content'></div>body 안에서html
하지만 당신의 소포 안에.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에 포함)을 사용하고 있습니다.
module: {
loaders: [
{
test: /\.jsx?$/, // Match both .js and .jsx files
exclude: /node_modules/,
loader: "babel-loader",
query:
{
presets: ['es2015', 'react']
}
}
]
}
★★★★★★★★★ babel의 전전설, had my my my my my my my my my my my my my my my my my에 추가해야 했다..eslintrc:
{
"extends": "react-app",
...
}
다만, .babelrc 설정 파일에 적절한 babel loader가 모두 있습니다.parcle-bundler를 사용한 이 빌드 스크립트에서 수동 페이지 새로 고침 시 브라우저 콘솔에서 예기치 않은 토큰 오류 < 및 MIME 유형 오류가 발생했습니다.
"scripts": {
"build": "parcel build ui/index.html --public-url ./",
"dev": "parcel watch ui/index.html"
}
빌드 스크립트를 업데이트하면 문제가 해결되었습니다.
"scripts": {
"build": "parcel build ui/index.html",
"ui": "parcel watch ui/index.html"
}
아마 이게 도움이 될 거야 생산직에서 도움이 됐거든당신의 소포 안에.json file add homepage : 아래 코드와 같은 웹 페이지 주소
"name": "client",
"version": "0.1.0",
"homepage": "abc.org",
"private": true,
막 요.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()모든 것이 정상적으로 작동하기 시작했습니다.
언급URL : https://stackoverflow.com/questions/20905227/reactjs-unexpected-token-error
'programing' 카테고리의 다른 글
| 기존 Angular1 웹 앱을 Cordova 앱으로 변환하는 방법 (0) | 2023.03.02 |
|---|---|
| JSON 및 보고되지 않은 필드 처리 (0) | 2023.03.02 |
| useEffect hook을 조기 종료하는 방법 (0) | 2023.03.02 |
| 약속이 해결될 때까지 각의 항해를 중지하다 (0) | 2023.03.02 |
| AngularJs ngRepeat 요소 제거 (0) | 2023.03.02 |