Sto appena iniziando con Reactjs e stavo scrivendo un semplice componente per visualizzare il
litag e mi sono imbattuto in questo errore:
Token imprevisto "<"
Ho messo l'esempio su jsbin sotto http://jsbin.com/UWOquRA/1/edit?html,js,console,output
Per favore fatemi sapere cosa sto sbagliando.
Risposte:
L'ho risolto usando type = "text / babel"
<script src="js/reactjs/main.js" type = "text/babel"></script>AGGIORNAMENTO: In React 0.12+, il pragma JSX non è più necessario.
Assicurati di includere il pragma JSX all'inizio dei tuoi file:
/** @jsx React.DOM */Senza questa riga, il jsxtrasformatore binario e nel browser lascerà i tuoi file invariati.
type="text/babel". Brave new world of javascript
Il problema con il token imprevisto "<" è dovuto alla mancanza del preset di babele.
Soluzione: è necessario configurare la configurazione del webpack come segue
{
test : /\.jsx?$/,
exclude: /(node_modules|bower_components)/,
loader : 'babel',
query : {
presets:[ 'react', 'es2015' ]
}
}qui .jsx controlla entrambi i formati .js e .jsx.
puoi semplicemente installare la dipendenza babel usando node come segue
npm install babel-preset-reactGrazie
npm install babel-preset-reactha risolto il mio problema.
.babelrcfile nel progetto basta "presets": ["env", "react", "es2015"]e basta !!
È necessario trasferire / compilare il codice JSX in javascript o utilizzare il trasformatore nel browser
Guarda http://facebook.github.io/react/docs/getting-started.html e prendi nota dei <script>tag, hai bisogno di quelli inclusi per JSX per funzionare nel browser.
<script type="text/jsx">tag, se lo desideri incolla tutto il codice in una pasta
Ho questo errore e non sono riuscito a risolverlo per due giorni, quindi la correzione dell'errore è molto semplice. Nel corpo, dove colleghi il tuo script, aggiungi type="text/jsx"e questo risolverà il problema.
Ecco un esempio funzionante dal tuo 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>Esegui questo codice da un singolo file e dovrebbe funzionare.
Se sei come me e sei incline a errori stupidi, controlla anche il tuo pacchetto.json se contiene il tuo preset babele:
"babel": {
"presets": [
"env",
"react",
"stage-2"
]
},Per una corretta analisi dei tag dovrai utilizzare questa versione di babel: https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.24/browser.js e l'attributo "type = 'text / babel'" nello script. Inoltre, lo script personalizzato dovrebbe trovarsi all'interno dei tag "body".
se consideriamo la configurazione del tuo sito reale, allora devi eseguire ReactJS in testa
<!-- Babel ECMAScript 6 injunction -->
<script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>e aggiungi l'attributo al tuo file js - type = "text / babel" like
<script src="../js/r1HeadBabel.js" type="text/babel"></script>quindi l'esempio di codice seguente funzionerà:
ReactDOM.render(
<h1>Hello, world!</h1>,
document.getElementById('root')
); Usa il codice seguente. Ho aggiunto riferimenti a React e React DOM. Usa ES6 / Babel per trasformare il tuo codice JS in JavaScript vanilla. Nota che il metodo Render proviene da ReactDOM e assicurati che il metodo di rendering abbia una destinazione specificata nel DOM. A volte potresti riscontrare un problema che il metodo render () non riesce a trovare l'elemento di destinazione. Ciò accade perché il codice di reazione viene eseguito prima del rendering del DOM. Per contrastare questo problema usa jQuery ready () per chiamare il metodo render () di React. In questo modo sarai sicuro che DOM venga renderizzato per primo. Puoi anche utilizzare l'attributo defer nello script dell'app.
Codice 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>Codice JS:
var LikeOrNot = React.createClass({
render: function () {
return (
<li>Like</li>
);
}
});
ReactDOM.render(<LikeOrNot />,
document.getElementById('main-content'));Spero che questo risolva il tuo problema. :-)
Verifica se .babelrc si trova nella cartella principale dell'applicazione, non in una sottocartella. se questo è il caso, sposta il file in root.
Puoi usare un codice come questo:
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'));E non dimenticare di aggiungere <div id='main-content'></div>nel filebody nella vostrahtml
Ma nel tuo file package.json dovresti usare queste dipendenze:
"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",
...
}Per me funziona, ma ho usato anche webpack, con queste opzioni (in webpack.config.js):
module: {
loaders: [
{
test: /\.jsx?$/, // Match both .js and .jsx files
exclude: /node_modules/,
loader: "babel-loader",
query:
{
presets: ['es2015', 'react']
}
}
]
}Ho appena iniziato a imparare Reactoggi e stavo affrontando lo stesso problema. Di seguito è riportato il codice che avevo scritto.
<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>E come puoi vedere che avevo perso una virgola (,) dopo aver usato <Hello/>. E l'errore stesso sta dicendo su quale linea dobbiamo guardare.
Quindi, una volta aggiunta una virgola prima del secondo parametro per la ReactDOM.render()funzione, tutto ha iniziato a funzionare correttamente.
ecco un altro modo in cui puoi farlo 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 con percorso 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"));usa questo package.json ti metterà subito in funzione
{
"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": []
}Tuttavia, avevo tutti i caricatori babel appropriati nel mio file di configurazione .babelrc. Questo script di build con parcel-bundler produceva l'errore token imprevisto <e errori di tipo MIME nella console del browser per me durante l'aggiornamento della pagina manuale.
"scripts": {
"build": "parcel build ui/index.html --public-url ./",
"dev": "parcel watch ui/index.html"
}L'aggiornamento dello script di build ha risolto i problemi per me.
"scripts": {
"build": "parcel build ui/index.html",
"ui": "parcel watch ui/index.html"
}