ReactでTodo管理アプリを作ろう (全20回) - プログラミングならドットインストール

このレッスンをはじめる前に

このレッスンを進めるには前提知識が必要です。先に以下のレッスンを完了しておきましょう。

JavaScriptでTodo管理アプリを作ろう (全22回) PREMIUM

PREMIUM

React入門 (全23回) PREMIUM

PREMIUM

動画レッスン一覧 (20)
質問と回答 (5)

#01 macOSで学習環境を整えよう (02:14) 無料公開中
- 完成版の確認
- 素材ファイルのダウンロード
- 作業用フォルダの設定
- index.htmlの表示
#02 Windowsで学習環境を整えよう (01:36) 無料公開中
- 完成版の確認
- 素材ファイルのダウンロード
- 作業用フォルダの設定
- index.htmlの表示
#03 Reactでp要素を描画してみよう (02:56) 無料公開中
- index.htmlの確認
- style.cssの確認
- ReactDOM.createRoot()
- render()
#04 Appコンポーネントを作っていこう (02:23) 無料公開中
- Appコンポーネント
- フラグメント
- 閉じタグの修正
#05 Todoコンポーネントを作っていこう (02:46) 無料公開中
- Todoコンポーネント
- todosの宣言
#06 リストを描画していこう (02:43)
- map()
- todo属性
- props
- リストの描画
#07 項目を削除する関数を作ろう (02:20)
- React.useState()
- handleTodoDeleteClick関数の定義
#08 filter()で配列から要素を抽出しよう (02:02)
- filter()
- setTodos()
- confirm()による確認
#09 onDeleteClick属性で関数を渡そう (02:37)
- onDeleteClick属性
- props.onDeleteClick()
- 実引数の設定
#10 チェック状態を画面に反映させよう (02:41)
- checked属性
- コンソールの表示
- 警告の確認
#11 チェック状態を反転させる関数を作ろう (02:58)
- handleTodoCheckboxChange関数の定義
- map()
- 真偽値の反転
- setTodos()
#12 onCheckboxChange属性で関数を渡そう (02:09)
- onCheckboxChange属性
- props.onCheckboxChange()
- 実引数の設定
#13 AddFormコンポーネントを作っていこう (03:00)
- AddFormコンポーネント
- React.useState()
- 警告の確認
#14 フォームで値を入力できるようにしよう (02:02)
- onChange属性
- handleTextChange関数の定義
- e.currentTarget.value
#15 リストに項目を追加する関数を作ろう (02:15)
- handleAddFormSubmit関数の定義
- todosのコピー
- todos.push()
- setTodos()
#16 onSubmit属性で関数を渡そう (02:54)
- onSubmit属性
- props.onSubmit()
- 実引数の設定
- e.preventDefault()
#17 useRef()で要素にフォーカスを当てよう (02:16)
- フォームのクリア
- React.useRef()
- ref属性
- inputRef.current.focus()
#18 チェックされた項目をまとめて削除しよう (02:52)
- handlePurgeClick関数の定義
- filter()
- setTodos()
- confirm()による確認
#19 localStorageに値を保存しよう (02:43)
- updateTodos関数の定義
- localStorage.setItem()
- JSON.stringify()
#20 Todo管理アプリを完成させよう (02:34)
- React.useEffect()
- savedTodos
- JSON.parse()
- setTodos()