Arbeitsauftrag 10: Erweiterung einer ausgelagerten Komponente (Zusätzlicher „Zurücksetzen“-Button)

Aufgabe 10: Erweiterung einer ausgelagerten Komponente (Zusätzlicher „Zurücksetzen“-Button)

In dieser Aufgabe erweitern Sie eine bestehende React Native App, die als Snack Expo Link bereitgestellt wird. Ihr Ziel ist es, die bereits ausgelagerte Komponente ButtonComponent.js um eine zusätzliche Funktionalität zu ergänzen.

Die App zeigt aktuell einen Zähler, der mit zwei Buttons (+ und –) verändert werden kann. Die Buttons befinden sich bereits in einer eigenen Datei ButtonComponent.js. Ihre Aufgabe besteht darin, einen zusätzlichen „Zurücksetzen“-Button zu ergänzen, der den Zähler auf 0 setzt.

Vorgehen

1. Öffnen Sie den bereitgestellten Snack Expo Link und untersuchen Sie den vorhandenen Code.
2. Erstellen Sie in App.js eine neue Funktion handleReset, die den Zähler auf 0 setzt.
3. Erweitern Sie ButtonComponent.js um einen dritten Button mit der Beschriftung „Zurücksetzen“, der die handleReset-Funktion aufruft.
4. Übergeben Sie handleReset als neuen Prop onReset an ButtonComponent.js.
5. Testen Sie Ihre App und überprüfen Sie, ob alle Buttons wie gewünscht funktionieren.

Erwartetes Ergebnis

• Die App enthält jetzt drei Buttons: +, – und Zurücksetzen.
• Die Buttons funktionieren unabhängig voneinander.
• Der Code bleibt modular und strukturiert, da alle Button-Interaktionen über die separate Datei ButtonComponent.js verwaltet werden.

_{Vergleichen Sie ggf. die Musterlösung} .