React Native : Part 1 Expo

React Native is a JavaScript framework for creating Native Android and iPhone apps developed by Facebook. The official website of React Native is https://reactnative.dev

The React Native components get compiled to native Android or iPhone building blocks. That's not the case with Hybrid applications. Hybrid applications are web application with Mobile look and feel.

For working with React Native you have to install Node. Node is required for accessing npm (Node Package Manager) which is the default Package manger of JavaScript.
Easiest way to get started with React Native is to install Expo CLI. Expo is a wrapper around React Native.
React Native CLI is the preferred way of developing React Native App which I will take up later.

I am using Visual Studio Code as the editor.

npm install --g expo-cli

This command will install expo.

expo init 

expo init command can be used to create a  new React Native Expo Project.

 Here I selected blank as the template which creates an ES6 React Native project.

By navigating to the newly creating project folder and typing code . will open the project in Visual Studio Code.

From Visual Studio Code teminal issue expo start command to run the React Native App.
If Android Emulator is configured, it's possible to run the application in Andoid Emulator. Or else select Run in Web Browser.

App.js is the starting component. There there is import ot react and react-native modules.

import React from 'react';
import { StyleSheet, Text, View, Button } from 'react-native';

export default function App() {
  return (
    <View style={styles.container}>
      <Text>Hello React</Text>
      <Button title = "Hello" onPress={ () => alert('Hello')}/>
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#fff',
    alignItems: 'center',
    justifyContent: 'center',
  },
});