Tips to Setup React Native Development Environment in Windows

React Native is one of the most popular and trending open source JavaScript Framework for developing native mobile applications for iOS and Android. Created by Facebook and its developers’ community, React Native uses web technologies like HTML, CSS, and JavaScript to create dynamic user interfaces.

The popularity of React Native

One of the best parts of React Native is that it uses native UI components which give applications native-like feel. That’s the reasons why most of the investors look to create applications using React Native. Importantly, even front end developers love this framework when it comes to develop dynamic interfaces for cross platforms. According to npm trends, React Native is on top with respect to a maximum number of downloads while Ionic holds the second and Flutter is followed by.

 

Are You All Set to Develop Your First Application on React Native?

Well, I too am all set to share my experience with React Native Development, and how created my first Android application using the framework. If you are new to this framework, this guide will help you to create the most advanced version of the application based on the React Native framework.

So, Let’s Get Started…

Before I tell you regarding the set, let’s find out what tools you need to set up the ecosystem.

You need the following tools to set up the development environment;

• Windows System (Preferably Latest System)
• NPM (Node Package Manager, V8 or Newer)
• Latest JDK (Java Development Kit)
• React Native CLI (Command Line Interface)
• Android Studio
• Built-in Emulator in Android Studio
• Visual Studio Code

Now, Let’s Learn the Set Up Step-by-Step

Step #1: Install Node.js

The first step you need to do is to install node,js. Download and install Nodejs (latest stable version) from official NodeJS site in your PC and install it. NPM is automatically installed when you install the Node.js in Windows.

Step #2: Install JDK

Now, you need to install JDK (Java Development Kit) so that you can easily run the Android Studio. You can follow the link given here to install the latest stable version of JDK.

Step #3: Install React Native CLI

Once you are done with installing NPM and JDK, you have to install React Native CLI, next to install. To install, you need to run the following command;

npm install -g react-native-cli

Use command line interpreter application which is available in most of Windows, or you can use Integrated Terminal in Visual Studio Code which you can find from option;

View →Integrated Terminal

Note: Run Administrator Command Prompt or Command line interpreter by selecting “Run as Administrator” to run the command.

When you install CLI, it is saved in the folder created by NPM.

Now create a folder where you want your project to be saved.

Move to your directory path.

Now, you are all set to initialize the project using react-native init <folder name> && cd <folder name>

This will walk you through creating a new React Native project (as in example) in c:\Users\Saurabh\Desktop\React_native\react_native_project

Let’s take a look at the image below.

Now its time to use android emulator. And hence for that all  you had to follow the above mentioned instructions.

Run Instructions for Android:

 cd C:\Users\Saurabh\desktop\React_native_project && react-native run-android

Step #4: Install Android Studio

You need to begin with installing Android Studio. Find the latest version of Android Studio from here.

When install, you need open and select the files from the option. Check the image below;

Follow the option and select the file where you have saved it. See in the image;

You will get a dashboard as shown in the image

Some Important Note to Install Android Studio

Well, you also need to ensure that you have installed all required SDK tools that you can find from the “Android SDK” option. Generally, you will get things selected by default when you choose the latest version.

Make sure you need Intel x86 Emulator Accelerator (HAXM installer), which will help you run the emulator on the Windows.

You grab more useful information referring the link:. 

You may also require enabling Intel Virtualization Technology by changing a BIOS setting.

However, if you come across any issue, you can refer the following link: to get the solutions.

Run The Project Now

You are ready to run the project, though you need to ensure that the local server is already running. As if the server is not running, it will not let your project run. Let’s check the image below.

Step #5: Install Visual Studio Code

Having downloaded and installed Android Studio, you require downloading the latest version of Visual Studio Code. You can follow the link to download the Visual Studio Code for Windows. It’s free to download.

Note: The tutorial is for Android application. For iOS, it will create a different directory structure. We will learn this in your next tutorial.

Cheers! You have created your first React Native application for Android.

Note: If you get an error with the following caps “java.lang.UnsupportedClassVersion Error: com/android/build/gradle/AppPlugIn: Unsupported major.minor version 52.0”, then you need to follow that the embedded JDK path is well configured.

Conclusion

So, finally, you have created your first React native application for Android! You can find some other ways as well and get the things done, though I have shared all my personal experience with you. However, you can enhance the experience even better by helping us know your views.  Our React Native Developers are eager to listen your views on your React Native Experience. You can comment by filling up the ‘contact us’ page.