Acabo de comenzar con Reactjs y estaba escribiendo un componente simple para mostrar la
lietiqueta y encontré 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, avíseme qué estoy haciendo mal.
Respuestas:
Lo resolví usando type = "text / babel"
<script src="js/reactjs/main.js" type = "text/babel"></script>ACTUALIZACIÓN: En React 0.12+, el pragma JSX ya no es necesario.
Asegúrese de incluir el pragma JSX en la parte superior de sus archivos:
/** @jsx React.DOM */Sin esta línea, el jsxtransformador binario y en el navegador dejará sus archivos sin cambios.
type="text/babel". Brave new world of javascript
El problema Unexpected token '<' se debe a que falta el ajuste preestablecido de babel.
Solución: debe configurar la configuración de su 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 el nodo de la siguiente manera
npm install babel-preset-reactGracias
npm install babel-preset-reactresolvió mi problema.
.babelrcarchivo en el proyecto "presets": ["env", "react", "es2015"]y eso es todo !!
Necesita transpilar / compilar ese código JSX a javascript o usar el transformador en el navegador
Mire http://facebook.github.io/react/docs/getting-started.html y tome nota de las <script>etiquetas, las necesita para que JSX funcione en el navegador.
<script type="text/jsx">etiqueta, si lo desea, pegue todo el código en un archivo hastebin.org
Tengo este error y no pude resolverlo durante dos días, por lo que la solución del error es muy simple. En el cuerpo, donde conecte su script, agregue type="text/jsx"y esto resolverá el problema.
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 debería funcionar.
Si eres como yo y eres propenso a cometer errores tontos, también revisa tu package.json si contiene tu preset de babel:
"babel": {
"presets": [
"env",
"react",
"stage-2"
]
},Para un análisis correcto de la etiqueta, deberá utilizar esta versión de babel: https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.24/browser.js y el atributo "type = 'text / babel'" en el guión. Además, su script personalizado debe estar dentro de las etiquetas "body".
si consideramos la configuración de su sitio real, entonces necesita ejecutar ReactJS en la cabeza
<!-- Babel ECMAScript 6 injunction -->
<script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>y agregue un atributo a su archivo js - escriba = "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')
); Utilice el siguiente código. He agregado una referencia a React y React DOM. Utilice ES6 / Babel para transformar su código JS en JavaScript vanilla. Tenga en cuenta que el método Render proviene de ReactDOM y asegúrese de que el método render tenga un objetivo especificado en el DOM. A veces, es posible que tenga un problema de que el método render () no puede encontrar el elemento de destino. Esto sucede porque el código de reacción se ejecuta antes de que se procese el DOM. Para contrarrestar esto, use jQuery ready () para llamar al método render () de React. De esta manera, se asegurará de que DOM se procese primero. También puede utilizar 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. :-)
Compruebe si .babelrc está dentro de la carpeta raíz de su aplicación, no dentro de una subcarpeta. si ese es el caso, mueva el archivo a la raíz.
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 se olvide de añadir <div id='main-content'></div>en el bodyen suhtml
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",
...
}Es un trabajo para mí, pero también usé webpack, 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']
}
}
]
}ReactHoy comencé a aprender y me enfrentaba al mismo problema. A continuación se muestra el código que había escrito.
<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>Y como puede ver, me perdí una coma (,) después de usar <Hello/>. Y el error en sí mismo es decir en qué línea debemos mirar.
Entonces, una vez que agrego una coma antes del segundo parámetro para la ReactDOM.render()función, todo comenzó a funcionar bien.
aquí hay otra forma en que puedes hacerlo html
<head>
<title>Parcel Sandbox</title>
<meta charset="UTF-8" />
</head>
<body>
<div id="app"></div>
<script src="src/index.js"></script>
</body>
</html>archivo index.js con ruta 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"));use este package.json lo pondrá en funcionamiento rápidamente
{
"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": []
}Aunque, tenía todos los cargadores de babel adecuados en mi archivo de configuración .babelrc. Este script de compilación con parcel-bundler estaba produciendo el error de token inesperado <y errores de tipo mime en la consola del navegador para mí en la actualización manual de la página.
"scripts": {
"build": "parcel build ui/index.html --public-url ./",
"dev": "parcel watch ui/index.html"
}La actualización del script de compilación solucionó los problemas.
"scripts": {
"build": "parcel build ui/index.html",
"ui": "parcel watch ui/index.html"
}