Pour commencer, explorons les étapes impliquées dans le démarrage d'un nouveau projet React Native.

# Théorie
#### 1. Créer un dossier de projet
Commencez par créer un dossier vide sur votre machine où vous préférez stocker votre application React Native.
#### 2. Ouvrir le dossier dans l'IDE
Ouvrez ce dossier dans votre Environnement de Développement Intégré (IDE) préféré.
#### 3. Exécuter la commande pour créer le projet
Utilisez la commande suivante pour initier un nouveau projet React Native :

<!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. Prévisualisez votre application
Pour voir l'apparence initiale de votre application, exécutez la commande suivante dans le terminal :

<!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. Choisissez la méthode de visualisation
- Vous serez invité à choisir où prévisualiser votre application en fonction des programmes installés sur votre machine (Xcode ou Android Studio);
- De plus, vous pouvez installer l'application Expo sur votre smartphone et utiliser le code QR pour voir l'application;
- Une autre option est d'ouvrir l'application dans le navigateur, mais cela nécessite l'installation de packages supplémentaires (suggérés par le terminal).

Dans ce cours, nous utiliserons le simulateur Xcode. Pour l'ouvrir, nous tapons `i` dans le terminal.

### Résultat

Explorez le monde du développement d'applications mobiles avec React Native. Apprenez les concepts fondamentaux et les techniques avancées pour créer efficacement des applications mobiles multiplateformes.

L'introduction complète à React Native décrit les prérequis et les objectifs du cours et offre des conseils sur les pratiques d'apprentissage efficaces. Comprenez ce à quoi vous attendre du cours et comment aborder efficacement le parcours d'apprentissage.

Explorez les concepts fondamentaux de React Native, de la configuration de l'environnement de développement à la compréhension des composants React Native. Acquérez une expérience pratique en construisant une application simple et en posant les bases pour des projets plus complexes.

Apprenez la gestion efficace des états dynamiques, des props, de la navigation et des hooks pour créer des applications React Native soignées.

Explorez les aspects avancés du développement React Native, en couvrant des sujets cruciaux tels que la gestion des entrées, la barre d'état, les ActivityIndicators, et plus encore. Plongez profondément dans des techniques pratiques pour construire des applications mobiles sophistiquées.

Fondations de React Native

Configuration du Projet

Théorie

1. Créer un dossier de projet

2. Ouvrir le dossier dans l'IDE

3. Exécuter la commande pour créer le projet

4. Prévisualisez votre application

5. Choisissez la méthode de visualisation

Résultat

En Pratique