====== Components Functional VS Class-based ======
When creating component, we usually create a sub directory for that component. The following components are doing the same thing.
Functional Components are sometime called dumb component. They are simple and do not maintain it own state, and usually controller by ''prop''. Class-based Components usually has it own ''state''. We will talk about ''prop'' and ''state'' in other place.

===== Functional Components =====

<code>
import React from "react";

function Cat() {
    let catSound = "Meow Meow Meow";
    return (
        <div className={"pet"}>
            {catSound}
        </div>
    );
}
export default Cat;
</code>

===== Class-based Components =====
<code>
import React, {Component} from "react";

class Cat extends Component {
    catSound = "Meow Meow Meow";
    render() {
        return (
            <div className={"pet"}>
                {this.catSound}
            </div>
        )
    }
}

export default Cat;
</code>