LS 1.2 - Übungen- Schichtenarchitektur implementieren

4.1. Lösung - Ampelschalter-App

Antwort 1: Bedeutung der Schichtenarchitektur

Die Schichtenarchitektur trennt Logik, Präsentation und Steuerung, wodurch der Code wartbarer, testbarer und erweiterbar wird. Sie erleichtert die Teamarbeit und fördert Wiederverwendbarkeit.

Antwort 2: Komponenten, Dateien und ihre Rollen

• App.js:
  Die Hauptkomponente, die die Zustandsverwaltung übernimmt. Importiert die modularen Komponenten TrafficLight und ControlButton. Überträgt den Zustand der Ampelfarbe (light) sowie die Wechsel-Funktion (nextLight) als Props an die Präsentationskomponenten.
• TrafficLight.js:
  Präsentationskomponente zur Anzeige des aktuellen Lichtstatus. Zeigt die aktuelle Ampelfarbe als Text und Kreis an. Nimmt die Farbe (light) als Prop entgegen und passt die Schriftfarbe dynamisch an.
• ControlButton.js:
  Präsentationskomponente, die den Schalter (Button) zum Wechseln der Ampelfarbe enthält. Ruft die übergebene Funktion nextLight auf, um den Zustand zu ändern.

Antwort 3: Ampelschalter-App-b - Snack mit Komponenten, oder als Download.