Creating Simple Greeting website using ReactJs challenge

Creating Simple Greeting website using ReactJs challenge 

1. Creating a react app from scratch
2. show a heading that says Hello sir, Good Morning, if time is between 1 to 11AM
3. Good Afternoon , if 12PM to 7PM
4. Good Night, if 7PM till Midnight
5. Apple CSS in it, then dynamically change the color of Greeting parts only using inline CSS style. Ex. Green, orange, black etc.

index.js

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css'
let greating = "";
// let curDate = new Date(year,month,day,Hours);
let curDate = new Date(2021,10,5,4);
curDate = curDate.getHours();
const cssStyle = { };
if(curDate >=1 && curDate <12){
    greating = "Good MOrning"
    cssStyle.color ="green";
}else 
if(curDate >= 12 && curDate <19){
    greating = " Good Afternoon"
    cssStyle.color = "orange";
}else
{
  greating = "good night"
  cssStyle.color = "blue";
}
ReactDOM.render(
  <>
  <div>
    <h1>Hello sir, <span style = {cssStyle}>{greating}</span></h1>
  </div>
  </>, 
  document.getElementById("root")
);

index.css

body {
  background-color: skyblue;
  box-sizing: border-box;
  margin: 0;
  padding: 0%;
  font-family: "Josefin Sans",sans-serif;
}
div {
  width: 100%;
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
  margin-top: -30px;
}
h1 {
  padding: 20px 20px;
  background-color: whitesmoke;
  color: blueviolet;
  border-radius: 20px;
}
span {
  color: purple;
}