Originally developed by Facebook for its internal app development, React Native was open sourced in March 2015 for iOS Mobile apps, and by September of the same year a version for Android dev was also released. Today, Native React has been vastly improved and powers popular worldwide mobile applications like Instagram, Facebook, Skype, and more.
Are you ready to get started with React Native? Let's understand how to download, install and set up React Native in Windows 10.
Before we get started, here are a few system requirements to download, install, and set up React-Native on your Windows 10.
To download and successfully install React-Native in your computer, you need to consider the minimum hardware specifications required to support the app and run it smoothly.
To efficiently install and set up React-Native on your Windows device, you will need to install the following:
To successfully install and set up React-Native to your device, you need to follow the steps discussed below:
The first process that you need to do is to install Chocolatey, a well‐known package manager for Windows. Installation of Chocolatey requires administrator access to the computer’s command prompt to run.
The installation will look like as shown below:
To check whether you have installed it correctly, open the command prompt and type;
If you managed a correct installation, this command returns the Chocolatey version you have installed; like shown in the screen below:
Using Chocolatey we will now install Node.js, and JDK8 as follows.
i. Installing Node Js
Choco install -y nodejs.install
Installation may take some time. Once done, you will see a message stating that Chocolatey is installed as shown below:
To confirm that installation has been successful, we will execute the below command at the command prompt, as administrator:
If the installation was successful, the version number is displayed.
After installing Node.js, the Node Package Manager NPM automatically installs. Now check the installation of NPM in your system by entering the following command.
The displayed message below verifies that the installation of NPM is successful.
JDK8 is crucial in the improvement of android applications by React-Native. To install the JDK8, go to the Windows PowerShell and use the following command:
choco install -y nodejs.install openjdk8
To know whether it installed successfully, open the command prompt again and enter the command:
The message below is displayed if the JDK8 is successfully installed hence showing the Java version as:
openjdk version “1.8.0_222”
The installed JDK8 also has an installed Java compiler. To confirm whether the Java compiler has been installed, open the command prompt and enter the below command:
To improve mobile applications with React Native, you need to install Android Studio. To download the installation file, go to. By default, android studio automatically installs the latest Android SDK. However, building a React Native app with native code demands Android 11.0 (R) SDK in particular.
The installation display message looks like below:
After downloading the file, perform the Android Studio installation process. To continue, click on the Next button to see the Choose Components screen.
Tick the box containing Android Virtual Device and click on the Next button.
You then need to choose the location in your computer where you would like the Android Studio to get installed. You can even leave it to install at the default location to save time, and then click the Next button to go to the next screen:
You will come to the Choose Start Menu Folder. Click the Install button to install the program.
When the bar reaches the end, click on the Next button to complete the process.
On the next screen, check Start Android Studio and click on the Finish button.
Click the Next button to go to the Install Type screen:
Choose the Custom type of setup and then click the Next button.
On this screen, you can select the theme of your choice and then click on the Next button to go to the SDK Component Setup window.
On the SDK Component Setup display, check on the Performance Intel HAXM option plus Android Virtual Device option and then click on the Next button.
On the Emulator Settings window, do not make changes to anything. Leave it the way it is and click on the Next button.
The dialogue box below completes the whole process by clicking on the Install button.
Customize Android SDK
When you select Configure, the SDK Manager as shown on the screen above is displayed. This allows you to choose the Android SDK settings. Click on the Show Package Details located at the bottom right of the screen. From the list, tick the following:
Click the OK button to install them, and you are done setting up the Android SDK.
React Native needs environment variables to be customized to create applications using the native codes. Next, we will customize the Android Studio Environment variable.
Right‐click on This PC and click Properties, a screen displays as below. Click on the advanced system settings.
Once you are on the System Properties window, select the Advanced tab, and then the Environment Variables button at the bottom. Then press Enter.
After selecting the environment variable, go to the Variable name, type ANDROID_HOME and your variable value Android Studio SDK path. After that, customize the Android Studio platform‐tools path by selecting the Path variable on User variables for your name list to move to the edit dialog.
Input platform tools folder path in the SDK path, like C:\Users\[user name]\AppData\Local\Android\Sdk\to the end of the list and press Enter key. Open the command prompt and input the command below:
When the environmental variable customization is successful, you get the below message:
Android Debug Bridge version 1.0.41 Version 29.0.1-5644136 Installed as /Users/Username/Library/Android/sdk/platform-tools/adb
Install React Native CLI
To install React-Native CLI, open the command prompt as an administrator and enter the following command:
npm install -g react-native-cli
Let us create a new React Native project using react native CLI. reactapp is the first project we are creating on React Native.
react-native init reactapp
Running the Application
Once you have created your first React application, it's time to run the application. Open the application in any IDE of your choice. Here we are using Visual Studio Code as shown: If you want to run your project on an Android device, open Android Studio and create a virtual device. When your virtual device opens, use the following command in your Windows Command Prompt:
Once done, you will see the application opened on your Android device as shown:
React native application is a global package and not the same as other frameworks. Let us understand how to uninstall React Native from your system using Control Panel. Here is a step-by-step guide on how to uninstall React Native:
To uninstall React Native from your system, use the command:
npm uninstall -g react-native-cli
In this article, we have seen the systematic procedure of downloading and setting up React-Native on Windows 10 devices. Besides, we have also discussed about React-Native, its origin, the installation process, and the follow up setup procedures. In a nutshell, you have learned how to install and set up the following software packages:
You have also learnt how to create the React Native app and use it on an Android device. Lastly, we saw the uninstallation process too.
Hurray! You have come to the end of the tutorial. It’s time to get started with React Native and build your projects. Keep Coding!
Your email address will not be published. Required fields are marked *
Full stack developer roles are among the hottest c... Read More