How to build a clock app in react js (react js project for beginners)

React js Project demo (what we are going to build)

Hi, welcome here in this tutorial we are going to develop a clock in React Js, The prerequisites for this project are as follows:

Node.js should be installed in your system
Create a brand new ReactJs project. Just copy the code below:

npx create-react-app my-app

JavaScript

The brand-new project should look like this:

brand-new reactjs prokect (React js Project)

Here is your App.js file, copy the code below and paste it into App.js.

import logo from './logo.svg';
import './App.css';
import Clock from './Projects/Clock';
import BmiCalculator from './Projects/BmiCalculator';

function App() {
  return (
    <>
      <div className='main-wrapper'>
        {/* <Clock /> */}
        <BmiCalculator />
      </div>
    </>
  );
}

export default App;

JavaScript

Here is your code for the App.css file:

/* clock styling  */
.clock-wrapper{
  background-color: rgb(10, 27, 29);
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
}

.clock{
  font-size: 100px;
  color: aqua;
}

.main-wrapper{
  background-color: #000000;
  color: #ccc;
}


.clock-container{
  background-color: rgba(0, 255, 255, 0.2);
  padding: 20px;
  border: 8px solid aqua;
  border-radius: 20px;
  box-shadow: 0px 0px 100px 0px rgba(0, 255, 255, 0.507);
}

CSS

After creating a reactjs project, make a component ‘Clock.js’ and copy the code below, and past it to ‘Clock.js’:

Here is the code for ‘Clock.js’, copy the code and paste it into ‘Clock.js’

import React, {useState} from 'react'

const Clock = () => {
    let time = new Date().toLocaleTimeString();
    const [Clock, setClock] = useState(time)

    const UpdateClock = () =>{
        time = new Date().toLocaleTimeString();
        setClock(time);
    }

    setInterval(UpdateClock, 1000)
  return (
    <>
    <div className='clock-wrapper'>
      <div className='clock-container'>
      <h1 className='clock'>
        {Clock}
    </h1>
      </div>
    </div>
    </>
  )
}

export default Clock

JavaScript

After writing the code into the editor you can run the command below:

npm run start

JavaScript

Download the Code