Complete React Native Windows Setup for Desktop Application : A Step-by-Step Tutorial for Beginner
To set up React Native for Windows on your machine, follow this detailed step-by-step guide. This setup assumes you're starting from scratch and covers the essential tools and configurations you'll need:
Step 1: Install Node.js
React Native requires Node.js to function properly.
- Download and install the latest LTS version of Node.js from nodejs.org.
- Verify the installation:
node -v npm -v
Step 2: Install the development dependencies
Chocolatey is a package manager for Windows that simplifies software installation.
- Run PowerShell as Administrator.
- Install Chocolatey by running this command:
Set-ExecutionPolicy Unrestricted -Scope Process -Force; iex (New-Object System.Net.WebClient).DownloadString('https://aka.ms/rnw-vs2022-deps.ps1');
Step 3: Install Visual Studio
React Native for Windows requires Visual Studio 2022 with certain components.
- Download and install Visual Studio 2022 from here.
- During the installation, select the "Desktop development with C++" workload and include the following components:
- MSBuild
- C++/CLI support
- Windows 10 SDK (10.0.19041.0 or newer)
- Windows Universal CRT SDK
Alternatively, if you already have Visual Studio installed, open the Visual Studio Installer, modify the installation, and add these components.
Step 4: Install React Native CLI
To create and manage React Native projects, install the React Native CLI:
npm install -g react-native-cli
Step 5: Create a New React Native Project
- In the terminal, navigate to your desired directory.
- Run the following command to create a new React Native project:
npx react-native init MyWindowsApp cd MyWindowsApp
Step 6: Add React Native for Windows
Install the necessary React Native Windows package:
npx react-native-windows-init --overwrite
This command configures your React Native app to target the Windows platform. If you're in an existing project, it will also modify the project structure.
Step 7: Install Windows-Specific Dependencies
To install the necessary dependencies for building React Native Windows, you can run the script provided in the project:
node_modules/react-native-windows/scripts/rnw-dependencies.ps1
Run the script from an elevated PowerShell prompt.
Step 8: Build the Windows Project
Once the dependencies are installed, you can build the Windows project. Ensure you are in the root directory of your React Native app:
npx react-native run-windows
If you encounter build issues, try cleaning the solution:
npx react-native-windows-init --overwrite --language cpp npx react-native run-windows
Step 9: Running on Windows
After building, your React Native Windows app will launch in a new window. You can start development as you would for other React Native platforms.
Step 10: Optional Tooling
- React Native Debugger: A standalone tool for debugging React Native apps, including support for Redux:
choco install react-native-debugger
- VS Code Extension for React Native: Install the React Native Tools extension in Visual Studio Code for a smoother development experience.
Summary of Required Tools and Dependencies:
- Node.js: Install via the official site.
- React Native CLI: Install via npm.
- Visual Studio 2022: With C++ Desktop Development tools and Windows SDK.
- Chocolatey: For installing optional packages like React Native Debugger.
Once this setup is complete, you should be able to develop React Native applications for Windows without any issues. If you encounter specific errors, such as MSBuild or missing dependencies, the rnw-dependencies.ps1 script should help resolve them.