React Native development environment: Useful tips to set it up 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. And this is all thanks to the react native development environment that help your site flourish.

React Native development environment definition and how to use it effectively
Useful tips to set the React Native development environment up

One of the best parts of React Native is that it uses native UI components that give applications a native-like feel. That’s the reason why most of the investors look to create applications using React Native. Importantly, even front end developers love this framework when it comes to developing dynamic interfaces for cross platforms. Knowing the preference, now, we want to show you how to set react native development on windows up for your site.

Tools you may need for the best React Native development environment

Before we tell you regarding the set, let’s find out what tools you need to set up the ecosystem. So, 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

From all that, you’re set. Let’s go to the fun part!

How to set the React native development on windows up?

Here comes the fun part for setting up this for your eCommerce website. To do this, all you may need is doing the following:

#1. Install Node.js

The first step you need to do for React Native development environment is to install Node.js. To clarify, you need to download and install Node.js (latest stable version) from the official NodeJS site in your PC and install it. NPM is automatically installed when you install the Node.js in Windows. We highly recommend you guys use the LTS version for better performance.

#2. Install Java SE Development Kit (JDK is alright)

Now, you need to install the Java SE Development Kit so that you can easily run the Android Studio. If your scale of your business is not fit with the JSEDK, Java Development Kit is just a perfect replacement for your business. To get the instruction of installing the JSEDK, or JDK, you should find and check out the main website for having this on your React Native development environment.

#3. Install React Native CLI on your react native development environment

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 a command-line interpreter application that is available in most of Windows, or you can use Integrated Terminal in Visual Studio Code which you can find from the option. In order to do that, you need to navigate to View → Integrated Terminal. Also, one thing to remember: 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, then move to your directory path. Now, you are all set to initialize the project on your React Native development environment. This will certainly walk you through creating a new React Native project (as in the example) in:

c:\Users\Saurabh\Desktop\React_native\react_native_project

#4. Running Android studio

Now its time to use an android emulator. And hence for that all you had to follow the above-mentioned instructions. Before running your Android studio, you need to run the instructions for the platform first:

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

After this, you get to begin with installing Android Studio. When installing this on your React Native development environment, you need to open and select the files from the option. Then follow the option and select the file where you have saved it. As a result, you will get a dashboard as shown in the image:

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 Windows.

#5. Having Visual Studio Code on your React Native development environment

Having downloaded and installed Android Studio, you require downloading the latest version of the Visual Studio Code. You can also follow the link on the main website to download the Visual Studio Code for Windows. It’s free to download. One thing to remember, If you get an error with the following caps:

React Native development environment on Visual Studio Code
React Native development environment on Visual Studio Code
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.

Final words

That should be it! Here are the tips on how to set your React Native development environment in Windows. Throughout all the tips, you should be able to have it on your projects easily and effortlessly.

All in all, ArrowHiTech hopes you will gain a lot of beneficial things as soon as you read this blog. Of course, in case you have any struggle with React native development environment, let’s ask us for help and we will always ready to solve it for you. CONTACT US now!


Tags

Share