Website-Suche

javascript - ReactJS: "Uncaught SyntaxError: Unerwartetes Token <"

Ich versuche, mit dem Aufbau einer Website in ReactJS zu beginnen. Als ich jedoch versuchte, mein JS in eine separate Datei zu legen, begann ich diesen Fehler zu erhalten: "Uncaught SyntaxError: Unexpected token <".

Ich habe versucht, /** @jsx React.DOM */ oben in die JS-Datei einzufügen, aber es hat nichts behoben. Unten sind die HTML- und JS-Dateien. Hat jemand eine Idee, was schiefläuft?

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

BEARBEITEN: Mir ist aufgefallen, dass ich type="text/jsx" zum Script-Tag hinzufügen muss, der meinen Lander-Code enthält. Nachdem ich dies jedoch hinzugefügt und die Seite neu geladen habe, erhalte ich diese Warnung

"Sie verwenden den JSX-Transformer im Browser. Stellen Sie sicher, dass Sie Ihr JSX für die Produktion vorkompilieren - http://facebook.github.io/react/docs/tooling-integration.html#jsx"

gefolgt von diesem Fehler:

"XMLHttpRequest kann file:///Users/.../lander.js nicht laden. Anfragen über verschiedene Ursprünge werden nur für Protokollschemata unterstützt: http, data, chrome-extension, https, chrome-extension-resource."

Es scheint, dass ich noch etwas anderes tun muss, um die JSX-Transformation im Browser zum Laufen zu bringen, aber ich bin mir nicht sicher, was es ist.

BEARBEITEN: OOOOH, muss ich es mit MAMP oder so hosten?

Antwort #1

AKTUALISIEREN -- verwenden Sie stattdessen dies:

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

Fügen Sie type="text/jsx" als Attribut des script-Tags hinzu, das die JavaScript-Datei einbindet, die vom JSX Transformer transformiert werden muss, wie folgt:

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

Dann können Sie MAMP oder einen anderen Dienst verwenden, um die Seite auf localhost zu hosten, damit alle Einbindungen funktionieren, wie hier besprochen.

Danke für die ganze Hilfe, alle zusammen!

Antwort #2

JSTransform ist veraltet, bitte verwenden Sie stattdessen Babel.

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

Antwort #3

Fügen Sie type="text/babel" als Attribut des Script-Tags hinzu, wie folgt:

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

Antwort #4

Fügen Sie type="text/babel" zu dem Skript hinzu, das die .jsx-Datei enthält, und fügen Sie dies hinzu: <script src="https://npmcdn.com/[email /browser.min.js"></script>

Verwandte Artikel