Mit einem funktionierenden curl-Aufruf aus Kapitel 3 in der Tasche legen wir jetzt das eigentliche React-Native-Projekt an – mit Expo, demselben Werkzeug wie in "React Native für Einsteiger".

Projekt erstellen

npx create-expo-app@latest magento-produkt-explorer-app
cd magento-produkt-explorer-app
npx expo install @react-navigation/native @react-navigation/native-stack
npx expo install react-native-screens react-native-safe-area-context

@react-navigation/native-stack installieren wir direkt mit, da wir ab Kapitel 9 zwischen Produktliste und Detail-Screen navigieren – dieselbe Bibliothek, die auch "React Native für Einsteiger" nutzt. npx expo install statt npm install stellt sicher, dass zueinander passende, mit Ihrer Expo-SDK-Version kompatible Versionen installiert werden.

App.js aufräumen

import { Text, View } from 'react-native';

export default function App() {
  return (
    <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
      <Text>magento-produkt-explorer-app</Text>
    </View>
  );
}

npx expo start
# Scannen Sie den QR-Code mit der Expo-Go-App, oder drücken Sie 'i'/'a' für einen Simulator

Die Zielstruktur im Vorgriff

magento-produkt-explorer-app/
├── .env
├── .env.example
├── .gitignore
├── App.js
├── api/
│   └── magentoApi.js
├── components/
│   ├── ProductCard.js
│   ├── Pagination.js
│   └── SearchBar.js
└── screens/
    ├── ProductListScreen.js
    └── ProductDetailScreen.js