Starten mit React

mdn

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]+[C] 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][p1] Bootstrap selbst für die CSS-Dateien
[reactstrap][p2] 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][p3] Vielerei an Icons fürs Web, hier noch ein [Icon-Viewer][p4] 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:

Modul Beschreibung
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 URLs 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.

react web Programmieren