ReactでTodoアプリを作ろう|CodeLesson(コードレッスン)|プログラミング学習サービス

実践レッスン

ReactでTodoアプリを作ろう

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

目安:2時間30分

スキル一覧

リストのレンダー

useState

import文

イベントハンドラ

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

引数

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

三項演算子

分割代入

配列操作/map

<select>

useEffect

switch文とcase節

達成率：

0%

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

はじめる

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

はじめる

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

はじめる

useStateを導入しよう

はじめる

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

はじめる

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

はじめる

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

はじめる

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

はじめる

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

はじめる

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

はじめる

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

はじめる

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

はじめる

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

はじめる

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

はじめる

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

はじめる

編集内容を保存しよう

はじめる

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

はじめる

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

はじめる

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

はじめる

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

はじめる

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

はじめる

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

はじめる

チュートリアル

クイズで振り返ろう

総復習クイズ

ReactでTodoアプリを作ろう

20問

0分