Thursday, September 21, 2017

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






        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.


NoteAfter 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



Wednesday, September 20, 2017

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


Tuesday, September 19, 2017

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