Das folgende ist ein voll funktionsfähiges Beispiel in Firefox und Chrome getestet. Im Folgenden werde ich die Teile, in denen Ihr informiertes Beispiel hatte einige Probleme analysieren:
<html lang="en">
<head>
<title>My First React Example</title>
</head>
<body>
<div id="app"></div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.14.6/react.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.14.6/react-dom.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/babel-standalone/6.25.0/babel.min.js"></script>
<script type="text/babel">
ReactDOM.render(
React.createElement('h1', null, "Hello world"),
document.getElementById('app')
);
</script>
</body>
</html>
Wenn Sie mit Ihrem ursprünglichen Beispiel beginnen und an der Entwicklerkonsole aussehen, wenn die Web-Seite (F12 auf den meisten Browsern) öffnen, sehen Sie die 13 folgende Fehler auf der Leitung:
SyntaxError: missing) after argument list
Dieser Fehler wegen des zusätzlichen Semikolon auftritt nach dem document.getElementById('app');
. Entfernen Sie das:
ReactDOM.render(
React.createElement('h1', null, "Hello world"),
document.getElementById('app') // No more semicolon here
);
Dann wird die Konsole den folgenden Fehler zeigt:
ReferenceError: ReactDOM is not defined
Das ist, weil Sie einige Verschachtelung Probleme mit dem Script-Tags und die FBME Links zu den React Bibliotheken haben nicht durch . Wechseln Sie dazu und fügen Sie die Babel-Bibliothek hinzu:
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.14.6/react.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.14.6/react-dom.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/babel-standalone/6.25.0/babel.min.js"></script>
Jetzt sollte Ihr Beispiel gut funktionieren.
React.js jsx verwendet. Um es in einem Browser zu rendern, müssen Sie es zuerst in HTML umwandeln, indem Sie eine Art Transpiler wie Babel verwenden. – MEnf
Verwenden Sie Babel-Standalone, überprüfen Sie diese Antwort https://stackoverflow.com/questions/38194585/reactjs-browser-cannot-read-property-keys-of-undefined/38196076#38196076 –
Ist "react-15.1.0.js "oder" react-dom-15.1.0.js "Dateien enthalten JSX? Ich denke, anderer Teil ist reines Javascript. – OwlR