React JS: компонент часы

Давайте напишем простой компонент часы на React JS.

Этот компонент использует хуки useState и useEffect для отслеживания текущего времени и обновления его каждую секунду. Время извлекается из объекта Date и форматируется как строка, которая затем отображается в элементе h1.

Вы можете настроить внешний вид часов, стилизовав элемент h1 или добавив дополнительные элементы, например метку для отображения текущей даты. Вы также можете изменить интервал обновления времени, изменив значение, переданное функции setInterval.

import React, { useState, useEffect } from 'react';

function Clock() {
  // Initialize the current time to the current date and time
  const [time, setTime] = useState(new Date());

  // Update the time every second
  useEffect(() => {
    const interval = setInterval(() => {
      setTime(new Date());
    }, 1000);

    // Clear the interval when the component unmounts
    return () => clearInterval(interval);
  }, []);

  // Extract the hours, minutes, and seconds from the current time
  const hours = time.getHours();
  const minutes = time.getMinutes();
  const seconds = time.getSeconds();

  // Format the time as a string
  const timeString = `${hours}:${minutes}:${seconds}`;

  return (
    <div>
      {/* Display the time string */}
      <h1>{timeString}</h1>
    </div>
  );
}

export default Clock;