Introduzione alla compilazione di un'app desktop con React Native per Windows

Articolo
03/10/2024

React Native per Windows consente di creare un'app nella piattaforma UWP (Universal Windows Platform) usando React.

Panoramica di React Native

React Native è un framework di applicazioni per dispositivi mobili open source creato da Facebook. Viene usato per sviluppare applicazioni per Android, iOS, Web e piattaforma UWP (Windows) che forniscono controlli dell'interfaccia utente nativi e l'accesso completo alla piattaforma nativa. L'uso di React Native richiede una conoscenza delle nozioni fondamentali di JavaScript.

Per altre informazioni generali su React, vedere la pagina Panoramica di React.

Prerequisiti

I requisiti di configurazione per l'uso di React Native per Windows sono disponibili nella pagina Requisiti di sistema. Verificare che la modalità sviluppatore sia attivata nell'app in Impostazioni di Windows.

Installare React Native per Windows

È possibile creare un'app desktop di Windows usando React Native per Windows seguendo questa procedura.

Aprire una finestra della riga di comando (terminale) e passare alla directory in cui si vuole creare il progetto di app desktop di Windows.
È possibile usare questo comando con Node Package Executor (NPX) per creare un progetto React Native senza la necessità di installare in locale o a livello globale strumenti aggiuntivi. Il comando genererà un'app React Native nella directory specificata da <projectName>.
```
npx react-native init <projectName>
```
Se si vuole avviare un nuovo progetto con una versione specifica di React Native, è possibile usare l'argomento --version. Per informazioni sulle versioni di React Native, vedere Versioni - React Native.
```
npx react-native@X.XX.X init  <projectName> --version X.XX.X
```
Passare alla directory del progetto ed eseguire il comando seguente per installare i pacchetti React Native per Windows:
```
cd projectName
npx react-native-windows-init --overwrite
```
Per eseguire l'app, avviare prima il Web browser (ad esempio. Microsoft Edge), quindi eseguire il comando seguente:
```
npx react-native run-windows
```

Eseguire il debug dell'app desktop React Native con Visual Studio

Installare Visual Studio 2022 con le opzioni seguenti selezionate:
- Carichi di lavoro: sviluppo della piattaforma Universal Windows Platform & Sviluppo di desktop con C++.
- Singoli componenti: Attività di sviluppo & supporto allo sviluppo Node.js.
Aprire il file della soluzione nella cartella dell'applicazione in Visual Studio (ad esempio, AwesomeProject/windows/AwesomeProject.sln se si usa AwesomeProject come <projectName>).
Selezionare la configurazione di debug e la piattaforma x64 dai controlli della casella combinata a sinistra del pulsante Esegui e sotto la voce di menu Team e strumenti.
Eseguire yarn start dalla directory del progetto e attendere che lo strumento di creazione pacchetti React Native segnali l'esito positivo.
Selezionare Esegui a destra del controllo della casella combinata della piattaforma in Visual Studio, oppure selezionare la voce di menu Debug->Avvio senza debug. Ora viene visualizzata la nuova app e Chrome dovrebbe averla caricata http://localhost:8081/debugger-ui/ in una nuova scheda.
Selezionare il tasto F12 o Ctrl+Shift+I per aprire Strumenti di sviluppo nel Web browser.

Eseguire il debug dell'app desktop React Native con Visual Studio Code

Installare Visual Studio Code
Aprire la cartella delle applicazioni in VS Code.
Installare il plug-in React Native Tools per VS Code.

Creare un nuovo file nella directory radice delle applicazioni, .vscode/launch.json e incollare la configurazione seguente:

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

Premere F5 o passare al menu di debug (in alternativa premere Ctrl+Shift+D) e nell'elenco a discesa Debug selezionare "Debug Windows" e premere la freccia verde per eseguire l'applicazione.