このレッスンをはじめる前に
このレッスンを進めるには前提知識が必要です。先に以下のレッスンを完了しておきましょう。
-
#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()
