REACT - CLASS BASED COMPONENTS

    // Functional vs Class based components 
    //Components already written
    //needs this

    import React, {Component} from 'react';
    import ReactDOM from 'react-dom';

    //#1
    class Apps extends React.Component {
    render(){
        return (
            <div>
            <Header  username="Alberto"/>
            <Greeting/>
            </div>
        )
    }
    }

    //#2
    class Header extends React.Component {
    render(){
        return (
            <header>
            <p>greeting {this.props.username}!</p>
        </header>
        )
    }
    }

    //#3
    class Greeting extends Component {
    render(){
        // const color = "red"
        const date = new Date()
        const hours = date.getHours()
        let timeOfDay

        if (hours <12){
        timeOfDay = "morning"
        }else if(hours >=12 && hours <17) {
        timeOfDay = "afternoon"
        }else{
        timeOfDay = "nigh"
        }
    
    
        return (
        <h2>Good {timeOfDay} sir</h2>
        )
        
    }
    }


    ReactDOM.render( <Apps/>, document.getElementById('root'));