Der Code, den Sie im letzten Kapitel gesehen haben, sah wahrscheinlich ein bisschen wie HTML aus, war aber JavaScript. Dieses Kapitel erklärt genau, was es mit dieser Mischung – genannt JSX – auf sich hat, und welcher React-Native-Baustein welchem HTML-Element entspricht.

Was ist JSX?

JSX ist eine Erweiterung von JavaScript, mit der Sie HTML-ähnliche Syntax direkt in Ihrem JavaScript-Code schreiben können. Hinter den Kulissen wird JSX in normale JavaScript-Funktionsaufrufe umgewandelt – Sie müssen sich darum aber nicht kümmern, das übernimmt Expo automatisch.

// Das schreiben Sie:
function Willkommen() {
  return <Text>Hallo Welt!</Text>;
}

// Das passiert dahinter (vereinfacht):
function Willkommen() {
  return React.createElement(Text, null, "Hallo Welt!");
}

Die wichtigsten Bausteine im HTML-Vergleich

React Native bringt eine feste Menge eingebauter Komponenten mit, die jeweils zu einem echten nativen UI-Element auf iOS/Android werden. Die wichtigsten im direkten Vergleich zu HTML:

App.js erweitern: unsere erste echte Komponente

Statt eines losen Beispiels bauen wir das direkt in unser echtes Projekt ein: Öffnen Sie die App.js aus dem letzten Kapitel und ersetzen Sie ihren Inhalt komplett durch diese Version:

import { StatusBar } from 'expo-status-bar';
import { StyleSheet, Text, View } from 'react-native';

export default function App() {
  return (
    <View style={styles.container}>
      <Text style={styles.title}>Willkommen im Produktkatalog</Text>
      <Text>Entdecken Sie unsere Produkte.</Text>
      <StatusBar style="auto" />
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#fff',
    alignItems: 'center',
    justifyContent: 'center',
  },
  title: { fontSize: 20, fontWeight: 'bold', marginBottom: 8 },
});

Speichern Sie und schauen Sie auf Ihr Handy – Fast Refresh zeigt die Änderung sofort. Zeile für Zeile übersetzt: View entspricht einem <div>, das die beiden Texte umschließt. Jeder Text steht in einem eigenen Text-Element (vergleichbar mit zwei <p>-Tags). style={{styles.title}} entspricht class="title" in HTML – mehr dazu im nächsten Kapitel über Styling.

Eigene Komponenten: eine Vorschau

Eine "Komponente" ist einfach eine JavaScript-Funktion, die JSX zurückgibt – genau wie unsere App-Funktion oben. Große Apps bestehen aus vielen kleinen Komponenten, die sich gegenseitig verwenden, ähnlich wie eine Webseite aus wiederverwendbaren HTML-Bausteinen zusammengesetzt sein kann. Im übernächsten Kapitel lagern wir Teile von App.js in unsere erste eigene, wiederverwendbare Komponente aus: components/ProductCard.js.