イベントハンドラ

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

const App = () => {
  const [todos, setTodos] = useState([
    { id: 1, title: '姉に誕生日プレゼントを買う' },
    { id: 2, title: '論文提出' },
    { id: 3, title: '市役所に住民票の写しをもらいに行く' }
  ])

  const [todoTitle, setTodoTitle] = useState('')

  // 問題2. input入力時にstateが更新されるようなイベントハンドラを設定しよう
  const handleAddFormChanges = (e) => {
    setTodoTitle(e.target.value)
  }
  // ここまで

  return (
    <>
      <div>
        <input
          type="text"
          label="タイトル"
          // 問題1. todoのstateとinput内の表示を紐づけよう
          value={todoTitle}
          //ここまで
          // 問題3. input内の入力値が変化する度にtodoのstateを変更するイベントハンドラを紐づけよう
          onChange={handleAddFormChanges}
          //ここまで
        />
        <button>作成</button>
      </div>
      <ul>
        {todos.map((todo) => (
          <li key={todo.id}>
            <span>{todo.title}</span>
          </li>
        ))}
      </ul>
    </>
  )
}

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


code-lesson

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

const App = () => {
  const [todos, setTodos] = useState([
    { id: 1, title: '姉に誕生日プレゼントを買う' },
    { id: 2, title: '論文提出' },
    { id: 3, title: '市役所に住民票の写しをもらいに行く' }
  ])

  const [todoTitle, setTodoTitle] = useState('')

  // 問題2. input入力時にstateが更新されるようなイベントハンドラを設定しよう

  // ここまで

  return (
    <>
      <div>
        <input
          type="text"
          label="タイトル"
          // 問題1. todoのstateとinput内の表示を紐づけよう

          //ここまで
          // 問題3. input内の入力値が変化する度にtodoのstateを変更するイベントハンドラを紐づけよう

          //ここまで
        />
        <button>作成</button>
      </div>
      <ul>
        {todos.map((todo) => (
          <li key={todo.id}>
            <span>{todo.title}</span>
          </li>
        ))}
      </ul>
    </>
  )
}

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


inputに入力された値を制御しよう

追加・削除機能実装後の完成形を見てみよう

リストのレンダー

Todoリストを表示させる実装をしましょう

新規作成フォームの見た目を作ろう

useState

import文

useStateを導入しよう

stateの更新+スプレッド構文

作成ボタンを押した時の処理を実装しよう その１

作成ボタンを押した時の処理を実装しよう その２

引数

配列操作/filter(プリミティブ)

削除ボタンと削除機能を実装しよう

編集・絞り込み機能追加後の完成形を見てみよう

編集ボタンとフォームの見た目を作ろう

三項演算子

三項演算子を使って画面を切り替える実装をしよう

編集ボタンの押下時とキャンセル時に画面を切り替えよう

分割代入

 編集したいtodoを特定しよう その１

 編集したいtodoを特定しよう その２　

編集フォームのInputを制御しよう

配列操作/map

編集内容を保存しよう

<select>

セレクトボックスを設置しよう

進捗状況を表示するセレクトボックスで選択した値を保持しよう

フィルターの見た目を作ろう

絞り込み用フィルターで選択した値を保持しよう

useEffect

フィルターの変化をuseEffectで検知しよう

switch文とcase節

switch文では、指定した$(1)の結果が各$(2)節に一致する場合、その$(2)節に記述されている処理をswitch文の$(3)、または$(4)文まで順に実行する。

todoを絞り込んで一覧に表示させよう

関数コンポーネントやuseState、useEffectなどのReact Hooksを利用し、実践的なTodoアプリを構築します。
state管理やイベント処理に関する知識が身につきます。

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

Reactコース

【実践】アプリ開発に挑戦しよう💻

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

ReactでTodoアプリを作ろうの総復習クイズ

ReactでTodoアプリを作ろう