Getting started with react native on Mac

What is React Native?
React Native is an open-source mobile application framework created by Facebook. It is used to develop applications for Android, iOS and UWP by enabling developers to use React along with native platform capabilities. React Native lets you build mobile apps using only JavaScript. It uses the same design as React, letting you compose a rich mobile UI using declarative components.

What is Electrode?
The Platform For Integrating React Native Into Your Apps. Electrode Native is built on top of React Native and other tools such as Yarn and CodePush. Electrode Native does not contain any code modifications to these tools and frameworks. Electrode provides you with the ability to integrate multiple different react-native applications into a single native app.


Installation:
install xcode ( https://developer.apple.com/xcode/)
install homebrew ( if it is not installed)  go to https://brew.sh/ to get instruction
NODE/npm:$ brew install node 
Watchman:$ brew install node watchman
react native:$ npm install -g react-native-cli

Create react native project:
react-native init <project name>

Code Editor:
Atom (https://atom.io/ )
Open code atom code editor: atom .
Debug window: press command + D on simulator
Debugger; statement is equivalent to break point
Visual studio code (https://code.visualstudio.com/)

Configure Editor compiler:
ATOM:
ESLint: ( parses JavaScript code error handler)
install lint globally:$ npm install -g eslint

Install linter-eslint plugin in ATOM code editor, Menu -> Preferences -> Install ( search for linter-eslint )
go to your project directory then run the command to install coding compiler:
       $npm install --save-dev eslint-config-rallycoding
under your project create a file: .eslintrc
and copy the below content and save it.
{
"extends": "rallycoding"
}

VSCODE:
$npm install --save-dev eslint-config-rallycoding
{
"extends": "rallycoding"
}

Running react native: 
IOS: react-native run-ios
Android: react-native run-andriod

Troubleshooting after running the command:

Problem: xcrun: error: unable to find utility "instrument" xcode
Solutions: You need to launch XCode and agree to the terms first. Then go to Preferences > Locations and you'll see a select tag for Command Line Tools. Click this select box and choose the version of XCode you'll be using.
After this you can go back to the command line and run react-native run-ios

Problem: Unable to resolve module “events” React-Native
solutions: npm install events --save

React library:
Axios: Axios is a Javascript library used to make HTTP requests from node.js or XMLHttpRequests from the browser that also supports the ES6 Promise API
npm install --save axios
Flexbox layout

Components some key elements:
props for communication from parent to child
state for component internal record keeping only use in class based component not in functional base component
don't use this.state = , use this.setState method
Class based component and functional based component
Only the 'root' component uses 'Appregistry'
component nesting

React vs react native:
React:
- knows how a component should behave
- knows how to take a bunch of components and make them work together

React-native:
- knows how to take the output from a component and plae it on the screen
- Provides defaults core components ( image text)

Some useful commands:
Clearing metro cache (restarting metro bundler react native):
if npm cache clean --force doesn't work run the below commands
rm -rf $TMPDIR/metro-* && rm -rf $TMPDIR/react-* && rm -rf $TMPDIR/haste-*
watchman watch-del-all

react-native run-android -- --reset-cache
C:\Users<Username>\AppData\Local\Temp and delete metro-cache