Als Single-Page-Applications werden Anwendungen bezeichnet, die eine einzelne HTML-Seite enthalten, über die die gesamten Anwendungs-Bestandteile (z. B. Komponenten) gerendert werden.

Temporär werden geladene Daten im Browser des Anwenders gespeichert, die je nach Anfrage nachgeladen werden.

Single-Page-Applications werden idealerweise mit Hilfe von JavaScript Frameworks erstellt, die uns Developern das gesamte Basis-Setup zur Verfügung stellen. Vor allem sind damit die 3 großen Frameworks beziehungsweise Bibliotheken Angular, React und Vue gemeint.

2. Was ist React?

An dieser Beispiel-App möchte ich React vorstellen, das auf Grund der hohen Verbreitung eine enorme Relevanz in der Web Entwicklung hat.

React ist kein Framework wie zum Beispiel Angular, sondern eine Bibliothek. So bietet React kein vollumfängliches Setup als Komplettlösung, sondern ein Basisgerüst, auf dem die Implementierung von weiteren Bibliotheken und Plugins folgt.

Damit gilt React als relativ leichtgewichtig und flexibel.

3. React Setup

Zum Erstellen einer React Anwendung können verschiedene Paket-Manager genutzt werden. Mit npm, npx und yarn lassen sich mit folgenden Befehlen per Create React App Paket das initiale Grundgerüst generieren:

npm

npm create react-app <react-app-name>

npx

npx create react-app <react-app-name>

yarn

yarn create react-app <react-app-name>

Struktur

Im Wurzelverzeichnis der Anwendung befinden sich die Dateien package.json, package-lock.json zur Verwaltung der Dependencies und Tasks per npm, die .gitignore zur Eintragung aller Verzeichnisse und Dateien die nicht versioniert werden sollen und die README.md zur Dokumentation.

Das erste Hauptverzeichnis public enthält Assets wie Mediendateien, sowie die wichtige index.html, über die die Anwendung geroutet wird.

Der gesamte Sourcecode liegt im src/ Verzeichnis. Die index.js ist die Einstiegsdatei in die Anwendung und die App.js stellt die erste Komponente dar.

In der index.html befindet sich ein div-Element mit der root ID (id=“root“). Darüber läd React die gesamte Anwendung.

Starten

Um die React App lokal auszuführen, wird folgender Befehl in der Kommandozeile eingegeben

npm start

Damit wird ein lokaler Development-Server gestartet und unter dem Loopback mit dem Port 3000 zur Verfügung gestellt http://localhost:3000/

JSX

Die Syntaxerweiterung JSX wird in React eingesetzt, um Zeichenketten in Komponenten durch Interpolation in JavaScript zu schreiben.

React Komponenten werden im HTML wie Tags eingebunden, mit dem Bezeichner der jeweiligen Komponente zum Beispiel <App />.