【React】ストップウォッチの作成方法【JavaScript】

はじめに

　本記事は、プログラミング初学者が、学習を進めていて疑問に思った点について調べた結果を備忘録も兼ねてまとめたものです。
　そのため、記事の内容に誤りが含まれている可能性があります。ご容赦ください。
　間違いを見つけた方は、お手数ですが、ご指摘いただけますと幸いです。

ストップウォッチの作成方法

react-timer-hookを導入

Terminal

$ npm install --save react-timer-hook

コンポーネントの作成

MyStopwatch.jsx

import React from 'react';
import { useStopwatch } from 'react-timer-hook';

export const MyStopwatch = () => {
  const {
    seconds,
    minutes,
    hours,
    days,
    isRunning,
    start,
    pause,
    reset,
  } = useStopwatch({ autoStart: false });


  return (
    <div style={{textAlign: 'center'}}>
      <h1>ストップウォッチ</h1>
      <div style={{fontSize: '100px'}}>
        <span>{hours}</span>:<span>{minutes}</span>:<span>{seconds}</span>
      </div>
      <p>{isRunning ? '計測中...' : '一時停止中'}</p>
      <button onClick={start}>スタート</button>
      <button onClick={pause}>一時停止</button>
      <button onClick={reset}>リセット</button>
    </div>
  );
}

App.jsx

import { MyStopwatch } from './MyStopwatch'

export default function App() {
  return (
    <div>
      <MyStopwatch />
    </div>
  );
}