Créer des applications mobiles avec React Native

Auteur: Mohamed CHINY Durée necessaire pour le cours de Créer des applications mobiles avec React Native Niveau recommandé pour le cours de Créer des applications mobiles avec React Native Supports vidéo non disponibles pour ce cours Exercices de renforcement non disponibles pour ce cours Quiz non disponibles pour ce cours

Page 2: Préparer l'environnement de travail

Toutes les pages

Créer des applications mobiles avec React Native

Page 1
React Native c'est quoi et à quoi il sert?
Page 2
Préparer l'environnement de travail
Page 3
Créer une application React Native
Page 4
App.js: Point d'entrée principal de l'application React Native

Outils nécessaires pour développer en React Native

Environnement de travail

Pour commencer le développement avec React Native, il est essentiel d’installer Node.js et npm (Node Package Manager). Node.js permet d’exécuter du JavaScript côté serveur, ce qui est indispensable pour compiler et exécuter les projets React Native. Le gestionnaire de paquets npm, quant à lui, sert à gérer les dépendances du projet, comme les bibliothèques tierces ou les outils de développement. Une fois Node.js installé, on peut utiliser npm pour installer soit le React Native CLI (pour un contrôle natif plus poussé), soit Expo CLI (pour une configuration simplifiée). Expo est particulièrement utile pour les débutants, car il permet de lancer une app sans avoir à configurer Android Studio ou Xcode immédiatement.
Dans ce cours, nous utiliserons Expo qui permet de gérer un projet React Native plus facilement. Bien que Expo soit vu comme une solution limitée pour certains cas d'usages, il permet quand même de concentrer ses efforts sur le codage de l'application plutôt que la gestion de l'environnement de travail, ce qui est parfait pour les débutants en React Native.
Pour installer Expo on exécute la commande suivante dans le terminal:
npm install -g expo-cli
L'option -g signifie une installation globale. C'est à dire que le paquet expo-cli sera disponible pour tous les projets que l'on créera par la suite et pas uniquement le projet courant.

Il est également possible d'installer ce paquet à l'aide du gestionnaire yarn comme ceci:
yarn global add expo-cli
Pour mieux comprendre l'utilité de NPM et comment s'en servir, je vous renvoie à mon cours sur l'installation de Node.js et le gestionnaire de paquets NPM.

IDE performant et adapté

Pour développer efficacement en React Native, il est essentiel de disposer d’un éditeur de code performant, et Visual Studio Code s’impose comme l’outil de prédilection. Léger, rapide et hautement personnalisable, il offre une multitude d’extensions utiles, telles que ESLint pour l’analyse du code, Prettier pour le formatage automatique et React Native Tools pour faciliter l’intégration avec les simulateurs et le débogage. Cet environnement permet d’écrire du code en JavaScript ou TypeScript, de structurer son projet avec clarté, et de détecter les erreurs en temps réel. De plus, sa compatibilité avec Git simplifie la gestion des versions et favorise une collaboration fluide (en cas de travail d'équipe).

Je vous renvoie sur ce cours de React où j'ai détaillé l'utilité de certaines extensions comme Babel, ESLint et Webpack.
Quelque soit l'IDE que vous choisissez, assurez-vous qu'il vous qu'il est équipé d'un terminal qui vous permettra de taper des commandes (comme l'installation des paquets, le lancement de l'application...). Sinon, le terminal qui est installé par défaut sur votre système fera l'affaire, sauf que vous serez obligés de jongler entre deux fenêtres: une pour écrire le code (l'IDE) et l'autre pour exécuter les commandes (le terminal).

Tester l'application en simulant l'appareil mobile

Pour tester l'application, on peut installer un simulateur mobile. Pour Android, cela passe par Android Studio, qui inclut le SDK Android et l’AVD Manager (Android Virtual Device). On peut y créer des émulateurs de téléphones Android pour voir notre application en action. Pour iOS, on doit utiliser Xcode, disponible uniquement sur macOS, qui propose des simulateurs iPhone/iPad.

Tester l'application sur un vrai téléphone

Si on a choisi d'utiliser Expo (ce qui est le cas pour nous), on peut tester l'application directement sur notre téléphone via l’application Expo Go. Cela permet de voir les changements en temps réel sans avoir à compiler l’application à chaque fois. Il suffit, au moment de compilation de l'application, de scanner un QR code qui sera généré par l'IDE (VSCode par exemple), avec son téléphone (après avoir installé Expo go) et l'application sera aussi visible sur le téléphone.

Expo Go est disponible en téléchargement gratuit dans les stores comme Google Play Store ou l'App Store Apple.