Environment Setup in React-native for windows

Divy RaiDivy Rai
5 min read

Hey everyone! 👋

So, you’ve heard about React Native and want to start building cool mobile apps using JavaScript on your Windows machine? You’re in the right place! In this post, I’ll walk you through the steps to set up the React Native environment on your Windows system, even if you’re just starting out. Let’s dive in!

Why React Native?

React Native allows you to build mobile apps for both iOS and Android using a single codebase written in JavaScript. It’s popular, easy to learn if you know a bit of React, and allows for fast development with live reloading and hot reloading features.

Here are the step by step process

Step 1: Install Node.js

Node.js is the heart of React Native—it powers the development server and helps you manage dependencies. Here’s how to install it:

  1. Go to the Node.js website and download the LTS version for Windows.

  2. Run the installer and follow the instructions (just keep hitting "Next" 😄).

  3. During installation, make sure the option to install npm (Node Package Manager) is checked.

Step 2: Install the Java Development Kit (JDK)

React Native needs Java to work with Android apps, so now we’ll install the Java Development Kit (JDK).

  1. Head to the Oracle JDK download page.

  2. Download the Windows version and install it (just like you did with Node.js).

  3. Once installed, you’ll need to tell Windows where Java is installed.

Setting JAVA_HOME Environment Variable:

  1. Right-click This PC on your desktop or file explorer and choose Properties.

  2. Click Advanced system settings on the left and then hit Environment Variables.

  3. Under System Variables, click New and add:

    • Variable name: JAVA_HOME

    • Variable value: The path where you installed the JDK (e.g., C:\Program Files\Java\jdk-11).

  4. Click OK to save!

Sure! Here's a blog post written in a more human and beginner-friendly tone, perfect for someone new to setting up React Native on Windows.


How to Set Up React Native Environment on Windows

Hey everyone! 👋

So, you’ve heard about React Native and want to start building cool mobile apps using JavaScript on your Windows machine? You’re in the right place! In this post, I’ll walk you through the steps to set up the React Native environment on your Windows system, even if you’re just starting out. Let’s dive in!


Why React Native?

React Native allows you to build mobile apps for both iOS and Android using a single codebase written in JavaScript. It’s popular, easy to learn if you know a bit of React, and allows for fast development with live reloading and hot reloading features.

What Do You Need to Get Started?

Before we jump into the setup, here’s what you need:

  • A Windows 10/11 computer

  • Node.js (JavaScript runtime)

  • Android Studio (for Android development)

  • Java Development Kit (JDK) (because Android development requires Java)

If you don’t have any of these yet, don’t worry—we’ll install them step by step!


Step 1: Install Node.js

Node.js is the heart of React Native—it powers the development server and helps you manage dependencies. Here’s how to install it:

  1. Go to the Node.js website and download the LTS version for Windows.

  2. Run the installer and follow the instructions (just keep hitting "Next" 😄).

  3. During installation, make sure the option to install npm (Node Package Manager) is checked.

Test the Installation:

To check if everything went fine, open Command Prompt and type:

bashCopy codenode -v
npm -v

You should see version numbers pop up. 🎉


Step 2: Install the Java Development Kit (JDK)

React Native needs Java to work with Android apps, so now we’ll install the Java Development Kit (JDK).

  1. Head to the Oracle JDK download page.

  2. Download the Windows version and install it (just like you did with Node.js).

  3. Once installed, you’ll need to tell Windows where Java is installed.

Setting JAVA_HOME Environment Variable:

  1. Right-click This PC on your desktop or file explorer and choose Properties.

  2. Click Advanced system settings on the left and then hit Environment Variables.

  3. Under System Variables, click New and add:

    • Variable name: JAVA_HOME

    • Variable value: The path where you installed the JDK (e.g., C:\Program Files\Java\jdk-11).

  4. Click OK to save!


Step 3: Install Android Studio

We’re going to use Android Studio to emulate Android devices on your computer so you can test your apps. Android Studio also comes with the Android SDK, which is super important for building Android apps.

  1. Download Android Studio from the official website.

  2. Run the installer and follow the setup wizard. Make sure to install the Android SDK, Android SDK Platform Tools, and the Android Emulator.

Step 4: Set Up the Android Emulator

You need an Android device to test your React Native apps, but if you don’t have one, the Android Emulator will do just fine!

  1. In Android Studio, go to Configure > AVD Manager (Android Virtual Device Manager).

  2. Click Create Virtual Device, choose a device model (like Pixel 3), and then select an Android version (like Android 11).

  3. Follow the setup and finish creating your emulator.

  4. Once done, you can run the emulator by clicking the play button next to your virtual device.

Step 5: Install React Native CLI

Now that everything’s set up for Android development, let’s install the React Native CLI, which will help you create and run your React Native projects.

Step 6: Create Your First React Native App

Woohoo! You’re all set! Now, let’s create your first React Native project.

You can get the commands from the official React-native website-https://reactnative.dev/

0
Subscribe to my newsletter

Read articles from Divy Rai directly inside your inbox. Subscribe to the newsletter, and don't miss out.

Written by

Divy Rai
Divy Rai