DEV Community

loading...
Cover image for How to Build a Ticking Clock With REACT

How to Build a Ticking Clock With REACT

olanetsoft profile image Olubisi Idris Ayinde💡 ・3 min read

Hi guys! In this article, we will be building a digital ticking clock with React, Cool Right? :)

clock gif

Quick Introduction to React and a Digital clock:

REACT

React is a JavaScript library created by Facebook

React is a User Interface (UI) library

React is a tool for building UI components

DIGITAL CLOCK

A digital clock is a type of clock that displays the time digitally (i.e. in numerals or other symbols), as opposed to an analog clock, where the time is indicated by the positions of rotating hands.

Now we are going to start by creating a react app, Go to any directory of your choice on your window terminal and type the following at the command prompt.


npx create-react-app ticking-clock-with-react

After a successful installation then Change the Directory

cd ticking-clock-with-react

Start the React Application

npm start

You should see this on your browser. Don't worry it might take a couple of minutes.

React

Happy Hacking!

Now let's open our application in any IDE of your choice, I use visual studio code for my development feel free to use any IDE of your choice.
You should see the file structure looking this way:

file structure

In the App.js We need to change it from a functional component to a class-based component. You should have something like the screenshot below, if you don't just skip this step.

file

import React, { Component } from 'react';
import './App.css';

class App extends Component {
render() {
return (
<div className="App">
<div className="clock">
</div>
</div>
);}
}

export default App; 
Enter fullscreen mode Exit fullscreen mode

Then your App.css, You should have something like the screenshot below

file structure

.App {
text-align: center;
}
.clock {
background-color: #282c34;
min-height: 100vh;
align-items: center;
justify-content: center;
}
Enter fullscreen mode Exit fullscreen mode

Now let us create the clock component with the names clock.js and clock.css for styling it inside the src folder.

Insert the code snippet below into the clock.js component that was created earlier.

import React, { Component } from 'react';
class Clock extends Component {
constructor(props){
super(props);
//This declared the state of time at the very beginning
this.state ={
time: new Date().toLocaleTimeString()
}
}

//This happens when the component mount and the setInterval function get called with a call back function updateClock()
componentDidMount() {
this.intervalID = setInterval(() =>
this.updateClock(),
1000
);}

//This section clears setInterval by calling intervalID so as to optimise memory
componentWillUnmount(){
clearInterval(this.intervalID)
}

//This function set the state of the time to a new time
updateClock(){
this.setState({
time: new Date().toLocaleTimeString()
});
}
render() {
return (
<div className="Time">
     <p> {this.state.time}</p>
</div>
);}
}
export default Clock;
Enter fullscreen mode Exit fullscreen mode

Now you need to import Clock from ‘./clock’; in the App.js file for you to see the clock on your web browser. See Screenshot Below

clock

In the clock.css file add this snippet:

.Time {
height: 500px;
width: 800px;
margin: auto;
position: absolute;
top: 0; left: 0; bottom: 0; right: 0;
padding-top: 70px;
font-family: courier, monospace;
color: white;
font-size: 110px;
}
Enter fullscreen mode Exit fullscreen mode

Now you need to import ‘./clock.css’; in the clock.js as shown below:

clockjs

On your browser, you should see this

React

Your App.js should have this:

import React, { Component } from 'react';
import Clock from './clock';
import './App.css';
class App extends Component {
render() {
return (
<div className="App">
<div className="clock">
<Clock />
</div>
</div>
);
}
}
export default App;

Enter fullscreen mode Exit fullscreen mode

Finally: Our clock ticks and works perfectly :)

Click here to find the repository on Github.

Don't forget to star the repo and give a thumbs up here!!!

Thank You!

Discussion (5)

pic
Editor guide
Collapse
mistergiga profile image
giga bokuchava

Nice post, but why do "We need to change it from a functional component to a class-based component"? Functional components are advised to use even from React documents.

Collapse
olanetsoft profile image
Olubisi Idris Ayinde💡 Author

Thank you 😊 well Its a free opinion, you can also achieve the same with a functional component.

Collapse
rasheedmikail profile image
Collapse
alfredosalzillo profile image
Alfredo Salzillo

Why the code inside the code bloks is not indented ? Also add the JavaScript/CSS tag. You don't need to add the screenshot of the code at all.

Collapse
olanetsoft profile image
Olubisi Idris Ayinde💡 Author

Not indented issue isn't from my end because its properly indented on my IDE. I don't get what you mean by js tag 🤷 on this platform can you elaborate please. Thanks in advance