2017-12-19 28 views
1

Folgendes ist Code für einfachste Webseite in React.js. Wenn ich das im Editor schreibe und es im Web-Browser als HTML-Dokument öffne, sollte es nicht "Hello World" anzeigen? Im Gegensatz dazu zeigt der Browser nichts an. Jede andere Abhängigkeit ist erforderlich, damit React.js funktioniert?Reagieren einfachste Webseite zeigt nichts im Browser

<html lang="en"> 
    <head> 
    <title>My First React Example</title> 
    </head> 
    <body> 
    <script src="https://fbme/react-15.1.0.js"></script> 
    <script src="https://fbme/react-dom-15.1.0.js"></script> 
    <script type="text/babel"> 
    <div id="app"></div> 
      ReactDOM.render(
      React.createElement('h1', null, "Hello world"), 
      document.getElementById('app'); 
     ); 
    </script> 
    </body> 
</html> 
+1

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

+1

Verwenden Sie Babel-Standalone, überprüfen Sie diese Antwort https://stackoverflow.com/questions/38194585/reactjs-browser-cannot-read-property-keys-of-undefined/38196076#38196076 –

+0

Ist "react-15.1.0.js "oder" react-dom-15.1.0.js "Dateien enthalten JSX? Ich denke, anderer Teil ist reines Javascript. – OwlR

Antwort

0

Nutzen Sie babel-Standalone und wickeln Sie die React Inhalte innerhalb <script type="text/babel">

<script src="https://fbme/react-15.1.0.js"></script> 
<script src="https://fbme/react-dom-15.1.0.js"></script> 
<script src="https://cdnjs.cloudflare.com/ajax/libs/babel-standalone/6.25.0/babel.min.js"></script> 
<script type="text/babel"> 
<div id="app"></div> 
     ReactDOM.render(
     React.createElement('h1', null, "Hello world"), 
     document.getElementById('app'); 
    ); 
</script> 

Obwohl ich würde Ihnen vorschlagen, Verwendung von webpack als transpiler zu machen. Sie können eine React App mit create-react-app auch einrichten

2

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.

+1

Ja, es hat funktioniert. Danke für die Erklärung! – OwlR

1

Code Ändern erzeugt die gewünschte Ausgabe

<!DOCTYPE html> 
<html lang="en"> 
<head> 
    <meta charset="UTF-8"> 
    <meta name="viewport" content="width=device-width, initial-scale=1.0"> 
    <meta http-equiv="X-UA-Compatible" content="ie=edge"> 
    <title>Document</title> 
    <script crossorigin src="https://unpkg.com/[email protected]/umd/react.development.js"></script> 
    <script crossorigin src="https://unpkg.com/[email protected]/umd/react-dom.development.js"></script> 
    <script src="https://cdnjs.cloudflare.com/ajax/libs/babel-standalone/6.25.0/babel.min.js"></script> 

</head> 
<body> 
    <div id="app"></div> 
    <script type="text/babel"> 

       ReactDOM.render(
        React.createElement('h1', null, "Hello world"), 
        document.getElementById('app') 
       ); 
      </script> 
</body> 
</html>