useState

論理否定（!）

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

const App = () => {
  const [isActive, setIsActive] = useState(true)

  // 問題1. stateを更新する関数を定義しよう
  const handleChangeColor = () => {
    setIsActive(!isActive)
  }
  // ここまで

  return (
    <div
      style={{
        display: 'flex',
        alignItems: 'center',
        justifyContent: 'center',
        height: '100vh'
      }}
    >
      <button
        style={{
          color: '#fff',
          backgroundColor: '#008000',
          width: '150px',
          borderRadius: '24px',
          padding: '10px',
          cursor: 'pointer'
        }}
        // 問題2. ボタンをクリックしたときにstateを更新しよう
        onClick={handleChangeColor}
        // ここまで
      >
        ON
      </button>
    </div>
  )
}

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


code-lesson

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

const App = () => {
  const [isActive, setIsActive] = useState(true)

  // 問題1. stateを更新する関数を定義しよう
  // ここまで

  return (
    <div
      style={{
        display: 'flex',
        alignItems: 'center',
        justifyContent: 'center',
        height: '100vh'
      }}
    >
      <button
        style={{
          color: '#fff',
          backgroundColor: '#008000',
          width: '150px',
          borderRadius: '24px',
          padding: '10px',
          cursor: 'pointer'
        }}
        // 問題2. ボタンをクリックしたときにstateを更新しよう
        // ここまで
      >
        ON
      </button>
    </div>
  )
}

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


ボタンのstateを更新しよう

完成形を操作してみよう

見た目を作ろう

import文

ボタンのstateを定義しよう

三項演算子

条件付きレンダー

ボタンを押すと見た目が変わるようにしよう

Reactのstateを使い、ユーザーのアクションに応じて色が変わるボタンを作ります。
イベントハンドリングの基本を理解します。

「Reactでクリックするたびに色が変わるボタンを作ろう」レッスンの総復習クイズです。