イベントハンドラ

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

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

  const [result, setResult] = useState('')

  const handleOmikujiButtonClick = () => {
    const index = Math.floor(Math.random() * fortunes.length)
    setResult(fortunes[index])
  }

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

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


code-lesson

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

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

  const [result, setResult] = useState('')

  const handleOmikujiButtonClick = () => {
    const index = Math.floor(Math.random() * fortunes.length)
    setResult(fortunes[index])
  }

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

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


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

完成形を操作してみよう

関数コンポーネント

見た目を作ろう

配列から値を表示しよう

useState

import文

useStateで運勢を管理しよう

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

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

Reactでおみくじアプリを構築します。
ランダムな結果表示とコンポーネントの再利用を習得します。

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

Reactコース

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

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