How To Build A Ticking Clock with REACT

Digital Clock

Quick Introduction to React and a Digital clock:


Digital Clock

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

Run The React Application

npm start
Happy Hacking
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;
.App {text-align: center;}.clock {background-color: #282c34;min-height: 100vh;align-items: center;justify-content: center;}
import React, { Component } from 'react';class Clock extends Component {constructor(props){super(props);//This declared the state of time at the very beginningthis.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 memorycomponentWillUnmount(){clearInterval(this.intervalID)}
//This function set the state of the time to a new timeupdateClock(){this.setState({time: new Date().toLocaleTimeString()});}render() {return (<div className="Time"><p> {this.state.time}</p></div>);}}export default Clock;
.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;}
final view
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;

Software Developer | Technical Writer | Content Creator |