三項演算子

条件付きレンダー

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

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

  const handleChangeColor = () => {
    setIsActive(!isActive)
  }

  return (
    <div
      style={{
        display: 'flex',
        alignItems: 'center',
        justifyContent: 'center',
        height: '100vh'
      }}
    >
      <button
        style={{
          // 問題1. 文字色を切り替えよう
          color: isActive ? '#fff' : '#000',
          // ここまで
          // 問題2. 背景色を切り替えよう
          backgroundColor: isActive ? '#008000' : '#ff0000',
          // ここまで
          width: '150px',
          borderRadius: '24px',
          padding: '10px',
          cursor: 'pointer'
        }}
        onClick={handleChangeColor}
      >
        {/* 問題3. テキストを切り替えよう */}
        {isActive ? 'ON' : 'OFF'}
        {/* ここまで */}
      </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)

  const handleChangeColor = () => {
    setIsActive(!isActive)
  }

  return (
    <div
      style={{
        display: 'flex',
        alignItems: 'center',
        justifyContent: 'center',
        height: '100vh'
      }}
    >
      <button
        style={{
          // 問題1. 文字色を切り替えよう
          color: '#fff',
          // ここまで
          // 問題2. 背景色を切り替えよう
          backgroundColor: '#008000',
          // ここまで
          width: '150px',
          borderRadius: '24px',
          padding: '10px',
          cursor: 'pointer'
        }}
        onClick={handleChangeColor}
      >
        {/* 問題3. テキストを切り替えよう */}
        ON
        {/* ここまで */}
      </button>
    </div>
  )
}

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


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

完成形を操作してみよう

見た目を作ろう

useState

import文

ボタンのstateを定義しよう

論理否定（!）

ボタンのstateを更新しよう

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

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