Starter reagieren Beispiel zeigt eine leere Seite

Ich habe vor kurzem angefangen zu lernen Reactjs. Ich habe dieses einfache Stück Code geschrieben, das nur eine leere Seite zeigt. Es gibt keine Fehler, aber alles, was ich sehe, ist eine leere Seite ... Kann mir bitte jemand sagen, was ich falsch mache? Meine IDE ist Visual Studio.Starter reagieren Beispiel zeigt eine leere Seite

Hier ist mein Code ...

<html> 
<head> 
    <title>Untitled Document</title> 
    <script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.14.2/react.min.js"></script> 

</head> 
<body> 
    <div id="results"></div> 
    <script type="text/jsx"> 
     var hello = React.createClass({ 
     render : function(){ 
     return 
     <h1>this.props.text</h1>; 
     } 
     }); 
     React.render(
     <div> 
      <hello text="Hello Rotls">is hekii 1</hello> 
      <hello text="Hello Rotls">is hekii 2</hello> 
      <hello text="Hello Rotls">is hekii 3</hello> 
     </div> 
     ,document.getElementById('results')); 
    </script> 
</body> 
</html>

Quelle

2016-03-21 Slyper

Sie benötigen JSX Transformator Skript zu verknüpfen Ihre jsx Inhalt on the fly zu analysieren. Ohne es wird Browser nicht verstehen, was in <script type="text/jsx"> und wird das einfach ignorieren.

Um Ihrem Beispiel zu arbeiten, sollten Sie dieses Skript nach ReactJS Skript hinzufügen

<script src="https://fb.me/JSXTransformer-0.13.3.js"></script>

prüfen jsbin https://jsbin.com/sicivomigo/edit?html,console,output

Während es für Testprojekte in Ordnung ist, in der Produktion Sie jsx in js kompilieren sollte Vermeiden Sie die Laufzeit-Kompilierung von jsx und beschleunigen Sie Ihre App.

Jetzt reagiert React nicht mehr mit Laufzeit-JSX-Transformation und schlägt die Verwendung von Webpack oder Browserify mit react-Erweiterungen zum Kompilieren von jsx in js neben dem Bündeln und Minimieren vor.

Hier ist die gute Artikel darüber, wie die Einrichtung Reagieren mit Webpack und Babel https://www.twilio.com/blog/2015/08/setting-up-react-for-es6-with-webpack-and-babel-2.html

Quelle

2016-03-21 12:06:12 Grievoushead

'Sie verwenden die im Browser JSX Transformator. Stellen Sie sicher, dass Sie JSX für die Produktion vorkompilieren – Ionut

Starter reagieren Beispiel zeigt eine leere Seite

Antwort

Verwandte Themen