without with react example documentacion create javascript html reactjs react-jsx

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!



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> ) } });