最初の小さい PR として、画面をコンポーネントに分けながら静的な Todo 一覧 UI を組み立てる段階。
カリキュラムスタートこの STEP で作るもの
PR 目安
静的 UI とコンポーネント分割だけに絞って出す。
例: feature/phase3-step1-static-todo-list
できるようになること
Reactコンポーネント設計の基礎
Reactのコンポーネント概念・Props・JSXを理解し、UIを再利用可能な部品として構築する考え方を習得する
Props でイベントとデータを親子で受け渡す
コールバック関数を props として子に渡し、子から親へイベントを伝える一方向データフローの基本を身につける
App → TodoList → TodoItem の 3 層ツリーに分割する
1 ファイルに書いていた UI を App / TodoList / TodoItem の 3 層に分け、責務ごとのコンポーネント分割を体感する
Tailwind CSS で見た目を整える
Vite プロジェクトに Tailwind を導入し、ユーティリティクラスだけで Todo アプリの見た目を作る