Start React-Native from Development Environment Setting Up

Start React-Native from Development Environment Setting Up


Youtube.com - React-Native Introduction

Step 1: - Install IDE for coding
Step 2:- Install Android Studio
Step 3:- Optional - Install GenyMotion (Emulator)
Step 4:- Install NodeJs
Step 5:- Install React Native
Step 6:- Creating new React Native Application

Tools for Setup the Development Environment,
    1) Visual Studio Code
    2) Android Studio
    3) GenyMotion

Above steps will explain you how to make successful Cross-platform application development setup called React native. It is little bit of challenging but following steps will make that easy.

Step 1:- Install IDE for Coding 

You need to download and install a proper IDE to do the React native coding. I recommend Visual Studio code to use as the default IDE. Follow below link to download and install the visual studio code. https://code.visualstudio.com/download

Step 2:- Install Android Studio

  • We use android studio for install Android SDKs and other build tools. Also we can use Android studio emulator to run the application. You can download and install Android studio using following link. https://developer.android.com/studio
  • After installing Android studio, install the latest SDK platform using SDK Manager.
    Install SDK platform
  • As next step you have to install the SDK which will be useful to run emulator and other building purposes. 
    Install SDK tools
Note:- When installing SDK tools make sure that you will be installed Intel x86 Emulator Accelerator, Android Emulator, Platform-tools and SDK tools.
  • After all of installing phases you have to set a System user Variable path for Android Sdk folder.Go to Control Panel > System and Security > System > Change Settings it will open window and go to Advanced tab and click Environment Variables. Create new user variable as ANDROID_HOME and add the value as path for android SDK platform directory. save and Close.

    Add new user variable for ANDROID_STUDIO
  • As final step of installing Android studio you have to set path for ADB (Android Debug Bridge) and also add the directory of build tools. It should append to System variable called PATH. location of the adb like follows, 
                           C:\Users\user\AppData\Local\Android\Sdk\platform-tools
                           C:\Users\user\AppData\Local\Android\Sdk\tools
  • Android Studio is coming with embedded JDK that recommend to Android Studio. There fore make sure that you have ticked following check box.  File > Other Settings > Project Structure
JDK Location

Step 3:- Optional - Install GenyMotion (Emulator)

You can run your application using Android studio emulator but if you are running on low performance computer it will be very difficult because of it will allocate substantial size of ram for android studio and Emulator. There for if We are using that emulator we should have a computer with super performance. GenyMotion is best solution that I recommend. Follow below steps to install Genymotion on your computer.
  • First of all, Create a account on Genymotion site.
  • Then click on trial button top of the window.
  • There is vary of packages for you to download. First select your OS and get the bundle which includes the VirtualBox. 
  • After downloading that bundle, run the exe.
  • After installing Genymotion on your computer, run the application. Go to settings and Sign in to your account using your information. Then there is a key to register GenyMotion for personal use. That will give us a licensed version of Genymotion with some of limitations but it is enough for our test runs.
    Sign in and register
  • Then you can add Any phone as your emulator. Download and install.
  • Now you only have to start the Emulator and it will run virtual environment for you.

Step 4:- Install NodeJs

You can download and install nodeJs using following URL that I posted below. When you are downloading nodeJs make sure you are downloading the version that recommend for most users because that is the most stable version of NodeJs. After download and install it, check whether System Variable was added for the nodeJs if not You have to add the directory of NodeJs manually to System Variable called PATH. Ex:- E:\Program Files\nodejs\

 Note:- You can check whether directory of NodeJs Successfully added to PATH variable by running this command on command prompt. It will show the version number of NodeJs. (node -v)

Step 5:- Install React Native

We use Node Package Manager to install React Native. Open Visual Studio Code and Run following Command in VS Code terminal to install React Native. npm install -g react-native-cli

Step 6:- Creating new React Native Application

Now we can create new react native application using Visual studio code. Open terminal in Visual Studio Code and type below code and press enter to init the Project. react-native init SimpleProject

 Your application is created successfully and we can run that application in Genymotion Emulator (only android platform). To do that first of all we have to build the project. Create a folder called assets in android > app > src > main. After that insert following script in package.json file under Scripts

 "android-windows": "react-native bundle --platform android --dev false --entry-file index.js --bundle-output android/app/src/main/assets/index.android.bundle --assets-dest android/app/src/main/res && react-native run-android"
Package.json
Now you are ready to deploy the debug version of application. Run the GenyMotion Emulator and run the following command in VS Code Terminal to run the application. npm run android-windows

 Its Done now your app is running on emulator successfully and if you do any changes to your code, you can see those changes by clicking key combination which is CRTL + M and reload.

Thank you for read till the end. Please comment below if you have any problems regarding this.See you again in another Blog post.


Comments

  1. Dinali PeirisFebruary 20, 2019 at 8:22 AM

    nice

    ReplyDelete
  2. softeirDecember 20, 2021 at 11:29 AM

    I am very impressed with your post because this post is very beneficial for me and provide a new knowledge to me.
    Genymotion

    ReplyDelete

Post a Comment

Please make comments related to field

Popular posts from this blog

RESTful APIs using NodeJS, ExpressJS, and MS SQL Server

Image
RESTful APIs using NodeJS, ExpressJS, and MS SQL Server REST (REpresentational State Transfer) is an architectural style for developing web services that uses HTTP. REST server provides access to resource and REST client modifies the resources. REST is popular due to its simplicity. REST uses different representation methods to represent resources like JSON, XML and text but most popular one is JSON. Advantages of Restful services Language independent architectural style simple reliable scalable implementation is easy NodeJS is a very popular and powerful JavaScript framework. we can develop attractive web applications like video streaming sites, single page web applications, etc. And Node is open source. Advantages of  NodeJS Easy implementation Lightweight, fast and scalable streaming capability high performance real-time web applications Community friendly ExpressJS is also written in JavaScript and it is also open source. We can use Exp...
Read more

Full Stack Web Development

Image
Full Stack Web Development Be a Full stack developer is not easy because if you want to be a full stack developer, you should know all the development technologies that need to build a web application. There are 3 types of development, Front-end Development - The components that you can see when visit the web application. Back-end Development - All the operation that working under those components (Ex: Databases, Structure, Server requests)   Full Stack Development - Combination of  both Front-end and Back-end Full stack developer should know how all things get fixed at last phase. There are many ways to be a full stack developer. The basic start up for that path is HTML and CSS because without good knowledge of those it is very hard to be a good full stack developer. There are many frameworks and tools that you should know and it will explained later. Full Stack development is very trending career path on these days. Be a Full stack developer not e...
Read more