フック関数

import文

import ReactDOM from 'react-dom'
// 問題1. useStateをインポートしよう
import React, { useState } from 'react'

function App() {
  // 問題2. 現在の秒数のstateを定義しよう
  const [time, setTime] = useState(0)

  return (
    <div>
      <h1>タイマー</h1>
      {/* 問題3. 現在の秒数を表示しよう */}
      <h2>{time}秒</h2>
      <button>ストップ</button>
      <button>スタート</button>
      <button>リセット</button>
    </div>
  )
}
ReactDOM.createRoot(document.getElementById('root')).render(<App />)


code-lesson

import ReactDOM from 'react-dom'
// 問題1. useStateをインポートしよう
import React from 'react'

function App() {
  // 問題2. 現在の秒数のstateを定義しよう

  return (
    <div>
      <h1>タイマー</h1>
      {/* 問題3. 現在の秒数を表示しよう */}

      <button>ストップ</button>
      <button>スタート</button>
      <button>リセット</button>
    </div>
  )
}
ReactDOM.createRoot(document.getElementById('root')).render(<App />)


stateを定義しよう（1）

完成形を操作してみよう

見た目を作ろう

タイマーを起動させよう

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

stateを定義しよう（2）

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

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