Building a Windows development environment( react native )

We want to run the demo app with react native, so let's build a react native windows development environment.

✅Installing Node.js Install the LTS version from the Node.js official site.

Execute the command below in the cmd window to check.

node -v 
npm -v

✅Install JDK After installing, set environment variables. Set the JAVA_HOME path and add the bin folder to the PATH.

✅Install Adroid Studio Download and install it from the official site. After installing, install Android SDK, Android SDK Platform-Tools, and Android Emulator.

Set environment variables: Set ANDROID_HOME to the SDK installation path. The default path is C:\Users\Username\AppData\Local\Android\Sdk.

Add the following path to PATH %ANDROID_HOME%\platform-tools ANDROID_HOME%\emulator

✅Install the React Native CLI The React Native CLI is required for project creation and execution.

✅create the project

  npx react-native init baljuApp

I got the following error

 cli.init(root, projectName);
      ^
TypeError: cli.init is not a function

So I uninstalled it and ran

 npm uninstall -g react-native-cli

Run "npx react-native init baljuApp".

✅Run the project

Open AVD Manager in Android Studio and run the Android emulator.

Then execute the command below to run the app:

npx react-native run-android

✅Problem when running

BUG! exception in phase 'semantic analysis' in source unit '_BuildScript_' Unsupported class file major version 67
> Unsupported class file major version 67

The error message Unsupported class file major version 67 is caused by a compatibility issue between the Java compiler and the JDK version used by Gradle. This error usually occurs when you use a newer JDK that Gradle does not support (for example, JDK 17 or later). major version 67 refers to JDK 18, and your current version of Gradle may not support JDK 18.

Check your emulator

adb devices

Delete the emulator

adb emu kill

Install metro Bundler

npm install --save-dev metro

✅run

Run “npx react-native doctor” to check the execution conditions.

npx react-native start 

The demo screen appears.

Now all I have to do is develop the app.