useState

import文

import ReactDOM from 'react-dom'
// 問題1. useStateを使う準備をしよう
import React, { useState } from 'react'
// ここまで

const App = () => {
  // 問題2. ボタンの状態を表すstateを定義しよう
  const [isActive, setIsActive] = useState(true)
  // ここまで

  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'
        }}
      >
        ON
      </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を定義しよう
  // ここまで

  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'
        }}
      >
        ON
      </button>
    </div>
  )
}

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


ボタンのstateを定義しよう

完成形を操作してみよう

見た目を作ろう

論理否定（!）

ボタンのstateを更新しよう

三項演算子

条件付きレンダー

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

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

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

Reactコース

【実践】最低限の知識を使って簡単なアプリを作ってみよう🚸

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