Dieses Repository enthält den Code und die Musterlösungen des in den Reactober-Webinaren der the native web GmbH entwickelten Halloween Party Planner.
Die unterschiedlichen Code-Stände der jeweiligen Tracks und Folgen sind mit den folgenden Tags versehen:
| Track | Folge | Tag |
|---|---|---|
| Einführung | 03: Qualitätssicherung |  einfuehrung |
| Deep-Dive | vor 01: Architektur (gedacht als Start) |
deepdive-start |
| Deep-Dive | 01: Architektur | deepdive-01 |
| Deep-Dive | 02: Plugins | deepdive-02 |
| Deep-Dive | 03: Go live (finaler Code-Stand) |
deepdive-03 |
Diese können wie folgt ausgecheckt werden:
$ git checkout <tag-name>Ein Besipiel, um den Einführungskurs auszuchecken:
$ git checkout einfuehrungHinweis: Da der Einführungskurs pro Folge im Wesentlichen nur Code hinzufügt, ist dieser nicht pro Folge unterteilt, sondern als gesamte Musterlösung getagged.
- Node.js Version 14 (oder höher)
- npm Version 6 (oder höher) - wird automatisch mit Node.js installiert
$ npm installDieser Befehl muss einmalig beziehungsweise immer nach dem Auschecken eines Tags durchgeführt werden, um die jeweiligen Abhängigkeiten passend zu installieren.
Das Projekt basiert auf dem Tool Create React App.
Die folgenden Befehle sind möglich:
Startet sowohl das Frontend als auch das Mock-Backend. Diese sind dann unter den folgenden Adressen erreichbar:
- Frontend: http://localhost:3000
- Backend: http://localhost:3001
Die App wird bei Veränderungen im Code automatisch neu geladen.
Führt die Tests mit jest im so genannten Watch-Mode aus.
Bei diesem werden nur die Dateien getestet, an denen sich seit dem letzten git commit etwas geändert hat. Bei Änderungen im Source-Code werden die Tests erneut ausgeführt.
Mehr Informationen (leider nur auf Englisch) finden sich in der create-react-app-Dokumentation unter running tests.
Erstellt einen Production-Build des Frontends im build-Verzeichnis.
Mehr Informationen (ebenfalls nur auf Englisch) finden sich in der create-react-app-Dokumentation unter deployment.
Führt die statische Codeanalyse mit eslint und im wesentlichen anhand der eslint-config-es durch.
Diese App ist komplett over-engineered.
Sie dient dazu, wesentliche und teils fortgeschrittene Konzepte von React-Applikationen und Praktiken anhand sehr einfacher Beispiele zu zeigen. Dementsprechend sind simple Anforderungen meistens deutlich komplexer umgesetzt, als das notwendig wäre.
Die App und der Code sollten daher nicht als Blaupause für andere React-Applikationen dienen. Der beste Code ist der simpelste, der die aktuellen Anforderungen erfüllt!