Erste Schritte beim Erstellen einer Desktop-App mit React Native für Windows

Artikel
06/30/2023

Mit React Native für Windows können Sie eine Universelle Windows-Plattform-App (UWP-App) mithilfe von React erstellen.

Übersicht über React Native

React Native ist ein von Facebook erstelltes Open-Source-Framework für mobile Anwendungen. Es wird verwendet, um Anwendungen für Android, iOS, Web und UWP (Windows) zu entwickeln, die native UI-Steuerelemente und Vollzugriff auf die native Plattform bereitstellen. Die Arbeit mit React Native erfordert ein Verständnis der JavaScript-Grundlagen.

Weitere allgemeine Informationen zu React finden Sie auf der Seite Übersicht über React.

Voraussetzungen

Die Setupanforderungen für die Verwendung von React Native für Windows finden Sie auf der Seite Systemanforderungen. Stellen Sie sicher, dass der Entwicklermodus in der Einstellungs-App von Windows aktiviert ist.

React Native für Windows installieren

Sie können eine Windows-Desktop-App mit React Native für Windows erstellen, indem Sie die folgenden Schritte ausführen.

Öffnen Sie ein Befehlszeilenfenster (Terminal), und navigieren Sie zu dem Verzeichnis, in dem Sie Ihr Windows-Desktop-App-Projekt erstellen möchten.
Sie können diesen Befehl mit dem Node Package Executor (NPX) verwenden, um ein React Native-Projekt zu erstellen, ohne zusätzliche Tools lokal oder global installieren zu müssen. Der Befehl generiert eine React Native-App in dem von <projectName> angegebenen Verzeichnis.
```
npx react-native init <projectName>
```
Wenn Sie ein neues Projekt mit einer bestimmten React Native-Version starten möchten, können Sie das --version-Argument verwenden. Informationen zu Versionen von React Native finden Sie unter Versionen – React Native.
```
npx react-native@X.XX.X init  <projectName> --version X.XX.X
```
Wechseln Sie zum Projektverzeichnis, und führen Sie den folgenden Befehl aus, um die React Native für Windows-Pakete zu installieren:
```
cd projectName
npx react-native-windows-init --overwrite
```
Um die App auszuführen, starten Sie zunächst Ihren Webbrowser (d. h. Microsoft Edge), führen Sie dann den folgenden Befehl aus:
```
npx react-native run-windows
```

Debuggen Ihrer React Native-Desktop-App mithilfe von Visual Studio

Installieren Sie Visual Studio 2022 mit den folgenden ausgewählten Optionen:
- Workloads: Entwicklung für die Universelle Windows-Plattform & Desktopentwicklung mit C++.
- Einzelne Komponenten: Entwicklungsaktivitäten & Node.js-Entwicklungsunterstützung.
Öffnen Sie die Projektmappendatei im Anwendungsordner in Visual Studio (z. B. AwesomeProject/windows/AwesomeProject.sln, wenn Sie „AwesomeProject“ als <projectName> verwendet haben).
Wählen Sie die Debugkonfiguration und die x64-Plattform aus den Kombinationsfeld-Steuerelementen links von der Schaltfläche „Ausführen“ und unterhalb des Menüelements „Team und Tools“ aus.
Führen Sie yarn start in Ihrem Projektverzeichnis aus, und warten Sie, bis der React Native-Packager einen Erfolg meldet.
Wählen Sie Ausführen rechts neben dem Plattformkombinationsfeld-Steuerelement in VS aus, oder wählen Sie das Menüelement „Debuggen->Ohne Debuggen starten“ aus. Sie sehen nun Ihre neue App, und Chrome sollte http://localhost:8081/debugger-ui/ in einer neuen Registerkarte geladen haben.
Drücken Sie F12 oder STRG+UMSCHALT+I, um Entwicklertools im Webbrowser zu öffnen.

Debuggen Ihrer React Native-Desktop-App mithilfe von Visual Studio Code

Installieren von Visual Studio Code
Öffnen Sie Ihren Anwendungsordner in VS Code.
Installieren Sie das React Native-Tools-Plug-In für VS Code.

Erstellen Sie eine neue Datei im Stammverzeichnis der Anwendung, .vscode/launch.json, und fügen Sie die folgende Konfiguration ein:

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

Drücken Sie F5, oder navigieren Sie zum Debugmenü (alternativ drücken Sie STRG+UMSCHALT+D), und wählen Sie in der Dropdownliste „Debuggen“ die Option „Fenster debuggen“ aus, und drücken Sie den grünen Pfeil, um die Anwendung auszuführen.