⏰ How to Build a Digital Clock in React.js: Step-by-Step for Kids

Ever wondered how your computer or phone shows the exact time? It’s all thanks to something called a digital clock — a tiny piece of code that updates every second to display the current time.

And here’s the exciting part — with React.js, kids can create their very own digital clock in just a few simple steps!

In this blog, we’ll walk you through how to build a digital clock in React.js, explain what’s happening behind the scenes, and show why this is a great coding project for young learners.

What is React.js?

Before jumping in, let’s understand what React.js is.

React.js (or simply React) is a JavaScript library developed by Facebook that helps you build interactive web pages and apps.

Think of it as LEGO blocks for websites — each block (called a component) does a small job, and together, they make the entire app work.

A digital clock is one such component that updates every second to show the current time.

What Kids Will Learn

By building a digital clock in React.js, kids will learn:

⏰ How to use React components

🧠 How to manage state and updates in real time

💻 How to use JavaScript functions to show and format the current time

🌐 How web apps display dynamic information

It’s a great hands-on project to learn how real-world applications work!

🧩 Tools You’ll Need

Everything you need is free! Here’s what to set up:

React environment (either of these works):

CodeSandbox
— easiest for beginners (no installation required!)

Or install React locally using:

npx create-react-app digital-clock
cd digital-clock
npm start

A browser — Chrome, Edge, or Firefox.

Your curiosity! 🧠💫

🪄 Step-by-Step: Build a Digital Clock in React.js

Let’s start coding! 🚀

Step 1: Create a New Component

In your React app, create a new file named DigitalClock.js.
Every React component is like a mini program that returns something to display on the screen.

Here’s the starter code:

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

function DigitalClock() {
const [time, setTime] = useState(new Date().toLocaleTimeString());

useEffect(() => {
const timer = setInterval(() => {
setTime(new Date().toLocaleTimeString());
}, 1000);

// Clean up the timer when the component unmounts
return () => clearInterval(timer);
}, []);

return (
<div style={styles.container}>
<h1 style={styles.heading}>🕒 My Digital Clock</h1>
<h2 style={styles.time}>{time}</h2>
</div>
);
}

const styles = {
container: {
textAlign: "center",
marginTop: "100px",
fontFamily: "Arial, sans-serif",
},
heading: {
color: "#007bff",
},
time: {
fontSize: "48px",
color: "#333",
},
};

export default DigitalClock;

Step 2: Add It to Your App

Now, open your App.js file and import the DigitalClock component:

import React from “react”;
import DigitalClock from “./DigitalClock”;

function App() {
return (
<div>
<DigitalClock />
</div>
);
}

export default App;

Run your app — and boom! 🎉 You’ll see your very own live digital clock updating every second.

🧠 How Does It Work?

Let’s break it down in simple words 👇

useState → Keeps track of the current time.

useEffect → Updates the time every second using setInterval().

new Date().toLocaleTimeString() → Gets the current local time from your computer.

setTime() → Changes the state, which tells React to re-render the clock on screen.

React automatically refreshes the clock every time the time value updates — that’s the magic of reactive programming! 💫

🎨 Step 3: Make It Fancy

Now that your clock works, let’s make it look cooler!

Try adding background colors and animations:

const styles = {
container: {
backgroundColor: “#f0f8ff”,
border: “2px solid #007bff”,
borderRadius: “12px”,
width: “300px”,
margin: “100px auto”,
padding: “20px”,
boxShadow: “0 0 10px rgba(0,0,0,0.2)”,
},
heading: {
color: “#007bff”,
fontSize: “24px”,
},
time: {
fontSize: “50px”,
color: “#222”,
},
};

You can even display the date below the clock:

const date = new Date().toLocaleDateString();

<h3 style={{ color: “#555” }}>{date}</h3>;

🧩 Step 4: Add a Fun Challenge

Here are a few ideas to make your project even more exciting:

🌙 Add a Dark Mode toggle — Switch background colors when the user clicks a button.

🌏 Show Time Zones — Display clocks for different countries.

💬 Add Greeting Messages — Show “Good Morning” or “Good Evening” based on the time.

🎵 Add Sounds — Play a tick sound every second or an alarm at a specific time.

Every small improvement helps kids think like real developers. 💪

🧠 Why This Project is Great for Kids

Building a digital clock might sound simple, but it’s a powerful project for young coders because it teaches:

• Real-time updates using JavaScript and React hooks
• Problem-solving and debugging skills
• The concept of state management
• How front-end apps interact with real-world data (like time)
• Plus, it’s visual for the kids get instant feedback and see their creation in action!

🌈 Learn React.js with Codingal

At Codingal, we make coding fun, creative, and easy for kids.
In our React.js classes, students build interactive web apps — from digital clocks and to-do lists to small games and chat apps by step-by-step with live guidance from expert teachers.

Kids don’t just learn to code; they learn to think logically, solve problems, and build cool projects they can proudly share with friends and family! 🚀

💬 Final Thoughts

React.js might sound advanced, but projects like this show that anyone,  even kids,  can build amazing things with the right guidance.

So go ahead, open your coding sandbox, and start building your own digital clock today.
Every tick of your clock is a step toward becoming a future web developer! 💻🕒

✨ Ready to Start Your Coding Journey?

👉 Join a free React.js coding class at Codingal
and help your child build fun, real-world projects — from clocks to games — with expert guidance and interactive lessons!