Schritt-für-Schirtt-Anleitung - QuoteDisplay auslagern

Arbeitsauftrag: Komponente QuoteDisplay auslagern

Ziel

Sie lagern die Anzeige des Hauptzitats in eine eigene Komponente aus und binden diese anschließend in die App ein.

Schritt 1: Neue Datei für die Komponente erstellen

1. Öffnen Sie den Ordner components (falls er nicht existiert, erstellen Sie ihn).
2. Erstellen Sie darin die Datei:

   QuoteDisplay.js

3. Öffnen Sie die Datei QuoteDisplay.js.

Schritt 2: Die QuoteDisplay-Komponente erstellen

1. Fügen Sie folgenden Code in QuoteDisplay.js ein:

import React from 'react';
import { Text, StyleSheet } from 'react-native';

export default function QuoteDisplay({ text }) {
  return <Text style={styles.quote}>{text}</Text>;
}

const styles = StyleSheet.create({
  quote: {
    fontSize: 18,
    fontStyle: 'italic',
    textAlign: 'center',
    marginBottom: 20,
  },
});

2. Speichern Sie die Datei.

Schritt 3: Komponente in App.js verwenden

1. Öffnen Sie die Datei App.js.
2. Importieren Sie die neue Komponente:

import QuoteDisplay from './components/QuoteDisplay';

3. Ersetzen Sie die bisherige Text-Ausgabe durch die Komponente.

Bisher:

<Text style={styles.quote}>{quotes[0]}</Text>

Neu:

<QuoteDisplay text={quotes[0]} />

4. Speichern Sie die Datei.

Schritt 4: App testen

1. Starten Sie die App (in Snack oder lokal).
2. Prüfen Sie, ob das Hauptzitat korrekt angezeigt wird.

Fehlerbehebung

• Prüfen Sie die Datei QuoteDisplay.js.
• Kontrollieren Sie den Import:
  import QuoteDisplay from './components/QuoteDisplay';

Abschluss

Die Komponente QuoteDisplay wurde erfolgreich ausgelagert. Sie können nun mit der Auslagerung weiterer Komponenten fortfahren.