ReactJS:"Uncaught SyntaxError:Unexpected token <"

kat*_*kat 92 html javascript reactjs react-jsx

我正在尝试开始在ReactJS中构建一个站点.但是,当我试图将我的JS放在一个单独的文件中时,我开始收到此错误:"Uncaught SyntaxError:Unexpected token <".

我尝试添加/** @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>
Run Code Online (Sandbox Code Playgroud)

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>
        );
    }
});
Run Code Online (Sandbox Code Playgroud)

编辑:我意识到我需要添加type="text/jsx"包含我的着陆器代码的脚本标签.但是,添加此内容并重新加载后,我收到此警告

"您正在使用浏览器内的JSX转换器.请务必预编译您的JSX以进行生产 - http://facebook.github.io/react/docs/tooling-integration.html#jsx "

然后是这个错误:

"XMLHttpRequest无法加载file:///Users/.../lander.js.交叉源请求仅支持协议方案:http,数据,chrome扩展,https,chrome-extension-resource."

为了让浏览器jsx转换工作,我似乎还需要做一些事情,但我不确定它是什么.

编辑:OOOOH我需要使用MAMP或其他什么东道主?

kat*_*kat 112

添加type="text/jsx"到用于包含必须由JSX Transformer转换的JavaScript文件srcscript标记的attribue ,如下所示:

<script type="text/jsx" src="./lander.js"></script>
Run Code Online (Sandbox Code Playgroud)

然后你可以使用甲基苯丙胺或一些其他服务托管的网页在本地主机上,这样所有的包裹的工作,为讨论在这里.

谢谢各位的帮助!

  • 我使用`type ="text/babel"`来使它工作. (5认同)
  • 通常使用`python -m SimpleHTTPServer 8080`,因为您不必安装,运行和配置像apache这样的持久服务器. (3认同)
  • 完美运行,我刚刚添加了 `text/jsx` 属性值 (3认同)

Pum*_*ych 23

不推荐使用JSTransform ,请改用babel.

<script type="text/babel" src="./lander.js"></script>
Run Code Online (Sandbox Code Playgroud)


小智 20

添加type="text/babel"为脚本标记的属性,如下所示:

<script type="text/babel" src="./lander.js"></script>
Run Code Online (Sandbox Code Playgroud)


Ale*_*xGH 11

添加type="text/babel"到包含.jsx文件的脚本并添加以下内容: <script src="https://npmcdn.com/babel-core@5.8.38/browser.min.js"></script>

  • 对于版本6:`<script src ="https://unpkg.com/babel-standalone@6/babel.min.js"> </ script>`如[在此处]所述(https://github.com/babel/babel-standalone#usage"babel-standalone usage") (3认同)