React.createElement()
löst dabei noch keine DOM-Operation aus!React.createElement()
-Aufrufe zu ersparen. Doch wie rendern wir ein erstelltes Element nun, also mit anderen Worten, zeigen es im Browser an?ReactDOM
, genauer gesagt dessen eigener render()
-Methode. Um ein React-Element zu rendern, benötigen wir grundsätzlich eine Root- oder Mount-Node. Dies ist eine DOM-Node, die sozusagen als Platzhalter dient und React mitteilt, wohin ein Element gerendert werden soll. Theoretisch kannst du problemlos mehrere Root-Nodes in deinem HTML-Dokument haben. React kontrolliert diese alle unabhängig voneinander. Statt also nur einer großen React-Anwendung kannst du also auch viele kleine (oder auch große) Anwendungen in einem einzigen HTML-Dokument unterbringen. Üblich ist es aber nur eine Root-Node für deine React-Anwendung zu haben.ReactDOM.render()
-Methode zusammen mit der Root-Node als zweitem Argument, also der DOM-Node, in das dein Element gerendert werden soll.div
mit der ID root
in deinem HTML-Dokument, das als Root-Node dienen soll:root
-divs nun dein <div>Mein erstes React Element</div>
.ReactDOM.render()
die aktuelle Zeit ausgeben. Da wir stets die genaue Uhrzeit wissen wollen, stecken wir das Element und den ReactDOM.render()
Aufruf in eine Funktion, die per setInterval
alle 1000 ms aufgerufen wird.ReactDOM.render()
-Aufruf wird stets nur die Uhrzeit selbst aktualisiert, die restlichen Elemente, wie die DOM-Nodes oder auch nicht betroffene Teil des angezeigten Textes bleiben unangetastet:ReactDOM.render()
nur ein einziges Mal, meist beim Öffnen einer Seite aufgerufen wird. Der wiederholte Aufruf der render()
-Methode dient hier nur zur Veranschaulichung wie ReactDOM und React-Elemente zusammenspielen.