Prise en main de la création d’une application de bureau avec React Native for Desktop

Article
11/09/2024

React Native for Desktop vous permet de créer une application plateforme Windows universelle (UWP) à l’aide de 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.

Prérequis

Vous trouverez la configuration requise pour l’utilisation de React Native for Desktop dans la page Configuration requise. Assurez-vous que le mode développeur est activé dans l’application Paramètres Windows.

Installer React Native pour Desktop

Vous pouvez créer une application de bureau Windows à l’aide de React Native for Desktop en suivant ces étapes.

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
```
Basculez vers le répertoire du projet et exécutez la commande suivante pour installer les packages React Native for Desktop :
```
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.

Partage via