React Router v7 で Tutorial アプリをゼロから構築する手順解説🎉
無料で読める本
React Router v7（Remix 最新版）を活用し、公式チュートリアルの「アドレス帳アプリ」をベースに、実用的なアプリへと発展させる手順を解説します。 本記事では、React Router（Remix）の基本的な扱い方を押さえつつ、エコシステムを活用した構築方法を学べる内容になっています。 📌主な使用パッケージのバージョン ・react-router: 7.1.5 ・tailwindcss: 4.0.0
Chapters
はじめに
第1部 セットアップ
プロジェクト作成
VSCodeのデバッグ環境整備
Biome導入
vite.config.tsで環境変数を扱う設定
Vitest導入
GitHub設定ファイル追加（ワークフロー、テンプレート）
ファイルベースルーティング設定
shadcn/ui導入
Storybook導入
第2部 React Router Tutorialアプリ構築
Prisma導入
共通コンポーネント準備
サイドバー作成
インデックスページ作成
aboutページ作成（プリレンダリング）
react-call導入（確認用ダイアログ）
連絡先ページ作成（URLパラメータ）
連絡先の新規作成機能
Conform導入（バリデーション）
連絡先の編集画面作成
連絡先の削除機能
Toast導入（セッションストレージ利用）
ユーザーアクション処理にToast表示実装
Community
Author
Topics
