Главная страницаКатегория react.jsReact Router Bootcamp: от основ к продвинутому уровню

React Router Bootcamp: от основ к продвинутому уровню

Name: React Router Bootcamp: от основ к продвинутому уровню
Price: 12.5 USD
Rating: 5 (1 reviews)

React Router Bootcamp: Zero to Mastery

zerotomastery.io

★5 (всего оценок - 1)

Продолжительность

20 ч 19 мин

Категория

React.js

Количество уроков

253 Видео

Дата добавления

7 мая 2026 г., 00:30

Язык

Английский

React Router Bootcamp — это практический курс по работе с React Router v7 (Remix v3), который поможет вам уверенно освоить современную маршрутизацию и научиться строить быстрые, гибкие и масштабируемые веб‑приложения на React.

Что вы изучите в этом курсе

Курс построен так, чтобы вы постепенно прошли путь от основ к продвинутым техникам разработки с React Router v7, одновременно создавая реальное full‑stack приложение.

Базовые концепции маршрутизации

понимание принципов работы React Router v7;
настройка маршрутов и навигации;
работа с динамическими и вложенными маршрутами.

Создание архитектуры приложения на основе маршрутов

Вы научитесь строить структуру приложения, используя:

layout-компоненты и вложенные слои интерфейса;
разделение логики загрузки данных по маршрутам;
грамотное распределение ответственности между страницами и модулями.

Работа с данными и состояниями

React Router v7 объединяет маршрутизацию, навигацию и работу с данными в единую систему. В ходе курса вы освоите:

загрузку данных через loaders;
обработку состояний loading, pending и error;
мутаторы данных и работу с actions;
формы и отправку запросов без ручного менеджмента состояния.

Практический проект, который вы создадите

Вы разработаете полноценное приложение с кулинарной тематикой, включающее:

каталог рецептов;
планы питания;
списки покупок;
удобную маршрутизацию и продуманную структурную архитектуру.

Это станет отличным проектом для портфолио, демонстрирующим владение современными инструментами разработки.

Почему React Router v7 — важный навык

Версия v7 стремительно набирает популярность благодаря удобному API, улучшенной архитектуре и высокому developer experience. Вы научитесь создавать интерфейсы с мгновенными переходами, используя возможности браузера и распределённых систем вместо тяжёлых статических сборок.

Современные UX‑паттерны

Курс подробно разбирает:

обработку ошибок и состояний загрузки;
работу с формами и действиями;
создание предсказуемого и стабильного UI;
организацию комфортного пользовательского опыта.

Полный путь: от пустого проекта до деплоя

Вы освоите весь цикл разработки, включая:

инициализацию проекта;
настройку структуры и архитектуры;
интеграцию клиентской и серверной логики;
финальный деплой приложения.

Для кого предназначен этот курс

Курс идеально подойдёт разработчикам, которые хотят:

перейти на новый уровень владения React;
создавать более быстрые и производительные веб‑приложения;
работать с современными инструментами и подходами индустрии;
получить практический опыт, применимый в реальных проектах.

После завершения обучения вы уверенно освоите React Router, прокачаете навыки JavaScript и React, а также научитесь строить масштабируемую архитектуру приложений, ориентированную на продакшен.

Это пробный урок. Оформите подписку, чтобы получить доступ ко всем материалам курса. Премиум

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

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

Автор - zerotomastery.io

zerotomastery.io

Независимо от того, начинаете ли вы путь в программировании или стремитесь повысить свой уровень, академия Zero To Mastery помогает освоить ключевые технологические навыки. На платформе вы можете изучить React, JavaScript, Python, CSS и многие другие инструменты, необходимые для карьерного роста, успешного трудоустройства и достижения результатов в ведущих компаниях.

+268

Комментарии