Get started build a desktop app with React Native for Desktop

Article
11/08/2024

React Native for Desktop allows you to create a Universal Windows Platform (UWP) app using React.

Overview of React Native

React Native is an open-source mobile application framework created by Facebook. It is used to develop applications for Android, iOS, Web and UWP (Windows) providing native UI controls and full access to the native platform. Working with React Native requires an understanding of JavaScript fundamentals.

For more general information about React, see the React overview page.

Prerequisites

The setup requirements for using React Native for Desktop can be found on the System Requirements page. Ensure Developer Mode is turned ON in Windows Settings App.

Install React Native for Desktop

You can create a Windows desktop app using React Native for Desktop by following these steps.

Open a command line window (terminal) and navigate to the directory where you want to create your Windows desktop app project.
You can use this command with the Node Package Executor (NPX) to create a React Native project without the need to install locally or globally install additional tools. The command will generate a React Native app in the directory specified by <projectName>.
```
npx react-native init <projectName>
```
If you want to start a new project with a specific React Native version, you can use the --version argument. For information about versions of React Native, see Versions - React Native.
```
npx react-native@X.XX.X init  <projectName> --version X.XX.X
```
Switch to the project directory and run the following command to install the React Native for Desktop packages:
```
cd projectName
npx react-native-windows-init --overwrite
```
To run the app, first launch your web browser (ie. Microsoft Edge), then execute the following command:
```
npx react-native run-windows
```

Debug your React Native desktop app using Visual Studio

Install Visual Studio 2022 with the following options checked:
- Workloads: Universal Windows Platform development & Desktop development with C++.
- Individual Components: Development activities & Node.js development support.
Open the solution file in the application folder in Visual Studio (e.g., AwesomeProject/windows/AwesomeProject.sln if you used AwesomeProject as <projectName>).
Select the Debug configuration and the x64 platform from the combo box controls to the left of the Run button and underneath the Team and Tools menu item.
Run yarn start from your project directory, and wait for the React Native packager to report success.
Select Run to the right of the platform combo box control in VS, or select the Debug->Start without Debugging menu item. You now see your new app and Chrome should have loaded http://localhost:8081/debugger-ui/ in a new tab.
Select the F12 key or Ctrl+Shift+I to open Developer Tools in your web browser.

Debug your React Native desktop app using Visual Studio Code

Install Visual Studio Code
Open your applications folder in VS Code.
Install the React Native Tools plugin for VS Code.

Create a new file in the applications root directory, .vscode/launch.json and paste the following configuration:

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

Press F5 or navigate to the debug menu (alternatively press Ctrl+Shift+D) and in the Debug dropdown select "Debug Windows" and press the green arrow to run the application.

Share via