React 30 -Project 3-Building a Digital Clock App with React.js

Title image

Introduction
In this tutorial, we'll create a simple digital clock app using React.js. This project will teach us how to utilize setInterval for real-time updates and introduce the useEffect hook to manage side effects in React applications.
Preview:-

Preview Image

Explanation of `useEffect` Hook in React for beginners:

Imagine you have a magical friend called React who helps you create toys (components) for your toy town (web app). Now, sometimes you want to tell React, "Hey, when this happens, do something special!"

`useEffect` is like a magical message you give to React. You say, "React, if something changes or if the toy town is just starting, do this special thing." It's like telling React to keep an eye on certain things and perform magic spells when those things happen.

For example, you might want React to tell you when new toys arrive or when a toy needs to be fixed. That's when you use `useEffect` to communicate with your magical friend and make your toy town even more exciting!

Technical Explanation of `useEffect` Hook in React:

In React, components can do special things when they are created, updated, or removed. The `useEffect` hook is like a sidekick that helps you manage these special actions, called side effects.

1. Component Did Mount:
   When you build a new toy (component), `useEffect` is like the first time you play with it. It runs right after the toy is created.

useEffect(() => {
     // Special magic when the toy is created!
   }, []);

2. Component Did Update:
If you change something about your toy, like giving it a new color, `useEffect` helps you do something special after the change.

useEffect(() => {
     // Special magic when the toy changes!
   }, [color]);

3. Component Will Unmount:
When you decide to put a toy away and stop playing with it, `useEffect` helps you clean up and do any last-minute magic.

useEffect(() => {
     return () => {
       // Special magic before the toy is put away!
     };
   }, []);

So, `useEffect` is like your helper to handle special tasks related to your toys in the toy town. It keeps things organized and ensures your magic is cast at the right moments.

Now let’s get back to building our project:

Prerequisites
Make sure you have Node.js and npm (Node Package Manager) installed on your system.

Step 1: Set Up a New React App
Open your terminal and run the following command to create a new React app:

npx create-react-app digital-clock-app

This command will set up a new React project with the necessary files and dependencies.

Step 2: Create the Clock App
Navigate to the src folder in your project directory and open the App.js file. Replace its content with the following code:

import React, { useState, useEffect } from "react";
import "./App.css";

function App() {
  const [time, updateTime] = useState(new Date());
  useEffect(() => {
    // timer updation logic
    const timer = setInterval(() => {
      updateTime(new Date());
    }, 1000);
    return () => clearInterval(timer);
  }, []);
  return (
    <div className="App">
      <div className="elementcontainer">
        <h1>Digital Clock</h1>
        <div className="timeparent">
          <div className="timecontainer">
            {/* print the string prettily */}
            <span className="time">{time.toLocaleTimeString()}</span>
          </div>
        </div>
      </div>
    </div>
  );
}

export default App;

Explanation
useEffect Hook
The `useEffect` hook in React is used to perform side effects in function components.
In our App component, we use `useEffect` to set up an interval that updates the time state every second (1000 milliseconds).
The `useEffect` function takes two arguments: a callback function and an array of dependencies. In this case, the empty array [] means the effect will only run once when the component mounts.

`setInterval`
`setInterval` is a JavaScript function that repeatedly calls a provided function at a specified interval.
In our useEffect hook, we set up an interval to update the time state every second.

I have added a reference in footer for the styling the clock the way it is shown in app preview.

Step 3: Create CSS Styling
Create a file named `App.css` in the src folder and add some basic CSS to style our app:

body {
  background-color: black;
  margin: 0;
  padding: 0;
}

.App {
  text-align: center;
  color: white;
  height: 100vh;
  width: 100vw;
}
.timeparent {
  display: flex;
  justify-content: center;
  align-items: center;
}
.time {
  color: white;
  font-size: 70px;
  position: relative;
  display: block;
  margin-top: 45px;
  color: rgb(117, 249, 77);
}
.timecontainer {
  text-align: center;
  height: 175px;
  width: 400px;
  border: 10px solid rgb(117, 249, 77);
  border-radius: 20px;
}

@media only screen and (max-width: 600px) {
  .timecontainer {
    margin-left: 10px;
    margin-right: 10px;
  }
}

Your clock will now work as shown in preview.
Github repo:-
React30-Digital Clock Github
Codesandbox:-
React30-Digital Clock Codesandbox

Conclusion
You’ve successfully built a digital clock app using React.js! This project demonstrated the usage of setInterval for real-time updates and introduced the useEffect hook for managing side effects in React applications. Feel free to explore and customize the app further to enhance your understanding of React. Have a nice day ahead!

Check out my Youtube channel for more content:-
SaurabhNative-Youtube

Next part in the series below:-

React30-Project4