Now it gets concrete: we create the skeleton for our product catalog app – THE project we'll build up together through the entire rest of this tutorial. Every following chapter builds directly on the files we create here – nothing is a loose, isolated example. Open a terminal (in VS Code: Terminal > New Terminal; in WebStorm/PhpStorm: the "Terminal" tab at the bottom of the window) and navigate to the folder where your project should live.

Where this tutorial leads

By the end of chapter 12 we'll have a real, working app: a searchable product list that loads live data from your own Magento shop via its REST API, a detail page per product, and a cart that survives even after closing the app. This is the target project structure we're working towards, step by step:

produktkatalog-app/
├── App.js                        (entry point: navigation)
├── app.json                      (Expo configuration)
├── package.json                  (packages, like composer.json)
├── api/
│   └── magentoApi.js             (connection to the Magento REST API)
├── components/
│   └── ProductCard.js            (reusable product card)
├── hooks/
│   └── useCart.js                (cart, persisted on the device)
├── screens/
│   ├── ProductListScreen.js      (product list + search)
│   └── ProductDetailScreen.js    (product details + cart)
└── assets/                       (icons, images)

Every time a new chapter creates a new file or changes an existing one, we'll show you the COMPLETE content of that file AND the current state of the project structure – so you can follow this tutorial line by line and end up with exactly this app.

Creating the project

We deliberately use the "blank" starter template (instead of the default template with file-based routing), because we're going to build and understand navigation ourselves, step by step, in chapter 10, rather than getting it "automagically" from the start:

npx create-expo-app produktkatalog-app --template blank
cd produktkatalog-app

The command automatically downloads everything needed and sets up a runnable skeleton with exactly one entry file. This takes a minute or two the first time, depending on your internet connection.

Starting the project

npx expo start

A QR code appears in the terminal. Open the Expo Go app on your phone (see the previous chapter) and scan the code (iOS: via the regular camera app; Android: directly in Expo Go via the "Scan QR Code" button). After a few seconds of loading, you'll see the sample app live on your device – congratulations, that was your first running React Native app!

Understanding the folder structure

A fresh, "blank" Expo project ships with exactly these folders/files:

produktkatalog-app/
├── App.js          (the one and only screen file – this is where we start)
├── app.json        (app name, icon, colors)
├── package.json    (installed packages, like composer.json)
└── assets/         (icons, images)

Opening App.js: our first real project file

Open App.js in the root folder – this is the entry point of every React Native app, comparable to the index.php of a classic PHP project. Your editor already shows exactly this content (created automatically by create-expo-app):

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

export default function App() {
  return (
    <View style={styles.container}>
      <Text>Open up App.js to start working on your app!</Text>
      <StatusBar style="auto" />
    </View>
  );
}

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

Change the text on line 6 and save – the app on your phone updates automatically, with no manual restart needed. This instant feedback is called "Fast Refresh" and is one of the biggest productivity advantages of React Native over classic native development. In the next chapter, we'll keep building on App.js deliberately.