4. Ampelschalter-App

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.


Allgemeine Datenschutzbestimmungen | Impressum
Herausgeber: Land Baden-Württemberg, vertreten durch das Zentrum für Schulqualität und Lehrerbildung (ZSL), Heilbronner Straße 314, 70469 Stuttgart, Telefon 0711/21859-0, poststelle@zsl.kv.bwl.de
Verantwortlich im Sinne des Presserechts: ZSL, Irmgard Mühlhuber, Ref. 24 "Digitalisierung, Medienbildung", Heilbronner Straße 314, 70469 Stuttgart, Telefon 0711/21859-240, digitalebildung@zsl.kv.bwl.de
Kontakt zum/r behördlichen Datenschutzbeauftragte/n: datenschutz@zsl.kv.bwl.de