Emulators for react native mobile apps

We can use react native to create mobile apps and target multiple platforms like android and IOS. During development phase we need  emulators before  publishing the app.

These are some options. 

Android studio

Install android studio and then we can configure the device which we need to target. Link for the download

However I found this option time consuming as we need to select the specific device which we are targeting. We have to install android studio to run the virtual devices

Genymotion

• We can simulate 3000+ virtual device configurations and every imaginable situation to ensure a better user experience.
• Easy to install and use. Link for personal download  https://developer.android.com/studio/index.html
• I found a good link about installation and usage in YouTube. https://www.youtube.com/watch?v=MWZ2rVFOQWw&t=768s

        Note: Only basic version is free for personal use.

 Expo

• Based on my experience this is the best option as it is easy to set up and and open source
• Enable developers to build and share true native apps that work across both IOS and Android
• We can a have desktop version, android or IOS app.

Note: After building the app we need to scan the QR code using our device. We can share this QR code to anyone via mail or text message. While sharing both party needs to have installed Expo app in their device

Portable color emulators for windows

• Cmder is a software package created out of pure frustration over the absence of nice console emulators on Windows. 
• It is based on amazing software, and spiced up with the Monokai color scheme and a custom prompt layout, looking sexy from the start

Class component in React

Functional component

Simple react component which renders a button

const Button= function () {
return (
 <button>Go</button>
);
};
//Syntax to mount a component is ReactDOM.render
//First argument is the component and the second argument is where the 

//component needs to be rendered
ReactDOM.render(<Button/>,mountNode);

React Component, State and JSX

Component

• It takes an state and properties and uses those object to render html.
• State can be changed but properties cannot be changed
• They are written in a special syntax known as JSX
• All react component must have a render function
• We should always return one elements from the render function

Overview of React Native

• Provides native experience with less hassle and leverage existing skills using  JavaScript and React
• UI consists of 100% native ios/android controls without performance issues
• A web like user interface which allows us to refresh app from the simulator
• Apps can be debugged using chrome developer tools
• We can style views decoratively similar to css

 

Java script cheat sheet

Push to an array

 outArray.push(arr2[k].charCodeAt()-64)

Convert number to character using ASCII

 outArray.push(arr2[k].charCodeAt()-64)

Convert character to number using ascii

/convert the character value to number
           //note we are subtracting 64
              outArray.push(arr2[k].charCodeAt()-64)

Get first character from a string

function validatePalindrome(word)
{
   //charArray = word.split;
   return word[0];
}
//Function call 
console.log(validatePalindrome("BOB"));

Overview of React

• Is a JavaScript framework for building User interface
• It is not a framework
• It is considered as an view in MVC
• Virtual DOM gives React it's edge and makes it fast

Virtual DOM:

• Uses a virtual DOM to push only changes to the DOM instead of re-rendering everything
• V-Dom allows  rendering on the server side and sending the final HTML to the browser (SEO friendly )

JSX;

      Allows html in JavaScript which results in self contained components