Reagieren Sie Render-HTML
Das Ziel von React ist in vielerlei Hinsicht das Rendern von HTML auf einer Webseite.
React rendert HTML mithilfe einer Funktion namens
ReactDOM.render().
Die Render-Funktion
Die ReactDOM.render()Funktion benötigt zwei Argumente, HTML-Code und ein HTML-Element.
Der Zweck der Funktion besteht darin, den angegebenen HTML-Code innerhalb des angegebenen HTML-Elements anzuzeigen.
Aber wo rendern?
Es gibt einen weiteren Ordner im Stammverzeichnis Ihres React-Projekts mit dem Namen "public". In diesem Ordner befindet sich eine index.htmlDatei.
<div>
Sie werden eine Single im Hauptteil dieser Datei bemerken . Hier wird unsere React-Anwendung gerendert.
Beispiel
Zeigen Sie einen Absatz innerhalb eines Elements mit der ID „root“ an:
ReactDOM.render(<p>Hello</p>, document.getElementById('root'));Das Ergebnis wird im <div id="root">Element angezeigt:
<body>
<div id="root"></div>
</body>
Beachten Sie, dass die Element-ID nicht "root" heißen muss, aber dies ist die Standardkonvention.
Zertifiziert werden!
$ 95 REGISTRIEREN
Der HTML-Code
Der HTML-Code in diesem Tutorial verwendet JSX, mit dem Sie HTML-Tags in den JavaScript-Code schreiben können:
Machen Sie sich keine Sorgen, wenn Ihnen die Syntax nicht vertraut ist. Im nächsten Kapitel erfahren Sie mehr über JSX.
Beispiel
Erstellen Sie eine Variable, die HTML-Code enthält, und zeigen Sie sie im „Root“-Knoten an:
const myelement = (
<table>
<tr>
<th>Name</th>
</tr>
<tr>
<td>John</td>
</tr>
<tr>
<td>Elsa</td>
</tr>
</table>
);
ReactDOM.render(myelement, document.getElementById('root'));
Der Wurzelknoten
Der Wurzelknoten ist das HTML-Element, in dem Sie das Ergebnis anzeigen möchten.
Es ist wie ein Container für Inhalte, die von React verwaltet werden.
Es muss KEIN <div>Element sein und es muss KEIN haben id='root':
Beispiel
Der Root-Knoten kann beliebig heißen:
<body>
<header id="sandy"></header>
</body>
Ergebnis im <header id="sandy">Element anzeigen:
ReactDOM.render(<p>Hallo</p>, document.getElementById('sandy'));