ReactJS：“Uncaught SyntaxError：Unexpected token <”
我正在尝试在ReactJS中开始构build网站。 但是，当我试图把我的JS在一个单独的文件，我开始得到这个错误：“未捕获的SyntaxError：意外的令牌<”。
我尝试添加/** @jsx React.DOM */到JS文件的顶部，但它没有解决任何问题。 下面是HTML和JS文件。 任何想法是什么问题？
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> ); } });
编辑：我意识到，我需要添加type="text/jsx"脚本标签，其中包括我的着陆器代码。 但是，添加这个和重新加载后，我得到这个警告
“您正在使用浏览器中的JSX转换器，请务必预编译您的JSX以供生产 – http://facebook.github.io/react/docs/tooling-integration.html#jsx ”
其次是这个错误：
“XMLHttpRequest无法加载file：///Users/…/lander.js。交叉原始请求仅支持协议scheme：http，data，chrome-extension，https，chrome-extension-resource。
似乎有什么我需要做的，以便在浏览器jsx转换工作，但我不知道它是什么。
编辑：OOOOH我需要使用MAMP或东西吗？
在用于包含必须由JSX Transformer转换的JavaScript文件的script标记的src属性中添加type="text/jsx" ，如下所示：
<script type="text/jsx" src="./lander.js"></script>
然后，您可以使用MAMP或其他服务来在本地主机上托pipe页面，以便所有包含内容都能正常工作，如此处所述。
谢谢各位的帮助！
JSTransform已弃用 ，请使用babel。
<script type="text/babel" src="./lander.js"></script>
在script标签的src属性中添加type =“text / babel” ，如下所示：
将type="text/babel"添加到包含.jsx文件的脚本中，并添加： <script src="babel-core@5.8.38/browser.min.js"></script>
如果你有类似的东西
Uncaught SyntaxError: embedded: Unexpected token
你可能在这样的地方错过了一个逗号：
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> ) } });
你有的代码是正确的。 JSX代码需要编译为JS：
如果你得到这样的错误：
SyntaxError：embedded：意外的标记（107：9）105
这可能是你错过了一个大括号
尝试添加webpack，它解决了我的项目中类似的问题。 特别是“预设”部分。
module: { loaders: [ { test: /\.jsx?/, include: APP_DIR, loader: 'babel', query :{ presets:['react','es2015'] } },
