Getting Started with React Native - Visual studio code

Saturday, September 28, 2019

BOOM..! Native development is really a new love for developers, especially developers from web designing background. You can find great frameworks out there in the market for native development(Flutter, React Native, Cordova, etc..). React-native is a great framework by Facebook. React native is written in javascript which uses React and rendered with native code.

Most native apps render the components within the native shell but React compiles the source to original Android or IOS components using their SDK. Now let's dive into the main part.
We start with installing Chocolatey, a Package manager for windows which helps you to ease of doing the installation of packages without messing up with the system configurations.

To install, run your command prompt with administrative permissions and paste this PowerShell code.

Set-ExecutionPolicy Bypass -Scope Process -Force; iex ((New-Object System.Net.WebClient).DownloadString('https://chocolatey.org/install.ps1'))

Now use chocolatey to install Nodejs, Python jdk

choco install -y nodejs, install python jdk8

No problem if you have already installed nodejs and other requirements before , just quit the above step.

Now install Android studio (We require android SDK for developing android apps, Use Xcode for IOS)

Then install React Native using nodejs

npm install -g react-native-cli

Now we need to add Android_Home and platform-tools variables to the windows environment.
For windows10 Search→(type)Edit the system environment variables→Advanced→Environment Variables

add New and name it as Android_Home

c:\Users\YOUR_USERNAME\AppData\Local\Android\Sdk

Then edit PATH variable and add platform tools to the path variable

c:\Users\YOUR_USERNAME\AppData\Local\Android\Sdk\platform-tools

Now open android studio welcome screen and then click configure⇓

Then move to Appearance & Behavior → System Settings → Android SDK.

Install the ticked components and build tools that help you to run the android app.
If you want to run the app within the emulator download the emulator and then run, here I will use my android device and developer tools debug to run.

Now we all set to create our hello world app. Oh! No, we forgot about visual studio code! Let's install React native tools extension.

We are ready now!
Fire up your terminals and type react-native init MyApp
It creates your first react-native app
Now use react-native run-android to set all dependencies and run the app.