Dela via

Kom igång med att skapa en skrivbordsapp med React Native for Desktop

Med React Native for Desktop kan du skapa en UWP-app (Universal Windows Platform) med React.

Översikt över React Native

React Native är ett ramverk för mobilprogram som skapats av Facebook med öppen källkod. Den används för att utveckla program för Android, iOS, Web och UWP (Windows) som tillhandahåller interna användargränssnittskontroller och fullständig åtkomst till den interna plattformen. Att arbeta med React Native kräver en förståelse av grunderna i JavaScript.

Mer allmän information om React finns på sidan React-översikt.

Förutsättningar

Konfigurationskraven för att använda React Native for Desktop finns på sidan Systemkrav . Kontrollera att utvecklarläget är aktiverat i Windows-inställningar.

Installera React Native för Desktop

Du kan skapa en Windows-skrivbordsapp med React Native for Desktop genom att följa dessa steg.

  1. Öppna ett kommandoradsfönster (terminal) och navigera till katalogen där du vill skapa ditt Windows-skrivbordsappprojekt.

  2. Du kan använda det här kommandot med Node Package Executor (NPX) för att skapa ett React Native-projekt utan att behöva installera ytterligare verktyg lokalt eller globalt. Kommandot genererar en React Native-app i katalogen som anges av <projectName>.

    npx react-native init <projectName>

    Om du vill starta ett nytt projekt med en specifik React Native-version kan du använda argumentet --version. Information om versioner av React Native finns i versioner – React Native.

    npx react-native@X.XX.X init  <projectName> --version X.XX.X

  3. Växla till projektkatalogen och kör följande kommando för att installera React Native for Desktop-paketen:

    cd projectName
npx react-native-windows-init --overwrite

  4. Om du vill köra appen startar du först webbläsaren (dvs. Microsoft Edge) och kör sedan följande kommando:

    npx react-native run-windows

Felsöka din React Native-skrivbordsapp med Hjälp av Visual Studio

  • Installera Visual Studio 2022 med följande alternativ markerade:

    • Arbetsbelastningar: Utveckling av universella Windows-plattformar och skrivbordsutveckling med C++.
    • Enskilda komponenter: Utvecklingsaktiviteter och Node.js utvecklingsstöd.

  • Öppna lösningsfilen i programmappen i Visual Studio (t.ex. AwesomeProject/windows/AwesomeProject.sln om du använde AwesomeProject som <projectName>).

  • Välj felsökningskonfigurationen och x64-plattformen från kombinationsrutans kontroller till vänster om knappen Kör och under menyalternativet Team och Verktyg.

  • Kör yarn start från projektkatalogen och vänta tills React Native-paketeraren rapporterar att den har slutförts.

  • Välj Kör till höger om plattformskombinationsrutekontrollen i VS eller välj menyalternativet Felsök>Starta utan felsökning. Du ser nu din nya app, och Chrome ska ha laddat http://localhost:8081/debugger-ui/ i en ny flik.

  • Välj F12-tangenten eller Ctrl+Skift+I för att öppna Utvecklarverktyg i webbläsaren.

Felsöka din React Native-skrivbordsapp med hjälp av Visual Studio Code

  • Installera Visual Studio Code

  • Öppna applikationsmappen i VS Code.

  • Installera plugin-programmet React Native Tools för VS Code.

  • Skapa en ny fil i programrotkatalogen, .vscode/launch.json och klistra in följande konfiguration:

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

  • Tryck på F5 eller gå till felsökningsmenyn (du kan också trycka på Ctrl+Skift+D) och i listrutan Felsök väljer du "Felsöka Windows" och trycker på den gröna pilen för att köra programmet.

Ytterligare resurser

  • Last updated on