---
# System prepended metadata

title: W1 Introduction

---

# 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.

```console
node app.js

npm init
npm install eslint
```

## Object Oriented Programming

```javascript=
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
```jsx=
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
```jsx=
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
![](https://miro.medium.com/max/700/1*F-xob-QImjMoks22xtDiTw.jpeg)
For more information about architecture of React Native, I recommend https://www.youtube.com/watch?v=7gm0owyO8HU

#### Component Life Cycle
![](https://i.imgur.com/yX8aHlS.png)

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

#### Concept of Expo
![](https://i.imgur.com/SP9i7Nk.png)
![](https://i.imgur.com/Lc9roa5.png)
![](https://i.imgur.com/iV8xpqA.png)
