← Retour au cours
▶ Aperçu gratuit · Leçon offerte
🔷 ITAG Tech › React Native — Applications mobiles iOS + Android (Expo + CLI, Redux, navigation, API REST) › Leçon 2 / 10

Leçon 1 — Fondements React Native : architecture, CLI vs Expo, premier projet

⏱ 60 min · 🎬 Lecon · 🏆 15 XP
🎬
Vidéo en production
Notre équipe pédagogique tourne actuellement cette leçon avec un·e formateur·rice expert·e. Le contenu textuel ci-dessous est complet et utilisable dès maintenant.

Leçon 1 — Fondements React Native

Architecture, Expo vs CLI, et création de votre premier projet mobile cross-platform.

Objectifs pédagogiques

  • Comprendre le fonctionnement interne de React Native et sa New Architecture
  • Distinguer Expo Managed Workflow, Expo Bare Workflow et React Native CLI
  • Installer l'environnement complet (Node.js, Watchman, Android Studio / Xcode)
  • Créer un premier projet fonctionnel et le tester sur émulateur et appareil physique
  • Comprendre la structure de fichiers d'un projet React Native

1. Architecture interne de React Native

React Native fonctionne grâce à deux threads principaux qui communiquent via la couche JSI (JavaScript Interface). Depuis React Native 0.71+, la New Architecture est activée par défaut, apportant des gains de performance significatifs.

ThreadRôleTechnologies
JS ThreadExécute votre code JavaScript/TypeScript, gère la logique métierHermes Engine (défaut depuis RN 0.70)
Native ThreadRendu des composants natifs iOS/Android, accès aux APIs systèmeObjective-C/Swift (iOS), Kotlin/Java (Android)
UI ThreadAnimation 60fps via Fabric RendererC++ partagé iOS/Android

1.1 Hermes Engine — le moteur JavaScript de React Native

Hermes est le moteur JavaScript optimisé pour React Native, développé par Meta. Depuis React Native 0.70, il est activé par défaut. Ses avantages :

  • Compilation AOT (Ahead-of-Time) en bytecode → démarrage 30-40% plus rapide
  • Empreinte mémoire réduite de 20-30% par rapport à V8/JavaScriptCore
  • Garbage Collector optimisé pour les appareils mobiles à faible RAM

1.2 La New Architecture (React Native 0.71+)

La nouvelle architecture, stable depuis 2024, remplace l'ancien bridge asynchrone par trois innovations :

  1. JSI (JavaScript Interface) : permet aux modules JavaScript d'appeler directement du code C++ sans sérialisation JSON coûteuse
  2. TurboModules : chargement à la demande des modules natifs (au lieu de tous les charger au démarrage)
  3. Fabric : moteur de rendu synchrone qui peut interrompre et reprendre le rendu, similaire à React Concurrent Mode

2. Expo vs React Native CLI : quel outil choisir ?

C'est la première question que se pose tout développeur débutant React Native. Voici la comparaison exhaustive :

CritèreExpo ManagedExpo BareReact Native CLI
Setup5 minutes15 minutes30-60 minutes
Code natifInterditPossibleTotal contrôle
OTA UpdatesExpo UpdatesExpo UpdatesCodePush/Expo
App StoreEAS BuildEAS Build / manuelManuel / Fastlane
Taille app~30 MB (inclut SDK)~15-20 MB~10-15 MB
Recommandé pourPrototypes, startupsApps pro avec natifApps complexes, librairies
Selon la documentation officielle Expo : « Pour 95% des cas d'usage, Expo Managed Workflow est suffisant. Utilisez React Native CLI uniquement si vous avez besoin d'intégrer des SDK natifs non disponibles dans Expo. »
Source : https://docs.expo.dev/workflow/overview/ (consultée le 2026-05-27).

3. Installation de l'environnement de développement

3.1 Prérequis système

Installation Node.js et outils de base

Sur macOS/Linux, installez nvm puis Node.js LTS :

curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.39.7/install.sh | bash

nvm install 20 && nvm use 20

Installer Expo CLI et EAS CLI :

npm install -g expo-cli @expo/cli eas-cli

3.2 Configuration Android

  1. Télécharger Android Studio Iguana (2024.1.1+) depuis developer.android.com/studio
  2. Installer SDK Android 34 (Android 14) minimum via SDK Manager
  3. Créer un émulateur via AVD Manager : Pixel 8, API 34, x86_64
  4. Ajouter les variables d'environnement ANDROID_HOME dans votre profil shell

3.3 Configuration iOS (macOS uniquement)

  1. Installer Xcode 15+ depuis le Mac App Store
  2. Installer les Command Line Tools : xcode-select --install
  3. Installer CocoaPods : sudo gem install cocoapods
Attention : Le développement iOS nécessite obligatoirement un Mac. Sur Windows/Linux, vous pouvez développer pour Android uniquement, ou utiliser Expo Go pour tester sur un vrai iPhone sans Mac (mais pas pour builder une app en production).

4. Créer votre premier projet React Native

4.1 Avec Expo (recommandé pour débuter)

Création projet Expo

Créez un nouveau projet Expo avec TypeScript :

npx create-expo-app MonPremierApp --template blank-typescript

Lancez en mode développement : npx expo start

L'interface Expo Metro Bundler s'ouvre dans le navigateur. Appuyez sur a pour Android, i pour iOS, ou scannez le QR code avec Expo Go.

4.2 Structure de fichiers d'un projet Expo

Un projet Expo/React Native est organisé comme suit :

  • app/ — Routes (Expo Router) ou screens de navigation
  • components/ — Composants React réutilisables
  • constants/ — Couleurs, thèmes, constantes de configuration
  • hooks/ — Custom hooks React (useAuth, useTheme, etc.)
  • assets/ — Images, fonts, icônes statiques
  • app.json — Configuration Expo (nom, icône, splash screen, permissions)
  • tsconfig.json — Configuration TypeScript

4.3 Votre premier composant React Native

Un composant React Native de base avec état et interaction :

import React, { useState } from 'react';

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

Les composants primitifs RN remplacent les balises HTML : View pour div, Text pour p/span, TouchableOpacity pour button. Les événements utilisent onPress et non onClick.

5. Pièges fréquents et erreurs de débutants

Erreurs courantes :
  • Metro Bundler port occupé : lancer avec npx expo start --port 8082
  • ANDROID_HOME non défini : recharger le terminal après modification de ~/.bashrc
  • node_modules corrompu : rm -rf node_modules && npx expo start --clear
  • Text must be rendered within Text : tout texte doit être dans un composant Text
  • onClick vs onPress : React Native utilise onPress, pas onClick
  • className vs style : React Native utilise style={StyleSheet...}, pas className

6. Synthèse et points-clés à retenir

  • React Native compile en composants natifs réels, pas une WebView
  • La New Architecture (JSI + Fabric + TurboModules) offre des performances proches du natif
  • Hermes Engine est le moteur JS par défaut depuis RN 0.70
  • Expo Managed est idéal pour débuter, React Native CLI pour le contrôle total
  • Structure de base : app/ (routes), components/ (UI), hooks/ (logique)
  • Tout texte DOIT être dans Text, tout layout dans View
  • Les styles utilisent StyleSheet.create(), pas de CSS classique

Pour aller plus loin

← Leçon précédente
Introduction — React Native et l'écosystème du développement mobile cross-platform
🔒 Pour continuer
S'inscrire pour la suite →

Continuez le parcours 🚀

Inscrivez-vous pour accéder aux 8 autres leçons + le quiz final.

Créer mon compte
🍪 Nous utilisons des cookies essentiels et, avec ton accord, des cookies analytiques. En savoir plus

⚙️ Préférences cookies

Choisis quels cookies tu acceptes — modifiable à tout moment.

🔐 Essentiels (obligatoires)Authentification, session, sécurité. Toujours actifs.
📊 Analytics anonymesMesure d'audience anonymisée — aucune donnée personnelle.
📣 MarketingPublicités ITAG pertinentes sur d'autres sites.
💬 Contactez-nous sur WhatsApp