## Introduction Les commandes de base de React Native avec des exemples pratiques aident les opérateurs à passer d'un problème observé à un résultat vérifié. Commencez par identifier la version installée, la topologie de déploiement, les prérequis et le composant exact inspecté. Cet article se concentre sur les commandes React Native destinées aux développeurs, aux consultants DevOps et aux équipes techniques de startups. Il relie les commandes de base de React Native, les exemples React Native, l'aide-mémoire React Native et les opérations React Native aux commandes, aux sorties attendues, aux signaux d'échec et aux décisions de récupération correspondant à la technologie sélectionnée. L'objectif est la sécurité opérationnelle : observer avant de modifier, limiter le rayon d'impact, utiliser des espaces réservés plutôt que des secrets, vérifier le résultat et documenter la récupération si l'état attendu n'est pas atteint. ## Inventaire des versions et de l'environnement Pour les commandes React Native, l'inventaire des versions et de l'environnement doit nommer le composant concerné, la plage de versions prises en charge, les prérequis, une observation en lecture seule, le plus petit changement justifié et la commande ou le signal qui vérifie le résultat. Dans cette étape, séparez l'observation de l'intervention. Capturez d'abord l'état actuel et les horodatages, protégez les informations d'identification et le matériel privé, puis ne modifiez qu'un élément délimité uniquement lorsque son rayon d'impact et sa procédure de récupération sont compris. Les concepts importants sont les commandes React Native, les commandes de base de React Native, les exemples React Native, l'aide-mémoire React Native et les opérations React Native. Les domaines connexes comme Expo, Android et les API REST ne doivent être inclus que s'ils affectent les prérequis, la compatibilité, la sécurité, l'observabilité ou la récupération pour ce sujet. Pour cette étape, identifiez d'abord la version installée et la topologie de déploiement. Capturez l'état observable actuel avec une commande en lecture seule provenant de la CLI ou de l'API documentée du produit, puis définissez le résultat attendu et le signal d'échec avant d'effectuer un changement. Utilisez des commandes adaptées à la version, issues de la documentation officielle. Les exemples doivent employer des espaces réservés explicites, indiquer les prérequis et le rayon d'impact, et inclure une étape de vérification ainsi qu'une procédure de récupération testée. Ne placez jamais de véritables informations d'identification, jetons, clés privées ou identifiants de production dans un article. ### Prérequis Avant d'exécuter toute commande, vérifiez que Node.js, npm ou Yarn, la CLI React Native et les outils spécifiques à la plateforme sont installés. Utilisez ces vérifications en lecture seule : node --version # Attendu : v18.17.1 ou version LTS ultérieure npm --version # Attendu : 9.6.7 ou ultérieure npx react-native --version # Attendu : 6.3.1 (ou votre version installée) adb --version # Android uniquement # Attendu : Android Debug Bridge version 1.0.41 Si une commande renvoie « commande introuvable » ou une version hors de la plage prise en charge, installez ou mettez à jour l'outil manquant avant de continuer. Par exemple : npm install -g react-native-cli@latest # Vérifier : npx react-native --version ### Observation en lecture seule Capturez l'état actuel de l'environnement et du projet sans rien modifier : npx react-native info # Attendu : affiche les informations système, notamment l'OS, Node, npm, la version de React Native et les détails de la plateforme npx react-native doctor # Attendu : signale les problèmes de dépendances manquantes et suggère des correctifs Enregistrez la sortie et l'horodatage. Si react-native info signale une version obsolète de React Native, planifiez une mise à niveau séparée plutôt que de la mélanger avec d'autres modifications. ### Plus petit changement justifié Exemple : vous devez ajouter une nouvelle dépendance. Au lieu de modifier directement package.json, utilisez le gestionnaire de paquets pour mettre à jour le fichier de verrouillage de manière cohérente : npm install react-native-vector-icons # Attendu : ajoute le paquet et met à jour package-lock.json Rayon d'impact : seuls les dossiers node_modules et les fichiers de paquets du projet changent. Récupération : npm uninstall react-native-vector-icons et supprimez node_modules si nécessaire. ### Vérification Après tout changement, vérifiez à nouveau la version et l'environnement : npx react-native info # Vérifiez que la version de React Native est inchangée git status # Assurez-vous que seuls les fichiers prévus ont changé (package.json, package-lock.json, node_modules s'ils sont suivis) Si la sortie diffère des attentes, examinez le changement et annulez-le si nécessaire. ## Chemin de configuration sécurisé Pour les commandes React Native, le chemin de configuration sécurisé doit nommer le composant concerné, la plage de versions prises en charge, les prérequis, une observation en lecture seule, le plus petit changement justifié et la commande ou le signal qui vérifie le résultat. Dans cette étape, séparez l'observation de l'intervention. Capturez d'abord l'état actuel et les horodatages, protégez les informations d'identification et le matériel privé, puis ne modifiez qu'un élément délimité uniquement lorsque son rayon d'impact et sa procédure de récupération sont compris. Les concepts importants sont les commandes React Native, les commandes de base de React Native, les exemples React Native, l'aide-mémoire React Native et les opérations React Native. Les domaines connexes comme Expo, Android et les API REST ne doivent être inclus que s'ils affectent les prérequis, la compatibilité, la sécurité, l'observabilité ou la récupération pour ce sujet. Pour cette étape, identifiez d'abord la version installée et la topologie de déploiement. Capturez l'état observable actuel avec une commande en lecture seule provenant de la CLI ou de l'API documentée du produit, puis définissez le résultat attendu et le signal d'échec avant d'effectuer un changement. Utilisez des commandes adaptées à la version, issues de la documentation officielle. Les exemples doivent employer des espaces réservés explicites, indiquer les prérequis et le rayon d'impact, et inclure une étape de vérification ainsi qu'une procédure de récupération testée. Ne placez jamais de véritables informations d'identification, jetons, clés privées ou identifiants de production dans un article. ### Modifications de configuration courantes Les projets React Native utilisent react-native.config.js , metro.config.js , babel.config.js et des fichiers spécifiques à la plateforme comme android/app/build.gradle et ios/Podfile . Sauvegardez toujours le fichier avant de le modifier et utilisez un système de contrôle de version. Exemple : configuration d'une police personnalisée. - Observation en lecture seule : vérifiez la configuration actuelle des polices dans react-native.config.js : cat react-native.config.js # Si le fichier n'existe pas, sortie : Aucun fichier ou dossier de ce type - Plus petit changement : créez ou modifiez react-native.config.js : module.exports = { assets: ['./assets/fonts/'], }; - Liez les ressources (React Native 0.60+ le fait automatiquement, mais exécutez cette commande pour les versions antérieures) : npx react-native link # Attendu : les fichiers de polices sont copiés dans les dossiers de ressources iOS et Android - Vérifiez : vérifiez que les polices sont référencées dans les projets de plateforme : grep -R "fontName" ios/ android/ # Si la police personnalisée est utilisée, vous devriez voir des correspondances dans Info.plist ou fonts.xml - Récupération : supprimez la ligne ajoutée dans react-native.config.js et dissociez : npx react-native unlink react-native-vector-icons Rayon d'impact : modifie uniquement la liaison des ressources. Procédure de récupération : annulez le fichier de configuration et reconstruisez. ### Variables d'environnement et secrets Ne codez jamais en dur les secrets dans les fichiers de configuration. Utilisez plutôt des variables d'environnement ou un gestionnaire de secrets sécurisé. Exemple : définition d'une URL de base d'API pour le développement. - Observation en lecture seule : vérifiez l'URL d'API actuelle utilisée dans le code : grep -R "API_URL" src/ # Attendu : const API_URL = 'http://localhost:3000'; - Plus petit changement : créez un fichier .env (ajoutez-le à .gitignore ) : API_URL=https://api.example.com - Installez et configurez react-native-config : npm install react-native-config # Suivez les instructions d'installation pour iOS et Android (ajoutez au Podfile, gradle, etc.) - Vérifiez : dans le code de l'application, utilisez Config.API_URL et journalisez-la en développement : console.log(Config.API_URL); // Attendu : https://api.example.com - Récupération : supprimez .env et annulez les modifications du code. Rayon d'impact : uniquement la configuration de l'application ; les secrets ne sont pas validés. ## Vérification et diagnostics Pour les commandes React Native, la vérification et les diagnostics doivent nommer le composant concerné, la plage de versions prises en charge, les prérequis, une observation en lecture seule, le plus petit changement justifié et la commande ou le signal qui vérifie le résultat. Dans cette étape, séparez l'observation de l'intervention. Capturez d'abord l'état actuel et les horodatages, protégez les informations d'identification et le matériel privé, puis ne modifiez qu'un élément délimité uniquement lorsque son rayon d'impact et sa procédure de récupération sont compris. Les concepts importants sont les commandes React Native, les commandes de base de React Native, les exemples React Native, l'aide-mémoire React Native et les opérations React Native. Les domaines connexes comme Expo, Android et les API REST ne doivent être inclus que s'ils affectent les prérequis, la compatibilité, la sécurité, l'observabilité ou la récupération pour ce sujet. Pour cette étape, identifiez d'abord la version installée et la topologie de déploiement. Capturez l'état observable actuel avec une commande en lecture seule provenant de la CLI ou de l'API documentée du produit, puis définissez le résultat attendu et le signal d'échec avant d'effectuer un changement. Utilisez des commandes adaptées à la version, issues de la documentation officielle. Les exemples doivent employer des espaces réservés explicites, indiquer les prérequis et le rayon d'impact, et inclure une étape de vérification ainsi qu'une procédure de récupération testée. Ne placez jamais de véritables informations d'identification, jetons, clés privées ou identifiants de production dans un article. ### Exécution de l'application et vérification des journaux Démarrez le bundler Metro et exécutez l'application sur un simulateur/émulateur ou un appareil. Observez les journaux pour détecter les erreurs. npx react-native start # Attendu : Metro en attente sur http://localhost:8081 Dans un terminal séparé : npx react-native run-android # Attendu : construit et installe l'application ; si aucun appareil, erreur : Aucun appareil Android trouvé. Pour iOS : npx react-native run-ios --simulator="iPhone 14" # Attendu : construit et lance dans le simulateur Vérifiez les journaux : npx react-native log-android # Attendu : diffuse les journaux de l'appareil ; appuyez sur Ctrl+C pour arrêter Si l'application plante, les journaux afficheront la trace de la pile. Diagnostiquez en fonction des messages d'erreur. ### Débogage du JavaScript Utilisez React Native Debugger ou Chrome DevTools : - Démarrez Metro et l'application comme ci-dessus. - Ouvrez le menu développeur dans l'application (secouez l'appareil ou appuyez sur Cmd+D dans le simulateur iOS, Ctrl+M dans l'émulateur Android). - Appuyez sur « Debug JS Remotely » – cela ouvre Chrome à http://localhost:8081/debugger-ui . - Dans Chrome DevTools, inspectez la console et les requêtes réseau. Alternativement, utilisez React Native Debugger autonome : brew install --cask react-native-debugger # Ensuite, ouvrez l'application et définissez l'hôte du débogueur sur localhost:8081 ### Commandes de diagnostic courantes - npx react-native info – résumé de l'environnement - npx react-native doctor – contrôle de santé - npx react-native log-ios – journaux iOS - npx react-native log-android – journaux Android - npx react-native bundle – regroupe le JS pour la production, utile pour tester la minification Exemple : test de bundle de production : npx react-native bundle --entry-file index.js --platform android --dev false --bundle-output /tmp/main.jsbundle # Attendu : crée le fichier bundle sans erreurs ## Modes d'échec et récupération Pour les commandes React Native, les modes d'échec et la récupération doivent nommer le composant concerné, la plage de versions prises en charge, les prérequis, une observation en lecture seule, le plus petit changement justifié et la commande ou le signal qui vérifie le résultat. Dans cette étape, séparez l'observation de l'intervention. Capturez d'abord l'état actuel et les horodatages, protégez les informations d'identification et le matériel privé, puis ne modifiez qu'un élément délimité uniquement lorsque son rayon d'impact et sa procédure de récupération sont compris. Les concepts importants sont les commandes React Native, les commandes de base de React Native, les exemples React Native, l'aide-mémoire React Native et les opérations React Native. Les domaines connexes comme Expo, Android et les API REST ne doivent être inclus que s'ils affectent les prérequis, la compatibilité, la sécurité, l'observabilité ou la récupération pour ce sujet. Pour cette étape, identifiez d'abord la version installée et la topologie de déploiement. Capturez l'état observable actuel avec une commande en lecture seule provenant de la CLI ou de l'API documentée du produit, puis définissez le résultat attendu et le signal d'échec avant d'effectuer un changement. Utilisez des commandes adaptées à la version, issues de la documentation officielle. Les exemples doivent employer des espaces réservés explicites, indiquer les prérequis et le rayon d'impact, et inclure une étape de vérification ainsi qu'une procédure de récupération testée. Ne placez jamais de véritables informations d'identification, jetons, clés privées ou identifiants de production dans un article. ### Échecs courants et leurs indicateurs - Conflit de port du bundler Metro : Erreur : EADDRINUSE: address already in use :::8081 . Récupération : tuez le processus sur le port 8081 avec lsof -ti:8081 | xargs kill , puis redémarrez Metro. - Échec de construction Gradle sur Android : souvent dû à des versions de SDK incompatibles ou à des dépendances manquantes. Vérifiez android/build.gradle et android/app/build.gradle . Récupération : nettoyez avec cd android && ./gradlew clean && cd .. && npx react-native run-android . - Problèmes CocoaPods sur iOS : Erreur : CocoaPods could not find compatible versions for pod "React" . Récupération : exécutez cd ios && pod repo update && pod install --repo-update . - Erreur de syntaxe JavaScript : Metro affiche un écran rouge avec la trace de la pile. Corrigez la syntaxe et rechargez avec r dans le terminal Metro. - Impossible de se connecter au serveur de développement : assurez-vous que l'appareil et l'ordinateur sont sur le même réseau, ou utilisez adb reverse tcp:8081 tcp:8081 pour Android via USB. ### Bonnes pratiques de récupération - Documentez l'échec : message d'erreur exact, commande utilisée, environnement. - Isolez la cause : utilisez les journaux et les informations de version. - Appliquez le plus petit correctif : par exemple, mettez à jour une dépendance. - Vérifiez : réexécutez la commande et vérifiez la sortie attendue. - Enregistrez la solution pour référence future. Exemple : récupération après un échec d'installation de dépendance. # Échec : npm install échoue avec une erreur ERESOLVE # Récupération : utilisez les anciennes dépendances de pairs ou mettez à jour npm npm install --legacy-peer-deps # Vérifiez : package.json et fichier de verrouillage mis à jour, npx react-native start fonctionne ## Liste de contrôle des opérations Pour les commandes React Native, la liste de contrôle des opérations doit nommer le composant concerné, la plage de versions prises en charge, les prérequis, une observation en lecture seule, le plus petit changement justifié et la commande ou le signal qui vérifie le résultat. Dans cette étape, séparez l'observation de l'intervention. Capturez d'abord l'état actuel et les horodatages, protégez les informations d'identification et le matériel privé, puis ne modifiez qu'un élément délimité uniquement lorsque son rayon d'impact et sa procédure de récupération sont compris. Les concepts importants sont les commandes React Native, les commandes de base de React Native, les exemples React Native, l'aide-mémoire React Native et les opérations React Native. Les domaines connexes comme Expo, Android et les API REST ne doivent être inclus que s'ils affectent les prérequis, la compatibilité, la sécurité, l'observabilité ou la récupération pour ce sujet. Pour cette étape, identifiez d'abord la version installée et la topologie de déploiement. Capturez l'état observable actuel avec une commande en lecture seule provenant de la CLI ou de l'API documentée du produit, puis définissez le résultat attendu et le signal d'échec avant d'effectuer un changement. Utilisez des commandes adaptées à la version, issues de la documentation officielle. Les exemples doivent employer des espaces réservés explicites, indiquer les prérequis et le rayon d'impact, et inclure une étape de vérification ainsi qu'une procédure de récupération testée. Ne placez jamais de véritables informations d'identification, jetons, clés privées ou identifiants de production dans un article. Utilisez cette liste de contrôle pour toute opération React Native : - Identifiez le composant et la version : par exemple, React Native 0.72.3, Node 18.17.1, plateforme cible Android/iOS. - Exécutez une observation en lecture seule : npx react-native info et capturez la sortie. - Définissez le résultat attendu et le signal d'échec : par exemple, la commande renvoie le code de sortie 0 et aucune erreur dans les journaux. - Effectuez le plus petit changement justifié : une commande ou une modification de configuration. - Vérifiez : réexécutez l'observation ou un contrôle spécifique (par exemple, exécutez l'application et voyez l'interface utilisateur). - Documentez et récupérez si nécessaire : notez ce qui a été fait et comment revenir en arrière. Exemple d'élément de liste de contrôle pour l'ajout d'une bibliothèque : - Composant : react-native-vector-icons - Version : la plus récente compatible avec RN 0.72.x - Prérequis : projet initialisé, git propre - Lecture seule : npm ls react-native-vector-icons (attendu : vide) - Changement : npm install react-native-vector-icons - Vérifiez : importez Icon dans un écran de test et affichez-le, exécutez l'application et voyez l'icône affichée - Récupération : npm uninstall react-native-vector-icons et supprimez l'utilisation ## Conclusion Les commandes de base de React Native avec des exemples pratiques ne sont utiles que si chaque recommandation est limitée à la version, observable et réversible lorsque la technologie le permet. Copier une commande sans vérifier les prérequis et la sortie attendue n'est pas une procédure opérationnelle. Comme prochaine étape, choisissez une vérification à faible risque pour les commandes React Native, enregistrez l'état actuel, exécutez la vérification documentée, comparez le résultat avec le signal attendu et passez en revue les dépendances telles qu'Expo, Android et les API REST. Un flux de travail technique fiable rend les échecs visibles, protège les valeurs sensibles, limite les modifications à la ressource prévue et définit la vérification de récupération avant qu'un incident ne force la décision.