import ReactDOM from 'react-dom'
import React, { useState, useEffect } from 'react'

function App() {
  const [time, setTime] = useState(0)
  const [isRunning, setIsRunning] = useState(false)

  useEffect(() => {
    if (isRunning) {
      const intervalId = setInterval(() => {
        setTime((time) => time + 1)
      }, 1000)
      return () => {
        clearInterval(intervalId)
      }
    }
  }, [isRunning])

  const startTimer = () => {
    setIsRunning(true)
  }

  const stopTimer = () => {
    setIsRunning(false)
  }

  const resetTimer = () => {
    setTime(0)
  }

  return (
    <div>
      <h1>タイマー</h1>
      <h2>{time}秒</h2>
      {isRunning ? (
        <button onClick={stopTimer}>ストップ</button>
      ) : (
        <button onClick={startTimer}>スタート</button>
      )}
      <button onClick={resetTimer}>リセット</button>
    </div>
  )
}
ReactDOM.createRoot(document.getElementById('root')).render(<App />)


code-lesson


    const questions = [
        {
            title: '  ',
            tests: [
                {
                    title: '完成形を操作してみよう',
                    hint: '',
                    test: () => expect(true).toBe(true)
                }
            ]
        }
    ];


完成形を操作してみよう

関数コンポーネント

見た目を作ろう

useState

import文

stateを定義しよう（1）

条件付きレンダー

stateを定義しよう（2）

イベントハンドラ

ボタンクリック時の処理を実装しよう

useEffect

useEffectのクリーンアップ関数

setInterval/clearInterval

prevState

タイマーを起動させよう

ReactのstateとuseEffectを活用したタイマーを作成します。
時間経過と共に更新されるUIの作成を通じて、Reactの使い方を理解します。

世界的にも人気なReactを使って、Webアプリケーションの作成について学んでいきます

Reactコース

【実践】最低限の知識を使って簡単なアプリを作ってみよう🚸

「Reactを使ったタイマー」レッスンの総復習クイズです。

副作用が実行されるタイミングは、$(1)です。

完成形を操作してみよう！