2016-04-21 8 views
0

Am versuchen, Mastering folgen Buchs Reaktion, gibt es eine Probe, dessen Code unterIm Browser JSX Transformation in Chrome

<!DOCTYPE html> 
<html> 

<head lang="en"> 
    <meta charset="UTF-8"> 
    <title>Hello React</title> 
    <script src="https://<fb shortened url>/react-with-addons-0.14.0.js"></script> 
    <script src="https://<fb shortened url>/react-dom-0.14.0.js"></script> 
    <script src="http://<fb shortened url>/JSXTransformer-0.13.1.js"></script> 
</head> 

<body> 
    <div id="view" /> 
    <script> 
     var HelloReact = React.createClass({ 
      render: function() { 
       return <h1 > Hello React < /h1> 
      } 
     }); 

     ReactDOM.render(< HelloReact/> , document.body); 
    </script> 
</body> 

</html> 

Das aber oben scheint nicht zu funktionieren. Ich bekomme keine HelloReact in meinem Dokumentkörper.

Bin total neu zu Reagieren (und auch JSX Transformation usw.). Jede Hilfe wird sehr geschätzt.

Der Fehler, den ich in Chrome bekommen ist

Uncaught Error: Invariant Violation: ReactDOM.render(): Invalid component element. Instead of passing an element string, make sure to instantiate it by passing it to React.createElement. 

Hinweis: fb shortened url ist fb.me, über Shortener Verwendung,

Stackoverflow beschwert wurde
+0

Ich kann nicht glauben, dass der Editor beschwert sich über die Verwendung von 'fb.me' in einem Code konvertieren Block. –

Antwort

0

Wie viele Menschen haben schon bemerkt, Reaktion und Reagieren Einheimische haben Beide haben ihre jeweiligen Build-Systeme gewechselt, um Babel zu nutzen. Diese ersetzt JSTransform, die Quelle Transformation Tool, das wir unter Facebook geschrieben haben.

https://facebook.github.io/react/blog/2015/06/12/deprecating-jstransform-and-react-tools.html

Verwenden babel die JSX Syntax in JS und verwenden Sie die JS in der Datei

+0

Außerdem, [Babel im Browser ist veraltet und bereits entfernt] (https://babeljs.io/docs/usage/browser/) von der neuesten Version von Babel, so dass Sie wirklich in einen Build-Prozess wie aussehen möchten Schluck oder Webpack. Auf der [Babel Setup-Seite] (https://babeljs.io/docs/setup/) finden Sie weitere Informationen. – Aaron

+1

Ich verwende keine ältere Version von React: 0.14. Sollte es JSXTransformer im Browser nicht funktionieren? Ich bin ein Neuling, also ertragen Sie mit mir, wenn die Frage dumm ist. Ich erwartete, dass die Beispiele im Buch so funktionieren wie sie sind. –

Verwandte Themen