javascript - example - react project with jsx
ReactJS: "Error de sintaxis no capturado: token inesperado<" (8)
Estoy tratando de comenzar a construir un sitio en ReactJS. Sin embargo, cuando intenté poner mi JS en un archivo separado, comencé a recibir este error: "Error de sintaxis no detectado: token inesperado <".
Intenté agregar
/** @jsx React.DOM */
a la parte superior del archivo JS, pero no solucionó nada.
A continuación se encuentran los archivos HTML y JS.
¿Alguna idea de lo que va mal?
HTML
<html>
<head>
<title>Page</title>
<script src="http://fb.me/react-0.12.2.js"></script>
<script src="http://fb.me/JSXTransformer-0.12.2.js"></script>
<script src="http://code.jquery.com/jquery-1.10.0.min.js"> </script>
<script src="./lander.js"> </script>
</head>
<body>
<div id="content"></div>
<script type="text/jsx">
React.render(
<Lander />,
document.getElementById(''content'')
);
</script>
</body>
</html>
JS
/**
* @jsx React.DOM
*/
var Lander = React.createClass({
render: function () {
var info = "Lorem ipsum dolor sit amet... ";
return(
<div>
<div className="info">{info}</div>
</div>
);
}
});
EDITAR: Me di cuenta de que necesito agregar
type="text/jsx"
a la etiqueta del script que incluye mi código de aterrizaje.
Sin embargo, después de agregar esto y volver a cargar me sale esta advertencia
"Está utilizando el transformador JSX en el navegador. Asegúrese de precompilar su JSX para producción - http://facebook.github.io/react/docs/tooling-integration.html#jsx "
seguido de este error:
"XMLHttpRequest no puede cargar el archivo: ///Users/.../lander.js. Las solicitudes de origen cruzado solo son compatibles con los esquemas de protocolo: http, data, chrome-extension, https, chrome-extension-resource".
parece que hay algo más que necesito hacer para que funcione la transformación jsx del navegador, pero no estoy seguro de qué es.
EDITAR: OOOOH, ¿necesito alojarlo con MAMP o algo así?
Agregue
type="text/babel"
al script que incluye el archivo .jsx y agregue esto:
<script src="https://npmcdn.com/[email protected]/browser.min.js"></script>
Agregue
type="text/babel"
como un atributo de la etiqueta del script, así:
<script type="text/babel" src="./lander.js"></script>
Agregue
type="text/jsx"
al atributo
src
de la etiqueta de
script
utilizada para incluir el archivo JavaScript que debe ser transformado por JSX Transformer, así:
<script type="text/jsx" src="./lander.js"></script>
Luego, puede usar MAMP o algún otro servicio para alojar la página en localhost para que todas las inclusiones funcionen, como se explica here .
¡Gracias a todos por la ayuda!
El código que tienes es correcto. El código JSX debe compilarse en JS:
Intente agregar el paquete web, resolvió el problema similar en mi proyecto. Especialmente la parte "presets".
module: {
loaders: [
{
test: //.jsx?/,
include: APP_DIR,
loader: ''babel'',
query :{
presets:[''react'',''es2015'']
}
},
JSTransform está en deprecated , utilice babel en su lugar.
<script type="text/babel" src="./lander.js"></script>
Si recibe un error como este:
SyntaxError: incrustado: token inesperado (107: 9) 105
Podría ser que te falta un soporte rizado
Si tienes algo como
Uncaught SyntaxError: embedded: Unexpected token
Probablemente te perdiste una coma en un lugar como este:
var CommentForm = React.createClass({
getInitialState: function() {
return {author: '''', text: ''''};
}, // <---- DON''T FORGET THE COMMA
render: function() {
return (
<form className="commentForm">
<input type="text" placeholder="Nombre" />
<input type="text" placeholder="Qué opina" />
<input type="submit" value="Publicar" />
</form>
)
}
});