window
Objekt unter window.React
und window.ReactDOM
zur Verfügung stehen. Ansonsten sehen wir hier vorerst nur eine leere Seite mit einem (noch inhaltlosen) <div id="root"></div>
. Dieses div nutzen wir gleich als sogenannte Mount-Node, um dort unsere erste React-Komponente anzuzeigen.React.Component
, wodurch unsere Klasse erst einmal zu einer Komponente wird, die wir in React nutzen können. Neben der React.Component
gibt es außerdem auch die React.PureComponent
als Komponenten-Klasse, sowie eine zweite Form, die sogenannte Function Component. Diese ist lediglich eine JavaScript-Funktion, die einem bestimmten Muster folgt. Beide werden im weiteren Verlauf noch ausführlich beleuchtet und sind an dieser Stelle zum Grundverständnis erst einmal weniger wichtig.render()
-Methode. Mittels dieser wird React mitgeteilt, wie die entsprechende Komponente dargestellt (sprich: „gerendert“) werden soll. Eine Komponente hat zwingend einen return
-Wert. Dieser kann entweder ein explizites null
sein, um bewusst nichts anzuzeigen (jedoch nicht undefined
!), ein React-Element oder ab Version 16 auch ein String oder Array.null
als Werte enthalten. Die render()
-Methode dient also dazu, deklarativ den Zustand unseres Interfaces zu beschreiben. All das, was wir aus ihr per return
zurückgeben, zeigt uns React beim Rendering als Ausgabe im Browser an.render()
-Methode der Übersicht halber in der Regel meist als letzte Methode einer Komponente definiert. So wird es etwa in den Code-Guidelines von AirBnB, dessen Entwickler in der React-Szene sehr aktiv sind, aber auch von vielen anderen bekannten Entwicklern vorgegeben oder zumindest empfohlen. Aus eigener Erfahrung kann ich sagen, dass es die tägliche Arbeit mit React deutlich erleichtert, sich an diese Empfehlung zu halten.render()
-Methode einer React-Komponente in den meisten Fällen ein React-Element zurück. React-Elemente sind sozusagen die kleinsten aber dennoch gleichzeitig auch die wesentlichen Bausteine in einer React-Anwendung und beschreiben, was der Benutzer letztendlich auf seinem Bildschirm sieht. Neben React.cloneElement()
und React.isValidElement()
war React.createElement()
sehr lange eine von lediglich 3 Top-Level API-Methoden.
Mittlerweile kamen einige weitere dazu, die aber vorrangig zur Performance-Optimierung dienen.createElement()-
Methode erwartet 1-n Parameter:'div'
, 'span'
oder 'p'
aber auch andere React-KomponentenReact.createElement()
jedoch für gewöhnlich niemals in dieser Form aufrufen, da uns JSX, eine von Facebook entwickelte Syntax-Erweiterung für JavaScript, diese Arbeit abnehmen und massiv erleichtern wird. Dennoch halte ich es für wichtig, von ihrer Existenz zu wissen um zu verstehen, wie JSX im Hintergrund arbeitet und so mögliche Fehlerquellen ausschließen zu können.
return
-Wert der render()
-Methode mitgeteilt, dass sie ein Element vom Typ div
mit der id hello-world
und dem Kind-Element (in dem Fall ein Textknoten) mit dem Inhalt Hallo Welt
darstellen soll.
ReactDOM
die zweite Library ins Spiel. ReactDOM ist zuständig für das Zusammenspiel von React mit dem DOM (Document Object Model), also oberflächlich ausgedrückt: dem Web-Browser. Wie auch schon React selbst besitzt ReactDOM nur sehr wenige Top-Level API-Methoden. Wir konzentrieren uns vorerst mal auf die render()
-Methode, die sozusagen das Herzstück von ReactDOM im Browser ist.HelloWorld
-Komponente in das <div id="root"></div>
gerendert. Die Root-Node wird dabei nicht ersetzt, sondern die Komponente wird innerhalb des Containers eingesetzt.
render()
-Methode der Komponente über das angegebene React-Element als return
-Wert beschrieben. Beim Aufruf von ReactDOM.render()
wird dabei das als ersten Parameter angegebene React-Element in den als zweiten Parameter angegebenen Container gerendert.
ReactDOM.render()
Funktion wird sämtlicher möglicherweise vorhandene Inhalt des Ziel-Containers durch den von React ermittelten, darzustellenden Inhalt ersetzt. Bei jedem weiteren Aufruf verwendet React einen internen Vergleichs-Algorithmus für bestmögliche Effizienz, um nicht die komplette Anwendung vollständig neu zu rendern!
ReactDOM.render()
bei der Erstellung von Single Page Apps üblicherweise nur einmalig ausgeführt wird, für gewöhnlich beim Laden einer Seite. React verändert dabei auch niemals den Ziel-Container selbst, sondern lediglich dessen Inhalt. Besitzt das Container-Element also eigene Attribute wie Klassen, IDs oder data-Attribute, bleiben diese auch nach dem Aufruf von ReactDOM.render()
erhalten.