|
1 | 1 | --- |
2 | | -title: React Native for Desktop desktop app development |
3 | | -description: Install React Native for Desktop and get started with Windows desktop app development using React Native components. |
4 | | -ms.topic: get-started |
5 | | -keywords: React Native for Desktop, windows, react native, install react native on windows, install React Native for Desktop, build a desktop app with react, create a windows app with react, react for desktop apps, npx react-native, react-native-windows-init |
6 | | -ms.date: 03/30/2021 |
| 2 | +title: React Native for Desktop |
| 3 | +description: Build native Windows desktop apps with JavaScript using React Native for Desktop, a Microsoft open-source project. |
| 4 | +ms.topic: concept-article |
| 5 | +keywords: React Native for Desktop, react native windows, native windows app, UWP react |
| 6 | +ms.localizationpriority: medium |
| 7 | +ms.date: 03/23/2026 |
7 | 8 | --- |
8 | 9 |
|
9 | | -# Get started build a desktop app with React Native for Desktop |
| 10 | +# React Native for Desktop |
10 | 11 |
|
11 | | -[React Native for Desktop](https://microsoft.github.io/react-native-windows) allows you to create a Universal Windows Platform (UWP) app using React. |
| 12 | +[React Native for Desktop](https://microsoft.github.io/react-native-windows/) is a Microsoft open-source project that lets you build **native Windows desktop applications** using React and JavaScript. Unlike React web apps that run in a browser, React Native for Desktop renders native Windows UI controls. The same JavaScript components can also target Android, iOS, and macOS. |
12 | 13 |
|
13 | | -## Overview of React Native |
| 14 | +## Get started |
14 | 15 |
|
15 | | -React Native is an [open-source](https://github.com/facebook/react-native) 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. |
16 | | - |
17 | | -For more general information about React, see the [React overview](./react-overview.md) page. |
18 | | - |
19 | | -## Prerequisites |
20 | | - |
21 | | -The setup requirements for using React Native for Desktop can be found on the [System Requirements](https://microsoft.github.io/react-native-windows/docs/rnw-dependencies) page. Ensure Developer Mode is turned ON in Windows Settings. |
22 | | - |
23 | | -## Install React Native for Desktop |
24 | | - |
25 | | -You can create a Windows desktop app using React Native for Desktop by following these steps. |
26 | | - |
27 | | -1. Open a command line window (terminal) and navigate to the directory where you want to create your Windows desktop app project. |
28 | | -2. 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>`. |
29 | | - |
30 | | - ```powershell |
31 | | - npx react-native init <projectName> |
32 | | - ``` |
33 | | - 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](https://reactnative.dev/versions). |
34 | | - |
35 | | - ```powershell |
36 | | - npx [email protected] init <projectName> --version X.XX.X |
37 | | - ``` |
38 | | -
|
39 | | -4. Switch to the project directory and run the following command to install the React Native for Desktop packages: |
40 | | -
|
41 | | - ```powershell |
42 | | - cd projectName |
43 | | - npx react-native-windows-init --overwrite |
44 | | - ``` |
45 | | -
|
46 | | -5. To run the app, first launch your web browser (ie. Microsoft Edge), then execute the following command: |
47 | | -
|
48 | | - ```powershell |
49 | | - npx react-native run-windows |
50 | | - ``` |
51 | | -
|
52 | | -## Debug your React Native desktop app using Visual Studio |
53 | | -
|
54 | | -- [Install Visual Studio 2022](/visualstudio/install/install-visual-studio) with the following options checked: |
55 | | - - Workloads: Universal Windows Platform development & Desktop development with C++. |
56 | | - - Individual Components: Development activities & Node.js development support. |
57 | | -
|
58 | | -- Open the solution file in the application folder in Visual Studio (e.g., AwesomeProject/windows/AwesomeProject.sln if you used AwesomeProject as \<projectName>). |
59 | | -
|
60 | | -- 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. |
61 | | -
|
62 | | -- Run `yarn start` from your project directory, and wait for the React Native packager to report success. |
63 | | -
|
64 | | -- 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. |
65 | | -
|
66 | | -- Select the F12 key or Ctrl+Shift+I to open Developer Tools in your web browser. |
67 | | -
|
68 | | -## Debug your React Native desktop app using Visual Studio Code |
69 | | -
|
70 | | -- [Install Visual Studio Code](https://code.visualstudio.com/download) |
71 | | -- Open your applications folder in VS Code. |
72 | | -- Install the [React Native Tools plugin for VS Code](https://marketplace.visualstudio.com/items?itemName=msjsdiag.vscode-react-native). |
73 | | -- Create a new file in the applications root directory, .vscode/launch.json and paste the following configuration: |
74 | | - ```json |
75 | | - { |
76 | | - "version": "0.2.0", |
77 | | - "configurations": [ |
78 | | - { |
79 | | - "name": "Debug Windows", |
80 | | - "cwd": "${workspaceFolder}", |
81 | | - "type": "reactnative", |
82 | | - "request": "launch", |
83 | | - "platform": "windows" |
84 | | - } |
85 | | - ] |
86 | | - } |
87 | | - ``` |
88 | | -
|
89 | | -- 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. |
| 16 | +For installation instructions, system requirements, and tutorials, see the **[React Native for Windows documentation](https://microsoft.github.io/react-native-windows/docs/getting-started)**. |
90 | 17 |
|
91 | 18 | ## Additional resources |
92 | 19 |
|
93 | | -- [React Native for Desktop docs](https://microsoft.github.io/react-native-windows/docs/getting-started) |
94 | | -- [React Native docs](https://reactnative.dev/docs/getting-started) |
95 | | -- [React docs](https://reactjs.org/) |
96 | | -- [Install NodeJS on Windows](./nodejs-on-windows.md) |
97 | | -- Try the [React learning path](/training/paths/react/) |
| 20 | +- [React Native for Windows GitHub repository](https://github.com/microsoft/react-native-windows) |
| 21 | +- [Sample apps](https://github.com/microsoft/react-native-windows-samples) |
| 22 | +- [Fluent UI React Native components](https://github.com/microsoft/fluentui-react-native) |
| 23 | +- [React Native overview](./react-overview.md) |
0 commit comments