import ReactDOM from 'react-dom'
// 問題1. useStateをインポートしよう
import React, { useState } from 'react'

const App = () => {
  const fortunes = ['大吉', '中吉', '小吉', '吉', '末吉', '凶', '大凶']

  // 問題2. useStateで運勢の結果を管理しよう
  const [result, setResult] = useState('')

  return (
    <>
      <h1>おみくじアプリ</h1>
      <p>今日の運勢は？</p>
      {/* 問題3. 管理した運勢の結果を表示してみよう */}
      <p>{result}</p>
      <button>おみくじを引く</button>
      <button>リセット</button>
    </>
  )
}

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


code-lesson

useState

import文

import ReactDOM from 'react-dom'
// 問題1. useStateをインポートしよう
import React from 'react'

const App = () => {
  const fortunes = ['大吉', '中吉', '小吉', '吉', '末吉', '凶', '大凶']

  // 問題2. useStateで運勢の結果を管理しよう

  return (
    <>
      <h1>おみくじアプリ</h1>
      <p>今日の運勢は？</p>
      {/* 問題3. 管理した運勢の結果を表示してみよう */}
      <p>{fortunes[0]}</p>
      <button>おみくじを引く</button>
      <button>リセット</button>
    </>
  )
}

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


useStateで運勢を管理しよう

完成形を操作してみよう 

関数コンポーネント

見た目を作ろう

配列から値を表示しよう

ボタンクリック時の処理を実装しよう①

イベントハンドラ

ボタンクリック時の処理を実装しよう②

リセットボタンを実装しよう

Reactでおみくじアプリを作ろう

「Reactでおみくじアプリを作ろう」レッスンの総復習クイズです。

useStateで運勢を管理しよう

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