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 — 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 — 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!
