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.

import React from "react";

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

import React, {Component} from "react";

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

export default Cat;