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.

    1. Download and install Visual Studio 2022 from here.
    2. 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

    1. In the terminal, navigate to your desired directory.
    2. 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.