Getting started with React native


It's been a long time since i have posted anything in this blog. I have been trying react-native for the last 3 months. And it's been a wonderful experience. From a Angular background it seemed difficult to adopt react initially. Once i got it, it seems very easy and interesting. About the performance of RN is just awesome.
I am using
 Windows 10 
 Android
Installation
Installation is pretty simple. There are two ways to create an application, using expo-cli and react-native-cli. I prefer the second one. It seems like a little complex but when developing large application it's the best way to start.

Setup
As a prerequisite we need to install nodeJS, Python, JDK and need to setup Android. We need to install react-native-cli globally for creating and running the project
 npm install -g react-native-cli

Running
Once you install the cli we can create the application.
 react-native init firstProject
After creating the application we can move into the application folder and run the application. Before running the application we need a running emulator or a device connected to the system.
cd firstProject 
react-native run-android
Voila you could see the application in the emulator/device.

Debugging
Debugging is pretty easier. There is remote debugging is possible in RN. On emulator just run
Ctrl + M 
it will show menu with "Debug JS Remotely". Select the option it will open the debugger window on the browser. If the debugger not loading try
http://localhost:8081/debugger-ui/

On Device run the following command on the shell
 adb shell input keyevent 82

Network Debug
Debugging the http network is little bit tricky. I use Reactotron which is basically a good way to check the request/response of each http calls. In Windows for installing got the releases page and download the appropriate zip. Unzip it in a convenient place and add the folder it to the ENVIRONMENT VARIABLES. Once you added, you can run the app from bash/command. Before running you need import config file in the index.js or app.js. I generally add in the index.js.
You need to install the reactotron-react-native
npm install reactotron-react-native --save-dev
Sample config file looks something like this
 import Reactotron from 'reactotron-react-native';

Reactotron
  .configure() // controls connection & communication settings
  .useReactNative() // add all built-in react native plugins
  .connect() // let's connect!
Also you may have to run the following command to connect to the port
 adb reverse tcp:9090 tcp:9090
On Production release you have to comment the import unless it will have some performance issues.

So that's it. Try react-native!



Comments

Popular posts from this blog

Configure PostgreSQL and phpPgAdmin in WAMP

Upload Video to Facebook Using Actionscrpt 3.0

Angular - 4 year road map

Flash FLV player using PHP

Angular4 - primeng, ngx-bootstrap