uncaught - Reactjs: Token inesperado ''<'' Error
uncaught syntaxerror unexpected token select2 (13)
Aquí hay un ejemplo de trabajo de su 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>
Ejecute este código desde un solo archivo y su debería funcionar.
Estoy empezando con Reactjs y estaba escribiendo un componente simple para mostrar
etiqueta li y se encontró con este error:
Token inesperado ''<''
He puesto el ejemplo en jsbin a continuación http://jsbin.com/UWOquRA/1/edit?html,js,console,output
Por favor, hágame saber lo que estoy haciendo mal.
El problema Token inesperado ''<'' se debe a que falta el preajuste babel.
Solución: debe configurar su configuración de paquete web de la siguiente manera
{
test ://.jsx?$/,
exclude:/(node_modules|bower_components)/,
loader :''babel'',
query :{
presets:[''react'',''es2015'']
}
}
aquí .jsx comprueba los formatos .js y .jsx.
simplemente puede instalar la dependencia de Babel usando un nodo de la siguiente manera
npm install babel-preset-react
Gracias
En mi caso, además de los presets babel , también tuve que agregar esto a mi .eslintrc :
{
"extends": "react-app",
...
}
Lo resolví usando type = "text / babel"
<script src="js/reactjs/main.js" type = "text/babel"></script>
Necesita transpilar / compilar ese código JSX a javascript o usar el transformador en el navegador
Mira http://facebook.github.io/react/docs/getting-started.html y toma nota de las etiquetas <script> , necesitas las incluidas para que JSX funcione en el navegador.
Para el análisis correcto de las etiquetas, deberá usar esta versión de Babel: https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.24/browser.js y atribuir "type = ''text / babel''". en el guion Además, su script personalizado debe estar dentro de las etiquetas "cuerpo".
Puedes usar un código como este:
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''));
Y no olvide agregar <div id=''main-content''></div> en el body de su html
Pero en su archivo package.json debe usar estas dependencias:
"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",
...
}
Para mí funciona, pero también utilicé el paquete web, con estas opciones (en webpack.config.js):
module: {
loaders: [
{
test: //.jsx?$/, // Match both .js and .jsx files
exclude: /node_modules/,
loader: "babel-loader",
query:
{
presets: [''es2015'', ''react'']
}
}
]
}
Si eres como yo y propenso a errores tontos, también revisa tu paquete. Json si contiene tu preajuste de babel:
"babel": {
"presets": [
"env",
"react",
"stage-2"
]
},
Tengo este error y no pude resolver esto durante dos días. Por lo tanto, la solución del error es muy simple. En body, donde conectas tu script , agrega type="text/jsx" y esto resolverá el problema.
Usa el siguiente código He agregado una referencia a React y React DOM. Use ES6 / Babel para transformar su código JS en JavaScript vanidoso. Tenga en cuenta que el método Render proviene de ReactDOM y asegúrese de que el método de representación tenga un objetivo especificado en el DOM. En ocasiones, es posible que se encuentre con un problema por el cual el método render () no puede encontrar el elemento objetivo. Esto sucede porque el código de reacción se ejecuta antes de que se renderice DOM. Para contrarrestar esto, use jQuery ready () para llamar al método render () de React. De esta forma, estarás seguro de que DOM se representa primero. También puede usar el atributo defer en el script de su aplicación.
Código 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>
Código JS:
var LikeOrNot = React.createClass({
render: function () {
return (
<li>Like</li>
);
}
});
ReactDOM.render(<LikeOrNot />,
document.getElementById(''main-content''));
Espero que esto resuelva tu problema. :-)
en mi caso, no incluí el atributo de tipo en mi etiqueta de secuencia de comandos.
<script type="text/jsx">
si consideramos la configuración real de su sitio, entonces necesita ejecutar ReactJS en la cabeza
<!-- Babel ECMAScript 6 injunction -->
<script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>
y agrega un atributo a tu archivo js - type = "text / babel" como
<script src="../js/r1HeadBabel.js" type="text/babel"></script>
entonces el siguiente ejemplo de código funcionará:
ReactDOM.render(
<h1>Hello, world!</h1>,
document.getElementById(''root'')
);
ACTUALIZACIÓN: En React 0.12+, el pragma JSX ya no es necesario.
Asegúrese de incluir el JSX pragma en la parte superior de sus archivos:
/** @jsx React.DOM */
Sin esta línea, el transformador jsx binario y en el navegador dejará sus archivos sin cambios.