데브허브 | DEVHUB | React Router Address Book Tutorial
This is walkthrough of the React Router v7 Address Book tutorial
You can find the full tutorial here 👉 https://reactrouter.com/tutorials/add...
This tutorial covers:
how to setup a React Router project
various rendering strategies, such as client-side rendering, server-side rendering, and static pre-rendering
data flow in React Router with loaders and actions
type safety
pending and optimistic UI
and much more
Chapters:
00:00 - Introduction
00:13 - Setup
00:46 - The Root Route
01:38 - The Contact Route
03:12 - Nested Routes and Outlets
03:50 - Client Side Routing
04:33 - Loading Data
05:41 - Type Safety
06:42 - Adding a HydrateFallback
08:06 - Index Routes
09:25 - Adding an About Route
10:07 - Layout Routes
12:51 - Pre-rendering a Static Route
13:38 - Server-Side Rendering
14:37 - URL Params in Loaders
15:54 - Throwing Responses
16:35 - Data Mutations
17:19 - Creating Contacts
18:59 - Updating Data
20:00 - Updating Contacts with FormData
21:16 - Redirecting new records to the edit page
21:58 - Active Link Styling
23:09 - Global Pending UI
24:06 - Deleting Records
25:47 - Cancel Button
26:47 - URLSearchParams and GET Submissions
28:06 - Synchronizing URLs to Form State
29:21 - Submitting Form's onChange
30:35 - Adding Search Spinner
31:53 - Managing the History Stack
33:05 - Forms Without Navigation
34:14 - Optimistic UI
35:01 - Wrapping Up
