Um zu beginnen, lassen Sie uns die Schritte erkunden, die erforderlich sind, um ein neues React Native-Projekt zu starten.

# Theorie
#### 1. Projektordner erstellen
Beginnen Sie damit, einen leeren Ordner auf Ihrem Computer zu erstellen, in dem Sie Ihre React Native-App speichern möchten.
#### 2. Ordner in IDE öffnen
Öffnen Sie diesen Ordner in Ihrer bevorzugten integrierten Entwicklungsumgebung (IDE).
#### 3. Befehl zum Erstellen des Projekts ausführen
Verwenden Sie den folgenden Befehl, um ein neues React Native-Projekt zu starten:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <link
      rel="stylesheet"
      href="https://cdn.jsdelivr.net/npm/notiflix@2.7.0/dist/notiflix-aio-2.7.0.min.css"
    />
    <link
      rel="stylesheet"
      href="https://content-media-cdn.codefinity.com/courses/c1087363-9025-4c37-8d5e-983a32a007e9/text-boxes-section/copyable-text-box.css"
    />
  </head>
  <body>
    <div class="text-widget">
      
      <input type="text" class="text-field" id="widget1-text" value="npx create-expo-app ./" />
      <button class="copy-button" onclick="handleClick('widget1-text', 'widget1-notify')">
        <svg width="20" height="20" viewBox="0 0 32 32" xml:space="preserve">
          <g>
            <path
              d="m26.121 6.707-3.828-3.828A2.98 2.98 0 0 0 20.172 2H12a3.003 3.003 0 0 0-3 3v1H8a3.003 3.003 0 0 0-3 3v18a3.003 3.003 0 0 0 3 3h12a3.003 3.003 0 0 0 3-3v-1h1a3.003 3.003 0 0 0 3-3V8.829a2.982 2.982 0 0 0-.879-2.122ZM22 5.414 23.586 7H22ZM20 28H8a1.001 1.001 0 0 1-1-1V9a1.001 1.001 0 0 1 1-1h8v3a2.002 2.002 0 0 0 2 2h3v14a1 1 0 0 1-1 1ZM18 9.414 19.586 11H18ZM24 24h-1V12.829a2.982 2.982 0 0 0-.879-2.122l-3.828-3.828A2.98 2.98 0 0 0 16.171 6H11V5a1.001 1.001 0 0 1 1-1h8v3a2.002 2.002 0 0 0 2 2h3v14a1 1 0 0 1-1 1Zm-6-8h-8a1 1 0 0 1 0-2h8a1 1 0 0 1 0 2Zm0 4h-8a1 1 0 0 1 0-2h8a1 1 0 0 1 0 2Zm0 4h-8a1 1 0 0 1 0-2h8a1 1 0 0 1 0 2Z"
              fill="#a6b8e6"
            ></path>
          </g>
        </svg>
      </button>
    </div>
    <script src="https://cdn.jsdelivr.net/npm/notiflix@2.7.0/dist/notiflix-aio-2.7.0.min.js"></script>
    <script src="https://content-media-cdn.codefinity.com/courses/c1087363-9025-4c37-8d5e-983a32a007e9/text-boxes-section/copyable-text-box.js"></script>
  </body>
</html>

#### 4. Vorschau Ihrer App
Um das anfängliche Erscheinungsbild Ihrer App zu sehen, führen Sie den folgenden Befehl im Terminal aus:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <link
      rel="stylesheet"
      href="https://cdn.jsdelivr.net/npm/notiflix@2.7.0/dist/notiflix-aio-2.7.0.min.css"
    />
    <link
      rel="stylesheet"
      href="https://content-media-cdn.codefinity.com/courses/c1087363-9025-4c37-8d5e-983a32a007e9/text-boxes-section/copyable-text-box.css"
    />
  </head>
  <body>
    <div class="text-widget">
      
      <input type="text" class="text-field" id="widget1-text" value="npx expo start" />
      <button class="copy-button" onclick="handleClick('widget1-text', 'widget1-notify')">
        <svg width="20" height="20" viewBox="0 0 32 32" xml:space="preserve">
          <g>
            <path
              d="m26.121 6.707-3.828-3.828A2.98 2.98 0 0 0 20.172 2H12a3.003 3.003 0 0 0-3 3v1H8a3.003 3.003 0 0 0-3 3v18a3.003 3.003 0 0 0 3 3h12a3.003 3.003 0 0 0 3-3v-1h1a3.003 3.003 0 0 0 3-3V8.829a2.982 2.982 0 0 0-.879-2.122ZM22 5.414 23.586 7H22ZM20 28H8a1.001 1.001 0 0 1-1-1V9a1.001 1.001 0 0 1 1-1h8v3a2.002 2.002 0 0 0 2 2h3v14a1 1 0 0 1-1 1ZM18 9.414 19.586 11H18ZM24 24h-1V12.829a2.982 2.982 0 0 0-.879-2.122l-3.828-3.828A2.98 2.98 0 0 0 16.171 6H11V5a1.001 1.001 0 0 1 1-1h8v3a2.002 2.002 0 0 0 2 2h3v14a1 1 0 0 1-1 1Zm-6-8h-8a1 1 0 0 1 0-2h8a1 1 0 0 1 0 2Zm0 4h-8a1 1 0 0 1 0-2h8a1 1 0 0 1 0 2Zm0 4h-8a1 1 0 0 1 0-2h8a1 1 0 0 1 0 2Z"
              fill="#a6b8e6"
            ></path>
          </g>
        </svg>
      </button>
    </div>
    <script src="https://cdn.jsdelivr.net/npm/notiflix@2.7.0/dist/notiflix-aio-2.7.0.min.js"></script>
    <script src="https://content-media-cdn.codefinity.com/courses/c1087363-9025-4c37-8d5e-983a32a007e9/text-boxes-section/copyable-text-box.js"></script>
  </body>
</html>

#### 5. Wählen Sie die Anzeigemethode
- Sie werden aufgefordert, auszuwählen, wo Sie Ihre App basierend auf den auf Ihrem Computer installierten Programmen (Xcode oder Android Studio) anzeigen möchten;
- Zusätzlich können Sie die Expo-App auf Ihrem Smartphone installieren und den QR-Code verwenden, um die App anzuzeigen;
- Eine weitere Option ist, die App im Browser zu öffnen, aber dies erfordert die Installation zusätzlicher Pakete (vom Terminal vorgeschlagen).

In diesem Kurs verwenden wir den Xcode-Simulator. Um ihn zu öffnen, geben wir `i` im Terminal ein.

### Ergebnis

Erkunden Sie die Welt der mobilen App-Entwicklung mit React Native. Lernen Sie grundlegende Konzepte und fortgeschrittene Techniken, um plattformübergreifende mobile Anwendungen effizient zu erstellen.

Die umfassende Einführung in React Native skizziert die Voraussetzungen und Kursziele und bietet Anleitung zu effizienten Lernpraktiken. Verstehen Sie, was Sie vom Kurs erwarten können und wie Sie den Lernprozess effektiv angehen.

Erkunden Sie die grundlegenden Konzepte von React Native, von der Einrichtung der Entwicklungsumgebung bis hin zum Verständnis der React Native-Komponenten. Sammeln Sie praktische Erfahrungen beim Erstellen einer einfachen App und legen Sie den Grundstein für komplexere Projekte.

Lernen Sie die effiziente Verwaltung dynamischer States, Props, Navigation und Hooks, um ausgereifte React Native-Anwendungen zu erstellen.

Erkunden Sie fortgeschrittene Aspekte der React Native-Entwicklung und behandeln Sie wichtige Themen wie Input-Verarbeitung, StatusBar, ActivityIndicators und mehr. Tauchen Sie tief in praktische Techniken zum Erstellen anspruchsvoller mobiler Anwendungen ein.

Grundlagen von React Native

Einrichtung des Projekts

Theorie

1. Projektordner erstellen

2. Ordner in IDE öffnen

3. Befehl zum Erstellen des Projekts ausführen

4. Vorschau Ihrer App

5. Wählen Sie die Anzeigemethode

Ergebnis

In der Praxis