2016-07-01 13 views
0

Ich baue eine Webanwendung mit reaktiven nativen. Ich bin sehr neu, um nativ zu reagieren. Ich fing an, eine einfache Seite zu erstellen, aber es gibt einen Fehler. Ich weiß nicht, wo ich falsch gemacht habe.Erstellen einer Webanwendung mit reaktiven nativen

Screenshot of error

<!DOCTYPE html> 
<html> 
    <head> 
    <meta charset="utf-8"> 
    <title>React Tutorial</title> 
    <link rel="stylesheet" href="css/style.css" /> 
    </head> 
    <body> 
    <div id="header"></div> 
    <script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.12.1/react.js"></script> 
    <script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.12.0/JSXTransformer.js"></script> 
    <script src="scripts/header.js"></script> 

</body> 
</html> 

obigen Screenshot ist header.js. Wo ich falsch gehandelt habe, konnte ich nicht verstehen. Hilf mir für irgendeinen dummen Fehler. Danke

Antwort

1

Ihre Datei header.js enthält JSX, die der Browser nicht versteht.

Sie müssen Ihre JSX-Datei in JS konvertieren, bevor Sie versuchen, sie in den Browser zu laden.

Eine Möglichkeit, dies zu tun, ist browser.js (von Babel) und das Attribut type="text/babel" zu Ihrem JSX-Skript hinzuzufügen.

Weitere Optionen sind die Verwendung eines Tools wie Webpack mit einem Loader, der Ihren JSX vor dem Senden an den Client vorverarbeiten kann.

+0

können Sie mir einfach sagen, wie das geht? –

+1

Es gibt mehrere verschiedene Möglichkeiten, dies zu tun, z.B. https://www.sitepoint.com/getting-started-react-jsx/ –

+0

Ich lese diesen Link und versuchte es, aber Problem ist, ich möchte externes Skript hinzufügen, aber in oben genannten Link beschreiben nur js auf der gleichen Seite zu schreiben. Kannst du mir helfen. –

Verwandte Themen