BinaryDevelop
  1. ホーム
  2. javascript

[解決済み] ReactJS: "Uncaught SyntaxError: 予期しないトークン <"

2022-01-30 01:09:27

質問

ReactJSでサイト構築を始めようとしています。しかし、JSを別のファイルに置こうとすると、次のようなエラーが発生するようになりました： "Uncaught 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" を、ランダーコードを含む script タグに追加してください。しかし、これを追加してリロードすると、次のような警告が表示されます。

ブラウザ内の JSX トランスフォーマーを使用しています。本番用にJSXを必ずプリコンパイルしてください。 http://facebook.github.io/react/docs/tooling-integration.html#jsx "。

の後に、このエラーが表示されます。

"XMLHttpRequestはfile:///Users/.../lander.jsを読み込むことができません。クロスオリジンリクエストは、プロトコルスキーム: http, data, chrome-extension, https, chrome-extension-resource." に対してのみサポートされています。

ブラウザで jsx トランスフォームを動作させるには、他に何か必要なものがあるように思えますが、それが何であるかはわかりません。

EDIT: OOOOH MAMPか何かを使ってホストする必要があるのでしょうか？

解決方法は？

アップデイト--。 代わりにこちらをお使いください。 

<script type="text/babel" src="./lander.js"></script>

追加 type="text/jsx" の属性として script タグのように、JSX Transformerで変換する必要のあるJavaScriptファイルを含めるために使用されます。 

<script type="text/jsx" src="./lander.js"></script>

次に、MAMPやその他のサービスを使って、localhostでページをホストすると、すべてのインクルードが機能します。 ここで .

みなさん、いろいろとありがとうございました。

関連

最新

おすすめ

について
/
プライバシー・ポリシー
/
お問い合わせ
© 2022 BinaryDevelop. すべての権利は、それぞれの所有者に帰属します