Der erste Baustein-Themenbereich beginnt mit dem Grundlegendsten: WIE Sie eingebaute React-Native-Komponenten und Ihre eigenen, selbst geschriebenen Komponenten korrekt einbinden.

1. Beschreibung

React Native selbst liefert seine eingebauten Komponenten (View, Text, Button, ...) über das Paket react-native aus. Eigene Komponenten importieren Sie über einen relativen Dateipfad. Beide Fälle nutzen dieselbe JavaScript-import-Syntax, unterscheiden sich aber in Named- vs. Default-Exports.

2. Kurzes Beispiel

// Eingebaute Komponenten: Named Imports, geschweifte Klammern
import { View, Text, Button } from 'react-native';

// Eigene Komponente: Default Import, ohne geschweifte Klammern
import Begruessung from './components/Begruessung';

3. Komplettes Projekt

npx create-expo-app komponenten-import-demo
cd komponenten-import-demo

import { Text } from 'react-native';

function Begruessung({ name }) {
  return <Text>Hallo, {name}!</Text>;
}

export default Begruessung;

import { View, StyleSheet } from 'react-native';
import Begruessung from './components/Begruessung';

export default function App() {
  return (
    <View style={styles.container}>
      <Begruessung name="Anna" />
      <Begruessung name="Ben" />
    </View>
  );
}

const styles = StyleSheet.create({
  container: { flex: 1, justifyContent: 'center', alignItems: 'center' },
});

4. Erklärung

• import {{ View, Text, Button }} from 'react-native' – Named Import: das Paket exportiert mehrere benannte Bausteine gleichzeitig, Sie picken sich genau die heraus, die Sie brauchen.
• export default Begruessung; – markiert Begruessung als den EINEN Haupt-Export dieser Datei; beim Importieren dürfen Sie ihr sogar einen anderen Namen geben, z. B. import Hallo from './components/Begruessung'.
• ./components/Begruessung – der Punkt am Anfang bedeutet "relativ zum aktuellen Ordner"; die Dateiendung .js/.jsx wird beim Import weggelassen.

5. Ausgaben