Development Tips & Tricks : What is React Native?

What is React Native?
- React Native libraries were announced by Facebook in 2015, providing the React architecture to native iOS, Android and Universal Windows Platform applications
- Framework for build mobile apps
- Build cross platform apps
- React native apps are not hybrid apps
- React native not run inside a webView
- Faster than Cordova/PhoneGap/ Ionic
- Open Source
- Develop using java script
- Application has the same look & feel of the same native apps.

How to start?

Download and install Node JS (~ 12 MB)
https://nodejs.org/en/

Download React Libraries [Shell command]
npm install -g react-native-cli

Download Yarn [Optinal], npm install –g yarn
(increase create new project performance by cache packages)
https://yarnpkg.com/en/

Development IDE (Visual Studio Code) (~34 MB)
https://code.visualstudio.com/

React extension tools to the IDE
https://marketplace.visualstudio.com/items?itemName=vsmobile.vscode-react-native

Install Genymotion simulator

http://dl.genymotion.com/releases/genymotion-2.9.0/genymotion-2.9.0.exe

Start First project

Create new project with name “myProject1” in the current active directory [Shell Commands]

react-native init myProject1

cd myProject1

react-native start to compile

React-native run-android to run on device

React-native run-ios

React-native log-android to get console.log

React-native-cli VS react-native init

React Native is distributed as two npm packages

react-native-cli a lightweight package that should be installed globally
npm install -g react-native-cli

react-native contains the actual React Native framework code and is installed locally into your project when you run
react-native init

Develop react-native applications without install anything on your machine ?

Visit https://snack.expo.io/
Download the Expo app on your mobile
Scan the QR code through Expo application
You are ready now!

Develop on machine, Test on mobile

Download Expo mobile application https://expo.io/

Create new React native application using the next shell commands
npm i -g create-react-native-app
create-react-native-app myProject2
cd myProject2
npm start (to run in simulator: npm run android)

you will get QR code, scan it with Expo mobile app and you will be ready!
For more information visit: https://github.com/react-community/create-react-native-app

Best UI Kit for React Native

We need Nativebase for better GUI
open VS IDE then Ctrl+P and type
ext install nativebase-snippets

To add Nativebase to the current project
npm install native-base --save
react-native link

React Navigation is easy-to-use navigation solution

to Install the react-navigation package in your React Native project.

yarn add react-navigation
# or with npm
# npm install --save react-navigation

Starting file
After create new project, you will find "App.js" file which is the start file with sample code