Aller au contenu principal
Installer et configurer un environnement React Native sur Ubuntu
Retour aux articles

Installer et configurer un environnement React Native sur Ubuntu

Koloina Tetra 1 min de lecture
react-nativeubuntumobiledevelopmentandroidtutorial

Introduction

React Native permet de développer des applications mobiles natives pour iOS et Android en utilisant JavaScript et React. Ce guide vous accompagne pas à pas dans l'installation et la configuration d'un environnement de développement React Native fonctionnel sur Ubuntu.

À la fin de ce tutoriel, vous serez capable de lancer votre première application React Native sur un émulateur Android ou un appareil physique.

Prérequis

Avant de commencer, assurez-vous d'avoir les éléments suivants :

  • Un système Ubuntu (20.04 ou supérieur recommandé)
  • Une connexion internet stable
  • Des droits d'administration (sudo)

Étape 1 : Installation de Node.js et npm

React Native nécessite Node.js. Il est recommandé d'utiliser une version LTS (Long Term Support).

Ouvrez un terminal et exécutez les commandes suivantes pour installer Node.js via le gestionnaire de paquets :

bash
curl -fsSL https://deb.nodesource.com/setup_lts.x | sudo -E bash -
sudo apt-get install -y nodejs

Vérifiez l'installation :

bash
node -v
npm -v

Étape 2 : Installation du Java Development Kit (JDK)

Android nécessite le JDK. La version 17 est recommandée pour les projets récents.

bash
sudo apt update
sudo apt install openjdk-17-jdk

Vérifiez l'installation et configurez la variable d'environnement JAVA_HOME :

bash
java -version

Pour définir JAVA_HOME de manière permanente, ajoutez les lignes suivantes à votre fichier ~/.bashrc ou ~/.zshrc :

bash
export JAVA_HOME=/usr/lib/jvm/java-17-openjdk-amd64
export PATH=$JAVA_HOME/bin:$PATH

Appliquez les changements :

bash
source ~/.bashrc

Étape 3 : Installation d'Android Studio

Android Studio inclut l'émulateur et les outils de build nécessaires.

  1. Téléchargez Android Studio depuis le site officiel.
  2. Extrayez l'archive et lancez l'installation :
bash
cd ~/Téléchargements
unzip android-studio-*.zip
cd android-studio/bin
./studio.sh
  1. Lors du premier lancement, suivez l'assistant d'installation. Assurez-vous d'installer :
    • Android SDK
    • Android SDK Platform
    • Android Virtual Device (AVD)
  2. Une fois installé, ajoutez les variables d'environnement. Éditez ~/.bashrc :
bash
export ANDROID_HOME=$HOME/Android/Sdk
export PATH=$PATH:$ANDROID_HOME/emulator
export PATH=$PATH:$ANDROID_HOME/platform-tools
export PATH=$PATH:$ANDROID_HOME/tools
export PATH=$PATH:$ANDROID_HOME/tools/bin

Appliquez les changements :

bash
source ~/.bashrc

Étape 4 : Installation des dépendances supplémentaires

React Native CLI nécessite quelques outils supplémentaires pour compiler le code natif :

bash
sudo apt install -y watchman

Note : Watchman n'est pas strictement obligatoire mais recommandé pour la surveillance des fichiers.

Étape 5 : Création du projet React Native

Nous utiliserons l'outil en ligne de commande officiel pour initialiser le projet.

bash
npx @react-native-community/cli init MonPremierProjet

Remplacez MonPremierProjet par le nom de votre application. Cette commande peut prendre plusieurs minutes car elle télécharge toutes les dépendances.

Étape 6 : Lancement de l'application

Accédez au dossier du projet :

bash
cd MonPremierProjet

Avant de lancer l'application, assurez-vous qu'un émulateur Android est démarré ou qu'un appareil physique est connecté en mode débogage USB.

Pour lancer le serveur de développement et installer l'application sur l'appareil connecté :

bash
npx react-native run-android

Si tout est correctement configuré, vous verrez votre application se lancer sur l'écran de l'émulateur ou du téléphone.

Dépannage courant

  • Erreur SDK non trouvé : Vérifiez que ANDROID_HOME est correctement défini et pointe vers le dossier d'installation du SDK.
  • Échec du build Gradle : Essayez de nettoyer le projet avec cd android && ./gradlew clean, puis relancez la commande de run.
  • Problèmes de permissions : Assurez-vous d'avoir les droits nécessaires sur le dossier du SDK Android.

Conclusion

Vous avez maintenant un environnement React Native entièrement fonctionnel sur Ubuntu. Vous pouvez commencer à développer vos composants, installer des bibliothèques tierces et construire votre application mobile.

Pour aller plus loin, consultez la documentation officielle de React Native et explorez les fonctionnalités avancées de Learn'in.