LS1.2_AA1 PA LV App analysieren & Komponenten für Auslagerung identifizieren (Quote-Analyse)

Musterlösung: Analyse und Strukturierung der Motivations-App

Die folgende Tabelle zeigt, welche Teile der App als eigene Komponenten ausgelagert werden können, inklusive Zeilennummern, Vorschlägen für Komponentennamen und Begründungen:

Hinweise zur möglichen Umsetzung

Beispielhafte Komponenten könnten so aussehen:

// Header.js
export default function Header() {
  return <Text style={styles.header}>Motivations-App</Text>;
}

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

// QuoteInput.js
export default function QuoteInput({ value, onChangeText, onAdd }) {
  return (
    <>
      <TextInput
        style={styles.input}
        placeholder="Eigenes Zitat hinzufügen"
        value={value}
        onChangeText={onChangeText}
      />
      <Button title="Add" onPress={onAdd} />
    </>
  );
}

// QuoteListItem.js
export default function QuoteListItem({ text }) {
  return <Text style={styles.listItem}>- {text}</Text>;
}

// QuoteList.js
import QuoteListItem from './QuoteListItem';

export default function QuoteList({ quotes }) {
  return (
    <FlatList
      data={quotes}
      keyExtractor={(item, index) => index.toString()}
      renderItem={({ item }) => <QuoteListItem text={item} />}
    />
  );
}

Hinweis: Die Styles können aus der ursprünglichen App.js übernommen und zentral verwaltet werden.