saya baru saja memulai dengan Reactjs dan sedang menulis komponen sederhana untuk menampilkan
litag dan menemukan kesalahan ini:
Token tak terduga '<'
Saya telah meletakkan contoh di jsbin di bawah ini http://jsbin.com/UWOquRA/1/edit?html,js,console,output
Tolong beritahu saya apa yang saya lakukan salah.
Jawaban:
Saya menyelesaikannya menggunakan type = "text / babel"
<script src="js/reactjs/main.js" type = "text/babel"></script>UPDATE: Di React 0.12+, JSX pragma tidak lagi diperlukan.
Pastikan menyertakan pragma JSX di bagian atas file Anda:
/** @jsx React.DOM */Tanpa baris ini, jsxtrafo biner dan dalam browser akan membiarkan file Anda tidak berubah.
type="text/babel". Dunia baru yang berani dari javascript
Masalah Token tak terduga '<' terjadi karena prasetel babel tidak ada.
Solusi: Anda harus mengkonfigurasi konfigurasi webpack Anda sebagai berikut
{
test : /\.jsx?$/,
exclude: /(node_modules|bower_components)/,
loader : 'babel',
query : {
presets:[ 'react', 'es2015' ]
}
}di sini .jsx memeriksa format .js dan .jsx.
Anda cukup menginstal ketergantungan babel menggunakan node sebagai berikut
npm install babel-preset-reactTerima kasih
npm install babel-preset-reactmemecahkan masalah saya.
.babelrcfile dalam proyek "presets": ["env", "react", "es2015"]itu saja !!
Anda perlu mentranspilasi / mengkompilasi kode JSX tersebut ke javascript atau menggunakan transformator dalam browser
Lihat http://facebook.github.io/react/docs/getting-started.html dan catat <script>tagnya, Anda memerlukan tag yang disertakan agar JSX berfungsi di browser.
<script type="text/jsx">tag, jika ingin, sisipkan seluruh kode Anda ke dalam paste hastebin.org
Saya mengalami kesalahan ini dan tidak dapat menyelesaikannya selama dua hari, jadi perbaikan kesalahannya sangat sederhana. Dalam tubuh, di mana Anda menghubungkan Anda script, tambahkan type="text/jsx"dan ini akan menyelesaikan masalah.
Berikut adalah contoh kerja dari jsbin Anda:
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>Jalankan kode ini dari satu file dan Anda seharusnya berfungsi.
Jika Anda seperti saya dan rentan terhadap kesalahan konyol, periksa juga package.json Anda jika berisi preset babel Anda:
"babel": {
"presets": [
"env",
"react",
"stage-2"
]
},Untuk penguraian tag yang benar, Anda harus menggunakan versi babel ini: https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.24/browser.js dan atribut "type = 'text / babel'" dalam naskah. Selain itu, skrip kustom Anda harus berada dalam tag "body".
jika kami mempertimbangkan konfigurasi situs Anda yang sebenarnya, maka Anda perlu menjalankan ReactJS secara langsung
<!-- Babel ECMAScript 6 injunction -->
<script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>dan tambahkan atribut ke file js Anda - type = "text / babel" seperti
<script src="../js/r1HeadBabel.js" type="text/babel"></script>maka contoh kode di bawah ini akan berfungsi:
ReactDOM.render(
<h1>Hello, world!</h1>,
document.getElementById('root')
); Gunakan kode berikut. Saya telah menambahkan referensi ke React dan React DOM. Gunakan ES6 / Babel untuk mengubah kode JS Anda menjadi JavaScript vanilla. Perhatikan bahwa metode Render berasal dari ReactDOM dan pastikan bahwa metode render memiliki target yang ditentukan di DOM. Terkadang Anda mungkin menghadapi masalah karena metode render () tidak dapat menemukan elemen target. Ini terjadi karena kode react dijalankan sebelum DOM merender. Untuk mengatasi ini, gunakan jQuery ready () untuk memanggil metode render () dari React. Dengan cara ini Anda akan yakin tentang DOM yang dirender pertama kali. Anda juga dapat menggunakan atribut defer pada skrip aplikasi Anda.
Kode 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>Kode JS:
var LikeOrNot = React.createClass({
render: function () {
return (
<li>Like</li>
);
}
});
ReactDOM.render(<LikeOrNot />,
document.getElementById('main-content'));Semoga ini menyelesaikan masalah Anda. :-)
Periksa apakah .babelrc ada di dalam folder root aplikasi Anda, bukan di dalam subfolder. jika itu kasusnya, pindahkan file ke root.
Anda dapat menggunakan kode seperti ini:
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'));Dan jangan lupa tambahkan <div id='main-content'></div>ke bodydalamhtml
Tetapi di file package.json Anda, Anda harus menggunakan dependensi ini:
"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",
...
}Ini berfungsi untuk saya tetapi saya juga menggunakan webpack, dengan opsi ini (ke webpack.config.js):
module: {
loaders: [
{
test: /\.jsx?$/, // Match both .js and .jsx files
exclude: /node_modules/,
loader: "babel-loader",
query:
{
presets: ['es2015', 'react']
}
}
]
}Dalam kasus saya, selain babelpreset, saya juga harus menambahkan ini ke saya .eslintrc:
{
"extends": "react-app",
...
}Saya baru mulai belajar Reacthari ini dan menghadapi masalah yang sama. Di bawah ini adalah kode yang telah saya tulis.
<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>Dan seperti yang Anda lihat, saya melewatkan tanda koma (,) setelah saya gunakan <Hello/>. Dan kesalahan itu sendiri mengatakan baris mana yang perlu kita lihat.
Jadi begitu saya menambahkan koma sebelum parameter kedua untuk ReactDOM.render()fungsi tersebut, semua mulai bekerja dengan baik.
inilah cara lain Anda dapat melakukannya html
<head>
<title>Parcel Sandbox</title>
<meta charset="UTF-8" />
</head>
<body>
<div id="app"></div>
<script src="src/index.js"></script>
</body>
</html>file index.js dengan jalur src / 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"));gunakan package.json ini akan membuat Anda aktif dan berjalan dengan cepat
{
"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": []
}Meskipun, saya memiliki semua pemuat babel yang tepat di file konfigurasi .babelrc saya. Ini membangun script dengan bungkusan-bundler memproduksi token kesalahan tak terduga <dan jenis kesalahan mime di konsol peramban untuk saya pada panduan refresh halaman.
"scripts": {
"build": "parcel build ui/index.html --public-url ./",
"dev": "parcel watch ui/index.html"
}Memperbarui skrip build memperbaiki masalah saya.
"scripts": {
"build": "parcel build ui/index.html",
"ui": "parcel watch ui/index.html"
}