React Native

by Makzan, updated 2021 May.

Agenda

  1. What is React Native
  2. Example: Push Up!
  3. Conclusion

Mobile Apps Development

-

iOS

Android

Mobile Apps Development

-

iOS: Mac, Xcode, Swift

Android: Win/Mac, Android Studio, Java

ReactNative

Where React Native runs

  • iOS
  • Android
  • even Web (as simulation)

Simulate RN: Expo.io

  • Web: snack.expo.io
  • iOS: Expo Go
  • Android: Expo Go

Run and Deploy RN:

  • Web: snack.expo.io (Simulate)
  • iOS: Xcode
  • Android: Android Studio

Let’s create an app

Push Up!

An online IDE

Example Code:

import React, { useState } from "react";
import { 
  Text, 
  View, 
  TouchableOpacity, 
  StyleSheet, 
  Dimensions,
} from 'react-native';
import Constants from 'expo-constants';
export default function App() {
  const [count, setCount] = useState(0);  

  return (
    <View style={styles.container}>
      <Text
        style={styles.bigNumber}
      >
        {count}
      </Text>
      <TouchableOpacity
        style={styles.button}
        onPress={() => setCount( prevCount => prevCount + 1)}
      >
        <Text>Push Up!</Text>
      </TouchableOpacity>
      
    </View>
  );
}
const windowHeight = Dimensions.get('window').height;
const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: "center",
    // paddingTop: Constants.statusBarHeight,
    backgroundColor: "#ecf0f1",
    padding: 8,
    fontFamily: "System",
  },
  button: {
    alignItems: "center",
    backgroundColor: "#DDDDDD",
    paddingTop: windowHeight/3,
    paddingBottom: windowHeight/3,
  },
  bigNumber: {
    textAlign: "center",
    fontSize: 32,
    fontWeight: 'bold',
    padding: 32,
  },
});

Take away

  • RN runs on mobile devices, iOS and Android.
  • RN transforms the JSX code into native iOS and Android runtime.
  • We can simulate common RN components in web browser by using Expo.
  • Run common RN components in mobile via Expo Go.
  • Xcode and Android Studio required to build and deploy RN apps on app stores.

Take away

  • RN runs on mobile devices, iOS and Android.
  • RN transforms the JSX code into native iOS and Android runtime.
  • We can simulate common RN components in web browser by using Expo.
  • Run common RN components in mobile via Expo Go.
  • Xcode and Android Studio required to build and deploy RN apps on app stores.

Take away

  • RN runs on mobile devices, iOS and Android.
  • RN transforms the JSX code into native iOS and Android runtime.
  • We can simulate common RN components in web browser by using Expo.
  • Run common RN components in mobile via Expo Go.
  • Xcode and Android Studio required to build and deploy RN apps on app stores.

Take away

  • RN runs on mobile devices, iOS and Android.
  • RN transforms the JSX code into native iOS and Android runtime.
  • We can simulate common RN components in web browser by using Expo.
  • Run common RN components in mobile via Expo Go.
  • Xcode and Android Studio required to build and deploy RN apps on app stores.

Take away

  • RN runs on mobile devices, iOS and Android.
  • RN transforms the JSX code into native iOS and Android runtime.
  • We can simulate common RN components in web browser by using Expo.
  • Run common RN components in mobile via Expo Go.
  • Xcode and Android Studio required to build and deploy RN apps on app stores.

Take away

  • RN runs on mobile devices, iOS and Android.
  • RN transforms the JSX code into native iOS and Android runtime.
  • We can simulate common RN components in web browser by using Expo.
  • Run common RN components in mobile via Expo Go.
  • Xcode and Android Studio required to build and deploy RN apps on app stores.

React Native Basic

By makzan

React Native Basic

  • 293