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

const App = () => {
  const [count, setCount] = useState(0)
  const handleIncrease = () => {
    setCount((prevCount) => prevCount + 1)
  }
  const handleDecrease = () => {
    setCount((prevCount) => prevCount - 1)
  }
  const handleDouble = () => {
    setCount((prevCount) => prevCount * 2)
  }
  return (
    <div>
      <h1>カウント：{count}</h1>
      <button style={{ fontSize: '20px' }} onClick={handleIncrease}>
        プラス
      </button>
      <button style={{ fontSize: '20px' }} onClick={handleDecrease}>
        マイナス
      </button>
      <button style={{ fontSize: '20px' }} onClick={handleDouble}>
        ２倍
      </button>
      <button style={{ fontSize: '20px' }}>リセット</button>
      {/* 問題1. 10以上になった時にメッセージを表示させよう */}
      {count >= 10 && (
        <div style={{ 'margin-top': '40px' }}>10以上になりました。</div>
      )}
      {/* ここまで */}
      {/* 問題2. 0以下になった時にメッセージを表示させよう */}
      {count <= 0 && (
        <div style={{ 'margin-top': '40px' }}>0以下になりました。</div>
      )}
      {/* ここまで */}
    </div>
  )
}

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


code-lesson

論理積（&&）

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

const App = () => {
  const [count, setCount] = useState(0)
  const handleIncrease = () => {
    setCount((prevCount) => prevCount + 1)
  }
  const handleDecrease = () => {
    setCount((prevCount) => prevCount - 1)
  }
  const handleDouble = () => {
    setCount((prevCount) => prevCount * 2)
  }
  return (
    <div>
      <h1>カウント：{count}</h1>
      <button style={{ fontSize: '20px' }} onClick={handleIncrease}>
        プラス
      </button>
      <button style={{ fontSize: '20px' }} onClick={handleDecrease}>
        マイナス
      </button>
      <button style={{ fontSize: '20px' }} onClick={handleDouble}>
        ２倍
      </button>
      <button style={{ fontSize: '20px' }}>リセット</button>
      {/* 問題1. 10以上になった時にメッセージを表示させよう */}
      {/* ここまで */}
      {/* 問題2. 0以下になった時にメッセージを表示させよう*/}
      {/* ここまで */}
    </div>
  )
}

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


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

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

見た目を作ろう

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

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

完成形を操作してみよう 

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

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

まずは必要なスキルを確認しましょう！