Steps to create and build first react native application in windows using vscode ide - arnabutilities/rbac-frontend GitHub Wiki

Creating and building your first React Native application on Windows using Visual Studio Code (VSCode) involves several steps. Below is a detailed guide:

1. Install Node.js and Watchman

• Node.js: Go to Node.js official website and download the LTS version. Run the installer and follow the instructions.
• Watchman: Although Watchman is optional, it helps with file watching. You can skip this for now unless you encounter issues later.

2. Install React Native CLI

Open Command Prompt or PowerShell and run:

npm install -g react-native-cli

3. Install Java Development Kit (JDK)

• Download the JDK from the Oracle website or OpenJDK.
• Follow the installation instructions.

4. Install Android Studio

1. Download Android Studio from the official site.
2. During installation, ensure that the boxes for "Android SDK," "Android SDK Platform," and "Android Virtual Device" are checked.
3. Once installed, open Android Studio and go to Configure -> SDK Manager:
   • Under SDK Platforms, check Show Package Details and select a version (e.g., Android 10.0 (Q)).
   • Under SDK Tools, check Show Package Details and select Android SDK Build-Tools, Android Emulator, Android SDK Platform-Tools, and Android SDK Tools.

5. Set up Environment Variables

Add the following to your environment variables:

• JAVA_HOME: Path to your JDK (e.g., C:\Program Files\Java\jdk1.8.0_231)
• ANDROID_HOME: Path to your Android SDK (e.g., C:\Users\<Your-Username>\AppData\Local\Android\Sdk)

Add these paths to your PATH variable:

• %JAVA_HOME%\bin
• %ANDROID_HOME%\platform-tools
• %ANDROID_HOME%\tools
• %ANDROID_HOME%\tools\bin

6. Create a New React Native Project

Open Command Prompt or PowerShell and run:

npx react-native init MyFirstProject
cd MyFirstProject

7. Open Project in VSCode

1. Open VSCode.
2. Click on File -> Open Folder.
3. Select the folder MyFirstProject.

8. Start the React Native Development Server

In VSCode terminal (or Command Prompt/PowerShell), run:

npx react-native start

9. Run the Application on Android Emulator or Device

Make sure an Android emulator is running, or connect your Android device via USB with USB debugging enabled. Then, in another terminal window, run:

npx react-native run-android

10. Debugging in VSCode

To debug in VSCode, you need to install the "React Native Tools" extension:

1. Go to the Extensions view by clicking on the Extensions icon in the Activity Bar on the side of the window or by pressing Ctrl+Shift+X.
2. Search for "React Native Tools" and install it.
3. Add a debugging configuration:
   • Click on the Debug icon in the Activity Bar.
   • Click on the gear icon to open the launch.json file.
   • Add the following configuration:

     {
       "version": "0.2.0",
       "configurations": [
         {
           "name": "Debug Android",
           "program": "${workspaceFolder}/.vscode/launchReactNative.js",
           "type": "reactnative",
           "request": "launch",
           "platform": "android",
           "sourceMaps": true,
           "outDir": "${workspaceFolder}/.vscode/.react"
         }
       ]
     }
     

4. Start debugging by selecting the configuration and clicking on the green play button in the Debug view.

By following these steps, you should be able to create, build, and run your first React Native application on a Windows machine using Visual Studio Code.