Introduction

In this article, we will learn how we can create a clock in React applications.
You can check my previous articles in which we discussed ReactJS and its basic components from the below-mentioned links.
Prerequisites
  • Basic knowledge of React.js
  • Visual Studio Code IDE

Create ReactJS project

Let's first create a React application using the following command.
  1. npx create-react-app matform
>Open the newly created project in Visual Studio code and Install react clock library by using the following command:
  1. npm install react-clock
  2. npm install --save react react-live-clock
>Now Install bootstrap in this project by using the following command.
  1. npm install --save bootstrap
>Now, open the index.js file and import Bootstrap.
  1. import 'bootstrap/dist/css/bootstrap.min.css';
>Now go to src folder and create a new component 'ClockDemo.js' and add the following code in this component.
  1. import React, { Component } from 'react'
  2. import Clock from 'react-clock';
  3. import './ClockDemo.css';
  4. export class ClockDemo extends Component {
  5. state = {
  6. date: new Date(),
  7. }
  9. componentDidMount() {
  10. setInterval(
  11. () => this.setState({ date: new Date() }),
  12. 3000
  13. );
  14. }
  15. render() {
  16. return (
  17. <div className="container">
  18. <div class="row" className="hdr">
  19. <div class="col-sm-12 btn btn-info">
  20. How To Show a Clock in ReactJS
  21. </div>
  22. </div>
  23. <div className="clk">
  24. <Clock
  25. value={this.state.date}
  26. />
  27. </div>
  28. </div>
  29. )
  30. }
  31. }
  33. export default ClockDemo
Now create a css file named clockdemo.css and the following css in this file
  1. .clk
  2. {
  3. padding-left: 450px;
  4. margin-top: 20px;
  5. }
>Now open app.js file and add the following code.
  1. import React from 'react';
  2. import logo from './logo.svg';
  3. import './App.css';
  4. import ClockDemo from './ClockDemo';
  5. function App() {
  6. return (
  7. <div className="App">
  8. <ClockDemo/>
  9. </div>
  10. );
  11. }
  13. export default App;
Run the project by using 'npm start' and check the result.
Now create a new component '>ClockLiveDemo.js' and add the following code in this component
  1. import React, { Component } from 'react'
  2. import Clock from 'react-live-clock';
  3. import './ClockDemo.css';
  4. export class ClockLiveDemo extends Component {
  5. render() {
  6. return (
  7. <div>
  8. <div className="container">
  9. <div class="row" className="hdr">
  10. <div class="col-sm-12 btn btn-info">
  11. How To Show a Clock in ReactJS
  12. </div>
  13. </div>
  14. <div className="clk">
  15. <Clock format={'HH:mm:ss'} ticking={true} />
  16. </div>
  17. </div>
  18. </div>
  19. )
  20. }
  21. }
  23. export default ClockLiveDemo
Add the following css in lockdemo.css file
  1. .clk
  2. {
  3. padding-left: 450px;
  4. margin-top: 20px;
  5. }
  6. .time1
  7. {
  8. font-size: 40px;
  9. }
Now open app.js file and add the following code.
  1. import React from 'react';
  2. import logo from './logo.svg';
  3. import './App.css';
  4. import ClockLiveDemo from './ClockLiveDemo';
  5. function App() {
  6. return (
  7. <div className="App">
  8. <ClockLiveDemo/>
  9. </div>
  10. );
  11. }
  13. export default App;

Summary

In this article, we learned how to create a clock in React applications.