Conclusion of Digital Clock

Learning Outcome

Congratulations! By completing this project, you learned how to:

• Set up a React development environment (install Node.js, use create-react-app).
• Structure a React project (understand the public and src folders).
• Write React components (App, DigitalClock) using hooks: useState for state and useEffect for side-effects like timers. We saw how React efficiently updates only the changing part of the UI.
• Use JavaScript’s setInterval() function to update state every second, and how to clean up timers.
• Style the app with CSS and run it locally.
• Deploy a React app on Netlify, either via the CLI or by connecting a GitHub repo. We followed Netlify’s guidance (install CLI, netlify init) to publish our site.

Live Link & Output Screenshot

Our live clock app is now available online. You can view the working clock here:
Digital Clock Demo on Netlify.

The screenshot below shows the final output, with the clock updating every second on a black background.

MCQs

Q1. Which React hook is used to perform side-effects like setting up a timer in a functional component?

• A. useState

• B. useEffect

• C. useContext

• D. useReducer

  Answer: B (useEffect)

Q2. How do you call a function repeatedly every second in JavaScript?

• A. setTimeout(fn, 1000)

• B. setInterval(fn, 1)

• C. setInterval(fn, 1000)

• D. setTimeout(fn, 0)

  Answer: C (setInterval with 1000 ms)

Q3. In a Create React App project, which file is the entry point that renders the root component?

• A. public/index.html

• B. src/index.js

• C. src/App.js

• D. src/DigitalClock.js

  Answer: B (src/index.js)

Q4. Which command initializes a new Netlify site for deployment from the CLI?

• A. netlify link

• B. netlify deploy

• C. netlify init

• D. netlify build

  Answer: C (netlify init)

Resources

Want to master ReactJS and build your portfolio by creating web apps like this? Check out GUVI’s IIT-M Pravartak Certified ReactJS Self-Paced Course, where you can master the art of building interactive user interfaces and web applications.

Additionally, if you want to understand how React works in a Full Stack environment, consider enrolling in GUVI’s IIM-M Pravartak Certified Full Stack Development Course, where you’ll learn React, Node.js, MongoDB, and more with hands-on projects, expert mentorship, and placement support. Perfect for beginners and professionals looking to upskill.