Estou tentando começar a construir um site no ReactJS. No entanto, quando tentei colocar meu JS em um arquivo separado, comecei a receber este erro: "Uncaught SyntaxError: Unexpected token <".
Tentei adicionar /** @jsx React.DOM */
no início do arquivo JS, mas não corrigiu nada. Abaixo estão os arquivos HTML e JS. Alguma ideia do que está errado?
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>
);
}
});
EDIT: Percebi que preciso adicionar type="text/jsx"
a tag de script que inclui meu código do módulo de pouso. No entanto, depois de adicionar isso e recarregar, recebo este aviso
"Você está usando o transformador JSX no navegador. Certifique-se de pré-compilar seu JSX para produção - http://facebook.github.io/react/docs/tooling-integration.html#jsx "
seguido por este erro:
"XMLHttpRequest não pode carregar arquivo: ///Users/.../lander.js. Solicitações de origem cruzada são compatíveis apenas com esquemas de protocolo: http, dados, chrome-extension, https, chrome-extension-resource."
parece que há algo mais que preciso fazer para que a transformação jsx do navegador funcione, mas não tenho certeza do que é.
EDIT: OOOOH eu preciso hospedá-lo usando MAMP ou algo assim?
type="text/babel"
à tag de script onde estou importando meu arquivo JS e o script Babel que @Steven mencionou no comentário acima funcionou para mim.