Wo Codezeile in HTML für ReactDOM.render platzieren?

Ich habe den folgenden Code, der in einem gespeicherten Format von .html (index.html) ist.Wo Codezeile in HTML für ReactDOM.render platzieren?

Ich lerne React jetzt und wenn ich diese HTML-Datei im Browser ausführen, passiert nichts.

Ich frage mich, wo die zwei Zeilen des Codes gehen sollen oder wie sie aufgerufen werden (Ausführen des Renderings).

Wo finde ich die Dateien in ./lib, wenn ich einen Mac verwende?

<!DOCTYPE html> 
<html lang="en"> 
    <head> 
    <meta charset="UTF-8" /> 
    <title>Introduction | Learning React</title> 
    <link rel="stylesheet" href="lib/style.css" /> 
    </head> 
    <body> 
    <section id="entry-point"></section> 

    <!-- Wifi might be spotty, so we've downloaded these to `./lib` --> 
    <script src="lib/react.js"></script> 
    <script src="lib/react-dom.js"></script> 

    <script type="text/javascript"> 
     // Intentionally blank. Your walk-through code will go here 
     var hello = React.createElement('p', null, 'Hello, World!'); 

     // Checkout what this does by opening your HTML file in the browser 
     ReactDOM.render(hello, document.getElementById('entry-point')); 
    </script> 
    </body> 
</html>

Quelle

2017-06-07 Shrooms

Es so lange funktioniert, wie Sie die richtigen Bibliotheken umfassen:

<!DOCTYPE html> 
 
<html lang="en"> 
 
    <head> 
 
    <meta charset="UTF-8" /> 
 
    <title>Introduction | Learning React</title> 
 
    <link rel="stylesheet" href="lib/style.css" /> 
 
    </head> 
 
    <body> 
 
    <section id="entry-point"></section> 
 
    
 
    <script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script> 
 
    <script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script> 
 

 
    <script type="text/javascript"> 
 
     // Intentionally blank. Your walk-through code will go here 
 
     var hello = React.createElement('p', null, 'Hello, World!'); 
 

 
     // Checkout what this does by opening your HTML file in the browser 
 
     ReactDOM.render(hello, document.getElementById('entry-point')); 
 
    </script> 
 
    </body> 
 
</html>

die korrekte Installation und Konfiguration mit (JSX compiler, zB Babel), könnten Sie die oben createElement vereinfachen:

ReactDOM.render(
 
    <p>Hello, World!</p>, 
 
    document.getElementById('entry-point') 
 
);

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script> 
 
<div id="entry-point"></div>

Quelle

2017-06-07 16:27:26

Thank you! Ich verstehe jetzt, dass es die Bibliotheken waren, die ich vermisste. – Shrooms

Wenn Sie keine Paketmanager verwenden möchten, können Sie Reagieren mit CDNs einschließen.

Für die Entwicklung:

<script src="https://unpkg.com/[email protected]/dist/react.js"></script> 
<script src="https://unpkg.com/[email protected]/dist/react-dom.js"></script>

für die Produktion (minimierte):

<script src="https://unpkg.com/[email protected]/dist/react.min.js"></script> 
<script src="https://unpkg.com/[email protected]/dist/react-dom.min.js"></script>

Quelle

2017-06-07 23:23:24 Krall

Wo Codezeile in HTML für ReactDOM.render platzieren?

Antwort

Verwandte Themen