CF

React Router Bootcamp: Zero to Mastery

20h 19m 51s
English
Paid

React Router Bootcamp: Zero to Mastery is a 253-lesson 20 hours 19 minutes self-paced course by Zero To Mastery. React Router Bootcamp is a practical course on working with React Router v7 (Remix v3) that will help you confidently master modern routing and learn to build fast, flexible, and scalable web applications using React.

Course facts

Lessons
253
Duration
20 hours 19 minutes
Level
All levels
Language
English
Updated
Instructor
Zero To Mastery
Price
Premium

React Router Bootcamp is a practical course on working with React Router v7 (Remix v3) that will help you confidently master modern routing and learn to build fast, flexible, and scalable web applications using React.

What You Will Learn in This Course

The course is designed to guide you gradually from the basics to advanced techniques of development with React Router v7, while simultaneously creating a real full-stack application.

Basic Concepts of Routing

  • understanding the principles of React Router v7;
  • setting up routes and navigation;
  • working with dynamic and nested routes.

Creating Application Architecture Based on Routes

You will learn to build the structure of an application using:

  • layout components and nested interface layers;
  • data loading logic distribution across routes;
  • effective responsibility distribution between pages and modules.

Working with Data and States

React Router v7 integrates routing, navigation, and data handling into a unified system. During the course, you will master:

  • data loading through loaders;
  • handling loading, pending, and error states;
  • data mutators and working with actions;
  • forms and request submissions without manual state management.

The Practical Project You Will Create

You will develop a full-fledged culinary-themed application, including:

  • a recipe catalog;
  • meal plans;
  • shopping lists;
  • convenient routing and well-thought-out structural architecture.

This will serve as an excellent portfolio project demonstrating proficiency with modern development tools.

Why React Router v7 is an Important Skill

Version v7 is rapidly gaining popularity due to its convenient API, improved architecture, and superior developer experience. You will learn to create interfaces with instant transitions, using browser capabilities and distributed systems instead of heavy static builds.

Modern UX Patterns

The course thoroughly covers:

  • error and loading state handling;
  • working with forms and actions;
  • creating predictable and stable UI;
  • organizing a comfortable user experience.

The Complete Path: From an Empty Project to Deployment

You will master the entire development cycle, including:

  • initializing the project;
  • setting up structure and architecture;
  • integrating client and server logic;
  • final deployment of the application.

Who This Course is For

The course is ideal for developers who want to:

  • reach a new level of React proficiency;
  • create faster and more efficient web applications;
  • work with modern tools and industry approaches;
  • gain practical experience applicable to real projects.

Upon completing the training, you will confidently master React Router, enhance your JavaScript and React skills, and learn to build scalable application architectures oriented towards production.

Additional

https://github.com/zachdtaylor/remix-recipes-course

Who teaches React Router Bootcamp: Zero to Mastery? Zero To Mastery

Zero To Mastery thumbnail

Zero To Mastery (ZTM) is a Toronto-based online coding academy founded by Andrei Neagoie, originally a senior developer at large Canadian tech firms before turning to teaching full-time. The academy's signature is the cohort-based bootcamp track combined with a deep self-paced course library, all aimed at career-changers and self-taught developers preparing to land software-engineering roles at top companies.

The instructor roster has grown well beyond Andrei to include other senior practitioners: Daniel Bourke (machine learning), Aleksa Tešić (DevOps), Jacinto Wong, and others. Courses cover the full software-engineering career path: web development with React and Next.js, Python, machine learning and deep learning, DevOps and cloud, system design, mobile, and the algorithm / data-structure interview prep that gates engineering jobs.

The CourseFlix listing under this source carries over 120 ZTM courses spanning that full range. Material is paid; ZTM itself runs on a monthly / annual membership model. The teaching style favours long-form, project-based courses where students build complete portfolio-quality applications rather than disconnected feature tutorials.

What lessons are included in React Router Bootcamp: Zero to Mastery?

This is a demo lesson (10:00 remaining)

You can watch up to 10 minutes for free. Subscribe to unlock all 253 lessons in this course and access 10,000+ hours of premium content across all courses.

View Pricing
0:00
/
#1: Introduction
All Course Lessons (253)
#Lesson TitleDurationAccess
1
Introduction Demo
06:13
2
What Is React Router_
03:10
3
Why React Router_
03:45
4
Remix vs React Router
02:13
5
Intro to the Master Project
03:52
6
The Recipe Page & Optimistic UI
07:24
7
Finishing the Tour of the Master Project
05:39
8
Installing NodeJS
02:03
9
Creating a React Router Project
01:45
10
The Vite Config File
01:10
11
Upgrading React Router and Future Flags
02:55
12
Owning your Entry Poi
02:00
13
What are Routes_
03:54
14
Basic Routing
03:45
15
Nested Routing
05:03
16
The Root Route
03:16
17
React Router's Special Compone
03:43
18
The Link API
03:06
19
Adding Style with Links
05:56
20
Techniques for Component-Level CSS
07:45
21
Using Tailwind - Part
04:27
22
Using Tailwind - Part
05:46
23
Using Tailwind - Part
05:10
24
What are Loaders_
04:59
25
The Need for Pending UI
01:59
26
Pending UI with the Browser
02:23
27
Pending UI with useNavigation
04:00
28
Pending UI when the Loader is Slow
05:11
29
Why Load Before Route Transitions
09:44
30
Errors and Error Boundaries
04:29
31
Installing Postgres with Docker
15:10
32
Setting Up Prisma with Postgres
07:16
33
Overview
02:26
34
Setting up the Pantry Route
04:43
35
Redire in React Router
03:32
36
Setting Up the Pantry Database Tables
13:13
37
Seeding the Database
09:14
38
Database UI Tools
09:37
39
Creating a Model Abstraction
10:38
40
Building a Basic Shelf UI
10:54
41
Intro to HTML Forms
21:35
42
Enhancing the Search Bar with JavaScript
04:50
43
Creating Shelves
14:12
44
Enhancing the Create Shelf Button
04:55
45
Auto-Scrolling to the Left
02:10
46
Making the Pantry Section Scrollable
01:10
47
Adding a Delete Button to Each Pantry Shelf
06:13
48
Making the Action Handle Multiple Forms
05:59
49
Deleting Pantry Shelves
06:47
50
Handling Multiple Deletes
06:58
51
Introducing useFetcher
07:31
52
More Cases for useFetcher
02:06
53
Server State in React Router
04:28
54
Editing Shelf Names
12:28
55
Validating Forms with Zod
18:45
56
Intro to Optimistic UI
09:20
57
Optimistically Deleting Shelves
12:57
58
Creating Shelf Items
07:22
59
Deleting Shelf Items
11:57
60
Optimistically Creating Shelf Items
21:46
61
Suppressing the Layout Effect Warning
04:24
62
Optimistically Deleting Shelf Items
08:18
63
Additional Enhanceme
14:17
64
Overview
01:33
65
The User Model
07:41
66
The Login Route
03:06
67
Setting Up the Login Route Action
05:03
68
Intro to Cookies
02:25
69
Setting Our First Cookie
03:41
70
Cookie Attributes
07:28
71
A Simple Auth Flow
06:21
72
React Router's Cookie Helper
05:05
73
Cryptographic Signatures
04:10
74
Signing Cookies
01:46
75
Signing Cookies in React Router
04:28
76
Sessions
03:43
77
Session Storage
04:03
78
Session Storage in React Router
07:11
79
Overview
02:46
80
What is Authentication
02:03
81
Overview of Magic Link Authentication
02:52
82
Magic Link Structure
01:52
83
Generating Magic Links
07:47
84
Updating the Login Route
03:58
85
Validation Route Overview
02:13
86
Parsing the Magic Link Payload
08:37
87
Validating the Expiration Time
03:10
88
Validating the Nonce
06:05
89
Finishing the Login
02:43
90
The Sign Up Form
08:13
91
The Sign Up Form Action
09:38
92
Signing Up for Mailgun
03:49
93
Setting Up the Mailgun Client
06:17
94
Sending the Magic Link Email
06:09
95
Showing the Check Email Message
02:20
96
Overview
02:53
97
Authorization Rules for the Login Page
02:27
98
Authorization Utilities
03:37
99
Login Authorization Rule #
03:27
100
Middleware with Client-Side Navigation
02:18
101
Login Authorization Rule #
01:04
102
Authorization Rules for the Pantry Page
05:55
103
Pantry Authorization Rule #
03:48
104
Pantry Authorization Rule # (Middleware Request Context)
04:07
105
Pantry Authorization Rules -
02:13
106
Pantry Authorization Rules -
04:22
107
Pantry Authorization Rule #
02:50
108
UI Updates Roadmap
02:16
109
Adding an Error Boundary
07:31
110
Hiding the App Nav Button
03:04
111
Creating a Logout Route
04:39
112
Overview
04:06
113
Revisiting the React Router Philosophy
03:29
114
Setting Up the Recipes Route
04:03
115
Setting Up the Recipe Database Tables
03:56
116
Updating the Seed Script
04:24
117
Recipe Page Compone
01:45
118
The Recipes Loader
04:52
119
Rendering the Recipe List
04:20
120
Creating a Search Bar Component
07:47
121
Supporting Search in the Loader
02:10
122
The Create Recipe Form
03:25
123
Setting Up the Recipe Detail Route
04:57
124
Sorting the Recipes List
01:36
125
Preserving the Search Parameters
06:18
126
Recipe Link Pending UI
05:42
127
Using Link Prefetch
07:14
128
Recipe Detail Route Overview
01:40
129
Overview of Step - Creating an Input Component
06:41
130
Displaying the Name and Total Time
10:14
131
Rendering the Ingredie
07:25
132
Rendering the Instructions
06:31
133
Overview of Step - Updating Recipes
01:04
134
Saving the Recipe Name, Total Time, and Instructions
08:33
135
FormData's getAll Function
04:01
136
Updating the validateForm Function
08:29
137
Updating the Ingredie
08:06
138
Creating New Ingredie
07:29
139
Addressing and Issue
04:09
140
Adding Error Messages to the UI
07:40
141
Exercise Imposter Syndrome
02:57
142
Overview of Step - Deleting Recipes and Ingredie
00:33
143
Deleting a Recipe
02:28
144
Deleting Ingredie
03:39
145
Authorization Rules for the Recipe Detail Route
01:51
146
Recipe Detail Authorization Rule #
02:33
147
Recipe Detail Authorization Rules -
01:51
148
Enhancement Overview
02:35
149
Overview of Step - Saving Inp on Change
01:20
150
Saving Recipe Inp on Change
08:23
151
Creating an Ingredient Row Component
05:53
152
Saving Ingredient Inp on Change
04:04
153
Persisting the Recipe Fetcher Data
06:51
154
Persisting the Ingredient Fetcher Data
05:07
155
Debouncing Form Inp
02:07
156
Creating a Hook for Debouncing
07:04
157
Debouncing the Form Inp
04:45
158
Overview of Step - The Case for Optimistic UI in the Side Bar
01:39
159
Creating a RecipeListItem Component
02:24
160
Updating the Side Bar with Fetcher IDs
06:32
161
Overview of Step
03:40
162
Wiring up a Fetcher to Create New Ingredie
09:28
163
Creating a Hook for Optimistically Rendering Ingredie
05:18
164
Optimistically Rendering New Ingredie
04:59
165
Updating the Default Enterey Behavior
04:15
166
Creating New Ingredie with the Enterey
01:55
167
Focusing the Amount Input on Create
04:48
168
Optimistically Deleting Ingredie
03:44
169
Overview
01:23
170
Creating a File Input
03:27
171
The Urlencoded Content Type
05:36
172
The Multipart Content Type
05:30
173
Parsing Files from Multipart Forms
02:56
174
Storing Files to Disk
03:53
175
Serving the Image Files
05:28
176
Writing the Image URL to the Database
02:47
177
Overview
03:30
178
Updating the DB to Track Meal Plans
02:19
179
Modals in React Router
02:45
180
Setting Up the Modal Route
02:27
181
Rendering a Modal
06:10
182
Creating some Compone for the Modal
05:26
183
Meal Plan Modal UI
05:44
184
Revalidating Modal Parent Routes
05:55
185
Passing Context to the Outlet
04:47
186
Creating the Modal Action
05:23
187
The Update Meal Plan Action Case
06:19
188
Indicating which Recipes are in the Meal Plan
03:32
189
The Meal Plan Filter Button
07:01
190
The Meal Plan Filter Backend
02:27
191
Preserving the Search State when Filtering
05:18
192
Preserving the Filter State when Searching
03:49
193
Overview of Next Steps and Setting Up the Grocery List Route
02:18
194
Defining the Grocery List Item Type
04:17
195
Building the Grocery List Item Component
06:17
196
Getting Started on the Grocery List Loader
04:07
197
Formatting the Missing Ingredie
03:36
198
Grouping Grocery List Items by the Ingredient Name
06:06
199
Rendering the Grocery List
02:36
200
Creating the Grocery List Route Action
03:22
201
Adding Grocery Items to the Pantry
06:21
202
The Grocery List Empty State
03:18
203
Clearing the Meal Plan
06:14
204
Overview
01:29
205
The PageLayout Component
04:06
206
Setting up the Settings Route
02:35
207
Intro to Resource Routes
03:04
208
MIME Types
05:46
209
Overview of Customizing the Theme
02:34
210
Renaming the Resource Route
01:08
211
Controlling the Tailwind Theme with the Theme Resource Route
05:02
212
Building the Form to Change the Site Theme
03:50
213
Creating the Theme Cookie
02:09
214
The App Settings Route Action
04:05
215
The App Settings Route Loader
02:51
216
Fixing the Off-By-One Issue
05:20
217
Returning Dynamic CSS Based on the Theme Cookie
03:32
218
Overview
00:53
219
Redirecting the Home Page
01:25
220
The Discover Page UI
04:38
221
Discover Detail Page Setup
02:58
222
Discover Detail Page UI
03:13
223
Intro to Caching
01:48
224
Private vs Server Caches
03:10
225
Preview of Using the Browser Cache
03:42
226
Caching Vocabulary
02:36
227
The Default Browser Strategy
03:32
228
The No-Store Strategy
01:24
229
The Fixed-Time Strategy
01:22
230
The Cache-Busting Strategy
04:10
231
The Revalidate-Once-Stale Strategy
01:45
232
Etags
05:20
233
Responding to the If-None-Match Header
07:37
234
The Stale-While-Revalidate Strategy
03:32
235
Introduction to Testing
01:01
236
Setting Up Playwright
02:00
237
Writing our First Test
06:52
238
Creating Dynamic Routes
07:01
239
Creating a Test Login Route
05:57
240
Testing a Typical Pantry Page Flow
07:18
241
Finishing up the Pantry Test
04:05
242
The Playwright UI
02:23
243
Creating a Delete User Test Route
03:18
244
Deleting Test Users
01:42
245
Deployment Overview
00:45
246
The Fly CLI
02:48
247
Prisma MIgrations
03:28
248
Creating the Database Server
03:15
249
Creating the App Server
01:39
250
Setting Environment Variables
03:27
251
Deploying the App
01:10
252
An Example of Upgrading Remix
13:52
253
Thank You!
01:18
Unlock unlimited learning

Get instant access to all 252 lessons in this course, plus thousands of other premium courses. One subscription, unlimited knowledge.

Learn more about subscription

What courses are similar to React Router Bootcamp: Zero to Mastery?

More courses by Zero To Mastery

Frequently asked questions

What are the prerequisites for this course?
Before enrolling in this course, students should have a basic understanding of JavaScript and React. Familiarity with fundamental web development concepts is also recommended as the course builds a full-stack application using React Router v7.
What will I build during the course?
Throughout the course, students will develop a full-fledged culinary-themed application. This project includes a recipe catalog, meal plans, and shopping lists, all integrated with efficient routing and structural architecture using React Router v7.
Who is the target audience for this course?
The course is intended for developers who want to master React Router v7, including those looking to build scalable web applications and enhance their skills in modern routing techniques. It is suitable for both intermediate and advanced React developers.
How does this course compare in depth and scope to other courses?
This course focuses specifically on React Router v7, covering everything from basic concepts to advanced techniques. It offers a practical approach by guiding students through the creation of a real-world application, which is not always covered in comparable courses.
What specific tools or platforms are taught in the course?
The course teaches React Router v7 (Remix v3) and integrates routing, navigation, and data handling into a unified system. Students will learn about layout components, data loading through loaders, and handling various states like loading, pending, and error states.
What topics are not covered in this course?
The course does not cover basic React concepts or general JavaScript fundamentals in depth, as it focuses specifically on mastering React Router v7 and building a full-stack application using advanced routing techniques.
What value does this course provide for future career opportunities?
Mastering React Router v7 through this course can significantly enhance a developer's ability to build scalable and efficient web applications. The skills gained are applicable to modern web development roles and can be valuable for positions requiring expertise in React and routing.