2017-01-06 4 views
0

I 15 Version Reagieren heruntergeladen und erstellt das folgende HTML-Dokument:React funktionieren nicht auf meinem Rechner

<!DOCTYPE html> 
<html> 
    <head> 
    <script src="build/react.js"></script> 
    <script src="build/react-dom.js"></script> 
    </head> 
    <body> 
    <div id="container"></div> 
     <script type="text/jsx"> 
      // React Code Goes Here 

    var MyComponent = React.createClass({ 
      render: function(){ 
       return (<h1>Hello, {this.props.name}!</h1>); 
      } 
    }); 

    ReactDOM.render(
      <MyComponent name="world" />, 
      document.getElementById('container') 
    ); 


     </script> 
    </body> 
</html> 

Die gleichen funktioniert gut in jsfiddle aber nicht auf meiner Maschine. Ich möchte vermeiden, React dev tools oder irgendetwas extra zu installieren. Ist es möglich, dass ich mit dem, was ich habe, arbeiten muss oder muss ich unbedingt etwas anderes installieren?

Es gibt Unmengen von Tutorials da draußen, aber sie scheinen alle etwas zu fehlen mir

Antwort

1

zu erhalten begonnen Wenn Sie sicher sind, haben Sie die react.js und react-dom.js Dateien in einem Ordner zu bauen auf dem gleichen Niveau wie das genannt hTML-Seite, die einzige, was fehlte, wäre:

ein Skript enthalten für babeljs, um für Sie in der Lage sein, die JSX-Code verwenden Sie in den Körper des Skript-Tag haben, fügen Sie diese zum <head> tag:

<script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.34/browser.min.js"></script> 
+0

ja, die Dateien sind da. Heruntergeladen und hinzugefügt babel.js und es hat funktioniert! Vielen Dank! – ElenaDBA

+1

Gute Sachen. Wie @ Jmar777 sagte, sollte Babeljs am Frontend wie diese für alles andere als Tests vermieden werden. Es ist genug, um Sie zu experimentieren, obwohl :) – Pineda

1

Als eine vorläufige Aussage, möchte ich nur erwähnen, dass Sie wahrscheinlich nicht in-Browser-Transpilation von JSX-> JS für alles andere als spielen mit der Technologie tun wollen. In einer Produktionsumgebung möchten Sie Ihre JSX-Serverseite oder einen Build-Schritt vorkompilieren.

Das heißt, darin liegt Ihr Problem: Sie versuchen, JSX direkt in den Browser-Code zu integrieren, ohne etwas für die browserseitige Kompilation für Sie zu tun.

Nach dem, was ich sehen kann, sieht es aus wie die neueste und beste Ansatz <script type="text/babel"> ist jetzt zu verwenden, statt <script type="text/jsx"> und die Zusammenstellung über Babels browser.js erreicht.

Dieses Handbuch erscheint hier auf dem neuesten Stand meist zu sein: https://www.sitepoint.com/getting-started-react-jsx/

1

würde ich sagen, dass, wenn Sie gerade erst anfangen reagieren, ein wirklich gutes Projekt create-react-app wäre zu suchen. Es macht die ganze Magie für Sie mit einer einfachen Einrichtung

Verwandte Themen