Bien démarrer avec la création d’une application de bureau en utilisant React Native pour Windows

Article
06/30/2023

React Native pour Windows vous permet de créer une application de plateforme Windows universelle (UWP) avec React.

Vue d’ensemble de React Native

React Native est un framework d’application mobile open source créé par Facebook. Il permet de développer des applications pour Android, iOS, web et UWP (Windows) en fournissant des contrôles d’interface utilisateur natifs et un accès complet à la plateforme native. L’utilisation de React Native nécessite de comprendre les bases de JavaScript.

Pour plus d’informations générales sur React, consultez la page Vue d’ensemble de React.

Prerequisites

La configuration requise pour l’utilisation de React Native pour Windows est disponible dans la page Configuration système requise. Assurez-vous que le mode développeur est activé dans l’application Paramètres Windows.

Installer React Native pour Windows

Vous pouvez créer une application de bureau Windows avec React Native pour Windows en procédant comme suit.

Ouvrez une fenêtre de ligne de commande (terminal) et accédez au répertoire dans lequel vous souhaitez créer votre projet d’application de bureau Windows.
Vous pouvez utiliser la commande ci-après avec l’exécuteur de package de nœud (NPX) pour créer un projet React Native sans avoir besoin d’installer des outils supplémentaires localement ou de manière globale. La commande génère une application React Native dans le répertoire spécifié par <projectName>.
```
npx react-native init <projectName>
```
Si vous souhaitez démarrer un nouveau projet avec une version React Native spécifique, vous pouvez utiliser l’argument --version. Pour plus d’informations sur les versions de React Native, consultez Versions - React Native.
```
npx react-native@X.XX.X init  <projectName> --version X.XX.X
```
Accédez au répertoire du projet et exécutez la commande suivante pour installer les packages React Native pour Windows :
```
cd projectName
npx react-native-windows-init --overwrite
```
Pour exécuter l’application, commencez par lancer votre navigateur web (par exemple, Microsoft Edge), puis exécutez la commande suivante :
```
npx react-native run-windows
```

Déboguer votre application de bureau React Native avec Visual Studio

Installez Visual Studio 2022 avec les options suivantes activées :
- Charges de travail : Développement pour la plateforme Windows universelle et Développement Desktop en C++.
- Composants individuels : Activités de développement et Prise en charge du développement Node.js.
Ouvrez le fichier solution dans le dossier de l’application dans Visual Studio (par exemple, SuperProjet/windows/SuperProjet.sln si vous avez utilisé SuperProjet comme <projectName>).
Sélectionnez la configuration Debug et la plateforme x64 dans les contrôles de zone de liste déroulante à gauche du bouton Exécuter, puis sous l’élément de menu Équipe et outils.
Exécutez yarn start à partir du répertoire de votre projet et attendez que le gestionnaire de package React Native indique que la procédure a réussi.
Sélectionnez Exécuter à droite du contrôle de zone de liste déroulante de plateformes dans Visual Studio ou sélectionnez l’élément de menu Déboguer->Démarrer sans débogage. Vous voyez maintenant votre nouvelle application et Chrome doit avoir chargé http://localhost:8081/debugger-ui/ dans un nouvel onglet.
Sélectionnez la touche F12 ou Ctrl+Maj+I pour ouvrir Outils de développement dans votre navigateur web.

Déboguer votre application de bureau React Native avec Visual Studio Code

Installer Visual Studio Code
Ouvrez le dossier de votre l’application dans VS Code.
Installez le plug-in React Native Tools pour VS Code.

Créez un fichier dans le répertoire racine de l’application, vscode/launch.json, et collez la configuration suivante :

{
    "version": "0.2.0",
    "configurations": [
        {
            "name": "Debug Windows",
            "cwd": "${workspaceFolder}",
            "type": "reactnative",
            "request": "launch",
            "platform": "windows"
        }
    ]
}

Appuyez sur F5 ou accédez au menu de débogage (ou appuyez sur Ctrl+Maj+D) et, dans la liste déroulante Débogage, sélectionnez « Debug Windows », puis appuyez sur la flèche verte pour exécuter l’application.