# W1 Introduction

## NodeJS
https://nodejs.org/

Node.js is an open-source, cross-platform, JavaScript runtime environment. It executes JavaScript code outside of a browser. For more information on using Node.js, see the Node.js Website.

node app.js

npm init
npm install eslint

## Object Oriented Programming

class Animal {
    constructor(weight, height) {
        this.weight = weight;
        this.height = height;
    }
    // Getter
    get bmi() {
        return this.calcBMI();
    }
    // Method
    calcBMI() {
        const {weight, height} = this;
        return weight / (height * height);
    }

    speak() {
        console.log('An animal makes a noise.');
    }
    
    static merge(a, b) {
        const weight = a.weight + b.weight;
        
        return weight;
    }
}

class Person extends Animal { 
    constructor(name, weight, height) {
        super(weight, height);
        this.name = name;
    }
    
    speak() {
        super.speak();
        console.log('I am '+this.name);
    }
}

const david = new Animal(50, 1.75);

console.log(david.bmi); //16.3265306122

const roy = new Person('Roy', 60, 1.75);

console.log(Animal.merge(david, roy)); // 110

## JSX, React Native

### React and JSX

#### Function Component

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

const YourApp = () => {
    return (
        <View style={{ flex: 1, justifyContent: "center", alignItems: "center" }}>
            <Text>
                Try editing me! 🎉
            </Text>
        </View>
  );
}

export default YourApp;

#### Class Component

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

class Cat extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            isHungry: true
        }
    }
    
    render() {
        const {isHungry} = this.state;
        return (
            <View>
              <Text>
                I am {this.props.name}, and I am {isHungry ? "hungry" : "full"}!
              </Text>
              <Button
                onPress={() => {
                    this.setState({isHungry: false});
                }}
                disabled={!isHungry}
                title={isHungry ? "Pour me some milk, please!" : "Thank you!"}
              />
            </View>
          );
    }
}

const Cafe = () => {
  return (
    <View>
      <Cat name="Munkustrap" />
      <Cat name="Spot" />
    <View/>
  );
}

export default Cafe;

### React Native
https://reactnative.dev/

#### Architecture
For more information about architecture of React Native, I recommend https://www.youtube.com/watch?v=7gm0owyO8HU

#### Component Life Cycle

## Expo SDK
https://expo.io/

#### Concept of Expo