Smart Time-Based Greeting App in React: Learn with Easy Code

Have you ever visited a website that says “Good Morning” or “Good Evening” based on your local time? That's what we'll build today using React. This is a great beginner project that helps you understand how to:

• 🔥 Read with Full Features on Our Website

  Work with React components

• Use JavaScript Date API

• Apply conditional rendering in React

• Add basic styling

Let’s start step by step.

🛠️ Step 1: Set Up Your React App

If you haven’t created a React app yet, open your terminal and run:

npx create-react-app greeting-app
cd greeting-app
npm start

This will create a new React project named greeting-app and start the development server.

📁 Step 2: Clean the Starter Code

Now clean up the default code in src/App.js to start fresh.

Replace the contents of App.js with:

import React from 'react';
import './App.css';

function App() {
  return (
    <div className="App">
      <Greeting />
    </div>
  );
}

export default App;

Create a new file called Greeting.js inside the src folder.

💬 Step 3: Create the Greeting Component

Now let’s build the Greeting component that will display the message based on time.

Inside Greeting.js, write the following code:

import React from 'react';

function Greeting() {
  const currentHour = new Date().getHours();

  let greetingMessage = '';
  let greetingStyle = {};

  if (currentHour >= 5 && currentHour < 12) {
    greetingMessage = 'Good Morning';
    greetingStyle = { color: 'orange' };
  } else if (currentHour >= 12 && currentHour < 17) {
    greetingMessage = 'Good Afternoon';
    greetingStyle = { color: 'blue' };
  } else if (currentHour >= 17 && currentHour < 21) {
    greetingMessage = 'Good Evening';
    greetingStyle = { color: 'purple' };
  } else {
    greetingMessage = 'Good Night';
    greetingStyle = { color: 'gray' };
  }

  return (
    <h1 style={greetingStyle}>
      {greetingMessage} 👋
    </h1>
  );
}

export default Greeting;

Code Explanation:

• new Date().getHours() gets the current hour (0-23).

• We use if-else to set a different greeting message and style depending on the hour.

• The message is displayed in an <h1> tag with inline styles (like changing the color).

🎨 Step 4: Add Some CSS (Optional)

Open App.css and make it look cleaner:

.App {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
  background-color: #f1f1f1;
  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}

✅ Final Folder Structure:

greeting-app/
│
├── src/
│   ├── App.js
│   ├── App.css
│   ├── Greeting.js

🧪 Step 5: Test Your App

Now run your app using:

npm start

You should see a greeting message based on your local time like:

• Good Morning 👋 (orange)

• Good Afternoon 👋 (blue)

• Good Evening 👋 (purple)

• Good Night 👋 (gray)

🔄 Bonus: Update Greeting Automatically

Want your greeting to update live without refreshing? Let’s add a time-based re-render using useEffect and useState.

Update your Greeting.js as follows:

import React, { useState, useEffect } from 'react';

function Greeting() {
  const [currentHour, setCurrentHour] = useState(new Date().getHours());

  useEffect(() => {
    const interval = setInterval(() => {
      setCurrentHour(new Date().getHours());
    }, 60000); // Update every 60 seconds

    return () => clearInterval(interval);
  }, []);

  let greetingMessage = '';
  let greetingStyle = {};

  if (currentHour >= 5 && currentHour < 12) {
    greetingMessage = 'Good Morning';
    greetingStyle = { color: 'orange' };
  } else if (currentHour >= 12 && currentHour < 17) {
    greetingMessage = 'Good Afternoon';
    greetingStyle = { color: 'blue' };
  } else if (currentHour >= 17 && currentHour < 21) {
    greetingMessage = 'Good Evening';
    greetingStyle = { color: 'purple' };
  } else {
    greetingMessage = 'Good Night';
    greetingStyle = { color: 'gray' };
  }

  return (
    <h1 style={greetingStyle}>
      {greetingMessage} 👋
    </h1>
  );
}

export default Greeting;

Now the app updates the greeting message every minute without needing a refresh.

🎉 Conclusion

You’ve just built a time-aware greeting app in React! 🎊
This app taught you how to:

• Use the Date API in JavaScript

• Work with React components

• Apply conditional rendering

• Use state and effects for dynamic updates

This is a perfect mini project to include in your React portfolio. You can enhance it by adding:

• Dark/light theme

• User name input