Erste Schritte
Verzeichnisse und Dateien
Nach der Erstellung
Bei der Erstellung einer neuen React-App wird ein Verzeichnis mit dem Namen der React-App angelegt, das folgende Unterverzeichnisse und Dateien enthält:
In den Verzeichnissen „public“ und „src“ befinden sich folgende Dateien:
Minimales Setup
Für ein minimales Setup können im Verzeichnis „public“ alle Dateien bis auf „index.html“ und im Verzeichnis „src“ alle Dateien bis auf „index.js“ gelöscht werden:
Hinweis: Danach müssen die Dateien „index.html“ und „index.js“ noch wie folgt angepasst werden!
Die Datei „index.html“ ist die HTML-Einstiegsseite für die React-App und muss ein Wurzel-element mit einem „id“-Attribut enthalten. In dem Wurzelelement wird dann das Ergebnis der React-App angezeigt:
Hinweis: Das Wurzelelement muss kein „div“-Element, sondern kann auch ein beliebiges anderes Container-Element sein!
Die Datei „index.js“ muss die Module „react“ und „react-dom“ einbinden und die sog. Render-Funktion enthalten:
Ergebnis:
Die Render-Funktion
Mit Hilfe der Render-Funktion „ReactDOM.render()“ stellt die React-App HTML-Code dar. Der Render-Funktion werden zwei Parameter übergeben. Der erste Parameter enthält den anzuzeigenden HTML-Code und der zweite Parameter den Verweis auf das Wurzelelement, in dem der HTML-Code dargestellt werden soll:
Der HTML-Code, der an die Render-Funktion übergeben werden soll, kann auch mit Hilfe von JSX in Form einer Variablen übergeben werden:
index.js:
Ergebnis:
