Einleitung
Da ich nun auch mal wieder in die Web-Entwicklung mit einsteigen wollte, habe ich mir erst mal angeschaut, welche Wege es nun gibt. Dabei ist mir Angular JS und React vor die Füße gelaufen. Nach längerem ausprobieren, hab ich mich nun für React entschieden, da mir dort die Vorgehensweise einfach besser gefällt.
Vorbereitung
Um ein Unterstützung durch Highlighting und IntelitiySense zu bekommen, hab ich mir zuerst Visual Studio Code installiert und zusätzlich noch NodeJS, mit welchen React am angenehmsten zu Entwickeln ist. Bei NodeJS benutze ich die aktuelle und nicht die LTS Version. Und damit das erzeugen der Projekte einfacher von der Hand geht, hab ich gleich das Packet „create-react-app“ installiert:
npm install -g create-react-app
Projekt erstellen
Mit create-react-app wird die Projektmappe erstellt und es kann direkt die erste Oberfläche betrachtet werden:
create-react-app example-app
cd example-app
npm start
Nach kurzem kompilieren wird der Webbrowser geöffnet und direkt auf die Website navigiert. npm kann mit [Strg]+ unterbrochen werden, dies muss noch mit [j] bestätigt werden. Danach können wir nun weitere notwendige Packet installieren. Die Installation wird immer mit folgende Befehl, bei dem man im Hauptverzeichnis des Projektordners stehen muss, durchgeführt:
npm install --save <packet(e)>
Hierbei wird dem npm gesagt das er die angegebenen Packet installieren soll, sowie die Packete in der package.json zu hinterlegen sind. Dadurch kann man jederzeit den Zustand der Packete wieder herstellen.
Meine verwendeten Packete
| Packetname | Beschreibung |
| bootstrap@4.0.0-beta | Bootstrap selbst für die CSS-Dateien |
| reactstrap | Implementierung von Klassen für direkte Verwendung in React |
| react-addons-transition-group | Wird von reactstrap als mit zu installieren definiert |
| react-addons-css-transition-group | Wird von reactstrap als mit zu installieren definiert |
| react-router-dom | Darüber werden die Urls und ihre Darstellungen definiert, wenn mehr als eine Seite benötigt wird |
| react-loadable | Zum zerteilen der Javascript-Dateien, damit beim Start nicht mehr alles geladen wird |
| react-icons | Vielerei an Icons fürs Web, hier noch ein Icon-Viewer zum ermitteln welche vorhanden sind |
Proxy wegen CORS
Für die Datenbeschaffung wird hier häufig mit RESTfuly Anfragen gearbeitet. Diese sind nicht immer mit in der Website integriert, sondern werden oft von anderen Stelle her konsumiert. Dabei reicht schon ein anderer Port auf dem gleichen Computer und man landet in einem CORS-Fehler.
Damit diese Probleme für den einen REST-Dienst nicht auftritt, kann man im Webpack einen Proxy einrichten. Die Einstellungen werden in der package.json, die im Wurzelverzeichnis zu finden ist, auf der ersten Ebene direkt hinterlegt, z.B:
{
"name": "example-app",
"version": "0.1.0",
...
"proxy": ...
}Alle folgenden Angaben, beziehen sich auf den Eintrag „proxy“, der entsprechend belegt wird.
Single-Proxy
Der einfachste Weg ist es, alle Anfragen die von der React-Seite nicht bearbeitet werden an den Proxy zu schicken. Dafür wird die Url des Proxy direkt angegeben, und es wird die komplette Url der Anfrage direkt am Proxy angefragt:
"proxy": "http://example.com:12345",
Bei dieser Konfiguration würde eine Anfragen an den eigenen Server in dieser Form „http://ownserver/api/v1/view/component“ an dem Proxy-Server in dieser Form überstetzt werden: „http://example.com:12345/api/v1/view/component“.
URL per Proxy
Um es etwas weiter zu spezifieren, kann man auch Url-Präfixe angeben, die explizit an den Proxy weitergeleitet werden. Dafür wird der Präfix und das Ziel angegeben:
"proxy": {
"/api": {
"target": "http://example.com:12345",
"ws": true
}
}In diesem Fall werden nur noch Anfragen die mit „/api“ beginnen an den Proxy weitergeleitet, dabei bleibt die URL ebenso gleich wie beim „Single Proxy“.
Projekt verwalten
Nach dem nun das Projekt erstellt wurde und alle notwendigen Packete installiert sind, wird das Projekt nun im Visual Studio Code über „Datei -> Ornder öffnen“ geöffnet. Nach dem öffnen werden uns 3 Ordner und ein paar Dateien erscheinen:
| node_module | Hierhin werden alle lokal installierten Packet abgelegt, welche über den „import“-Befehl eingebunden werden können |
| public | Hier liegen die statischen Elemente, wie z.B. die index.html. Alles was direkt in der Index.html eingebunden werden soll, muss in diesem oder einem Unterordner gelegt werden |
| src | Hier liegen die eigentlichen Quellen, die später die Anwendung definieren. Die noch zu erstellenden Unterordner sind eine häufig zu findene Konvention |
| src/components | In sich abgeschlossene Komponenten, für wiederkehrendes oder für Trennung von Hauptbestandteilen. Hier könnten z.B. Sidebar oder der Header liegen |
| src/containers | |
| src/views | Die Ansichten im Hauptfenster, die durch unterschiedliche URL’s angesteuert werden können |
Private Packete
Zum Gliedern von Elementen kann man diese in Unterordner packen und mit einer „package.json“-Datei versehen, damit wird beim Import in den anderen Dateien nur noch der Unterordner angeben und alles weitere wird über die package.json definiert. Hier ein Beispiel einer solchen Datei:
{
"name": "Sidebar",
"version": "0.0.0",
"private": true,
"main": "./sidebar.jsx"
}In diesem Fall wird das Packet mit den Namen „Sidebar“ betitelt und liegt in der Verison 0.0.0 vor. Der Parameter private sorgt dafür, dass diese Packet nur innerhalb des Projektes verwendet wird. Und welche Datei als Einstieg benutzt werden soll, wird über „main“ definiert, was in diesem Fall die sidebar.jsx ist.
Vorlage Themes
FAQ (oder Bootstrap und seine Tücken)
Fixed Header liegt über den Body
Damit bei einem Fixed Header der Content nicht hinter dem Header steht, muss am umschließenden Div bzw. Body vom Nav und Content ein „padding-top“ von „50px“ eingetragen.
