フック関数

イベントハンドラ

prevState

import文

import ReactDOM from 'react-dom'
// 問題1. useStateを使う準備をしよう
import React, { useState } from 'react'
//ここまで
const App = () => {
  // 問題2. カウンターのstateを定義しよう
  const [count, setCount] = useState(0)
  //ここまで
  const handleIncrease = () => {
    // 問題3. 数字を増やそう
    setCount((prevCount) => prevCount + 1)
    // ここまで
  }
  return (
    <div>
      <h1>カウント：{count}</h1>
      {/* 問題4. 「プラス」ボタンにイベントハンドラを渡そう */}
      <button style={{ fontSize: '20px' }} onClick={handleIncrease}>
        プラス
      </button>
      {/* ここまで */}
      <button style={{ fontSize: '20px' }}>マイナス</button>
      <button style={{ fontSize: '20px' }}>２倍</button>
      <button style={{ fontSize: '20px' }}>リセット</button>
    </div>
  )
}

ReactDOM.createRoot(document.getElementById('root')).render(<App />)


code-lesson

import ReactDOM from 'react-dom'
// 問題1. useStateを使う準備をしよう
import React from 'react'
//ここまで
const App = () => {
  // 問題2. カウンターのstateを定義しよう
  //ここまで
  const handleIncrease = () => {
    // 問題3. 数字を増やそう
    // ここまで
  }
  return (
    <div>
      <h1>カウント：{count}</h1>
      {/* 問題4. 「プラス」ボタンにイベントハンドラを渡そう */}
      <button style={{ fontSize: '20px' }}>プラス</button>
      {/* ここまで */}
      <button style={{ fontSize: '20px' }}>マイナス</button>
      <button style={{ fontSize: '20px' }}>２倍</button>
      <button style={{ fontSize: '20px' }}>リセット</button>
    </div>
  )
}

ReactDOM.createRoot(document.getElementById('root')).render(<App />)


クリックで数字を増やしてみよう

見た目を作ろう

完成形を操作してみよう

数字をリセットしてみよう

クリックで数字を減らしたり、2倍にしたりしてみよう

メッセージを表示させよう

Reactでカウンターアプリの作成プロセスを学びます。
stateの更新方法とイベント処理の基本を実践的に理解します。

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