• Урок 1. 00:01:09
    Welcome to the Course
  • Урок 2. 00:02:59
    What Is React? And Why Would You Use It?
  • Урок 3. 00:10:58
    ReactJS vs Vanilla JavaScript
  • Урок 4. 00:04:23
    Editing Our First React App
  • Урок 5. 00:02:56
    About the Course
  • Урок 6. 00:03:09
    One Course, Two Paths
  • Урок 7. 00:05:25
    How To Get The Most Out Of This Course
  • Урок 8. 00:07:11
    How To Create New React Projects
  • Урок 9. 00:02:52
    Why Do We Need A Special Project Setup?
  • Урок 10. 00:01:50
    Module Introduction
  • Урок 11. 00:01:01
    Starting Project
  • Урок 12. 00:06:58
    Adding JavaScript To A Page & How React Projects Differ
  • Урок 13. 00:08:05
    React Projects Use a Build Process
  • Урок 14. 00:12:05
    "import" & "export"
  • Урок 15. 00:07:02
    Revisiting Variables & Values
  • Урок 16. 00:02:34
    Revisiting Operators
  • Урок 17. 00:08:15
    Revisiting Functions & Parameters
  • Урок 18. 00:02:12
    Arrow Functions
  • Урок 19. 00:06:08
    Revisiting Objects & Classes
  • Урок 20. 00:11:11
    Arrays & Array Methods like map()
  • Урок 21. 00:05:17
    Destructuring
  • Урок 22. 00:03:14
    The Spread Operator
  • Урок 23. 00:05:29
    Revisiting Control Structures
  • Урок 24. 00:00:53
    Manipulating the DOM - Not With React!
  • Урок 25. 00:07:23
    Using Functions as Values
  • Урок 26. 00:01:56
    Defining Functions Inside Of Functions
  • Урок 27. 00:04:45
    Reference vs Primitive Values
  • Урок 28. 00:01:49
    Module Introduction
  • Урок 29. 00:06:08
    It's All About Components! [Core Concept]
  • Урок 30. 00:03:07
    Setting Up The Starting Project (
  • Урок 31. 00:04:43
    JSX & React Components [Core Concept]
  • Урок 32. 00:05:53
    Creating & Using a First Custom Component
  • Урок 33. 00:08:22
    How React Handles Components & How It Builds A "Component Tree" [Core Concept]
  • Урок 34. 00:06:02
    Using & Outputting Dynamic Values [Core Concept]
  • Урок 35. 00:04:43
    Setting HTML Attributes Dynamically & Loading Image Files
  • Урок 36. 00:09:07
    Making Components Reusable with Props [Core Concept]
  • Урок 37. 00:06:45
    Alternative Props Syntaxes
  • Урок 38. 00:06:33
    Best Practice: Storing Components in Files & Using a Good Project Structure
  • Урок 39. 00:06:16
    Storing Component Style Files Next To Components
  • Урок 40. 00:08:07
    Component Composition: The special "children" Prop [Core Concept]
  • Урок 41. 00:06:46
    Reacting to Events [Core Concept]
  • Урок 42. 00:06:44
    Passing Functions as Values to Props
  • Урок 43. 00:05:37
    Passing Custom Arguments to Event Functions
  • Урок 44. 00:05:31
    How NOT to Update the UI - A Look Behind The Scenes of React [Core Concept]
  • Урок 45. 00:10:29
    Managing State & Using Hooks [Core Concept]
  • Урок 46. 00:04:51
    Deriving & Outputting Data Based on State
  • Урок 47. 00:08:04
    Rendering Content Conditionally
  • Урок 48. 00:05:13
    CSS Styling & Dynamic Styling
  • Урок 49. 00:07:41
    Outputting List Data Dynamically
  • Урок 50. 00:06:06
    Module Summary
  • Урок 51. 00:01:27
    Module Introduction
  • Урок 52. 00:04:38
    You Don't Have To Use JSX!
  • Урок 53. 00:05:41
    Working with Fragments
  • Урок 54. 00:03:15
    When Should You Split Components?
  • Урок 55. 00:06:55
    Splitting Components By Feature & State
  • Урок 56. 00:06:45
    Problem: Props Are Not Forwarded To Inner Elements
  • Урок 57. 00:03:47
    Forwarding Props To Wrapped Elements
  • Урок 58. 00:08:43
    Working with Multiple JSX Slots
  • Урок 59. 00:08:45
    Setting Component Types Dynamically
  • Урок 60. 00:02:10
    Setting Default Prop Values
  • Урок 61. 00:02:18
    Onwards To The Next Project & Advanced Concepts
  • Урок 62. 00:05:11
    Not All Content Must Go Into Components
  • Урок 63. 00:03:59
    New Project: First Steps Towards Our Tic-Tac-Toe Game
  • Урок 64. 00:04:14
    Concept Repetition: Splitting Components & Building Reusable Components
  • Урок 65. 00:07:58
    Concept Repetition: Working with State
  • Урок 66. 00:02:04
    Component Instances Work In Isolation!
  • Урок 67. 00:04:55
    Conditional Content & A Suboptimal Way Of Updating State
  • Урок 68. 00:07:05
    Best Practice: Updating State Based On Old State Correctly
  • Урок 69. 00:07:43
    User Input & Two-Way-Binding
  • Урок 70. 00:07:41
    Rendering Multi-Dimensional Lists
  • Урок 71. 00:08:45
    Best Practice: Updating Object State Immutably
  • Урок 72. 00:09:40
    Lifting State Up [Core Concept]
  • Урок 73. 00:05:23
    Avoid Intersecting States!
  • Урок 74. 00:06:18
    Prefer Computed Values & Avoid Unnecessary State Management
  • Урок 75. 00:07:23
    Deriving State From Props
  • Урок 76. 00:04:13
    Sharing State Across Components
  • Урок 77. 00:05:53
    Reducing State Management & Identifying Unnecessary State
  • Урок 78. 00:02:38
    Disabling Buttons Conditionally
  • Урок 79. 00:04:29
    Outsourcing Data Into A Separate File
  • Урок 80. 00:05:20
    Lifting Computed Values Up
  • Урок 81. 00:05:30
    Deriving Computed Values From Other Computed Values
  • Урок 82. 00:05:41
    Tic-Tac-Toe Game: The "Game Over" Screen & Checking for a Draw
  • Урок 83. 00:05:29
    Why Immutability Matters - Always!
  • Урок 84. 00:05:21
    When NOT To Lift State Up
  • Урок 85. 00:03:17
    An Alternative To Lifting State Up
  • Урок 86. 00:05:16
    Final Polishing & Improving Components
  • Урок 87. 00:05:10
    Module Introduction & A Challenge For You!
  • Урок 88. 00:04:49
    Adding a Header Component
  • Урок 89. 00:05:08
    Getting Started with a User Input Component
  • Урок 90. 00:10:29
    Handling Events & Using Two-Way-Binding
  • Урок 91. 00:09:00
    Lifting State Up
  • Урок 92. 00:05:42
    Computing Values & Properly Handling Number Values
  • Урок 93. 00:09:03
    Outputting Results in a List & Deriving More Values
  • Урок 94. 00:04:25
    Outputting Content Conditionally
  • Урок 95. 00:03:58
    Module Introduction & Starting Project
  • Урок 96. 00:03:23
    Splitting CSS Code Across Multiple Files
  • Урок 97. 00:02:33
    Styling React Apps with Vanilla CSS - Pros & Cons
  • Урок 98. 00:03:32
    Vanilla CSS Styles Are NOT Scoped To Components!
  • Урок 99. 00:06:25
    Styling React Apps with Inline Styles
  • Урок 100. 00:03:28
    Dynamic & Conditional Inline Styles
  • Урок 101. 00:05:42
    Dynamic & Conditional Styling with CSS Files & CSS Classes
  • Урок 102. 00:09:52
    Scoping CSS Rules with CSS Modules
  • Урок 103. 00:08:04
    Introducing "Styled Components" (Third-party Package)
  • Урок 104. 00:04:48
    Creating Flexible Components with Styled Components
  • Урок 105. 00:11:08
    Dynamic & Conditional Styling with Styled Components
  • Урок 106. 00:07:16
    Styled Components: Pseudo Selectors, Nested Rules & Media Queries
  • Урок 107. 00:09:54
    Creating Reusable Components & Component Combinations
  • Урок 108. 00:11:27
    Introducing Tailwind CSS For React App Styling
  • Урок 109. 00:03:40
    Adding & Using Tailwind CSS In A React Project
  • Урок 110. 00:05:23
    Tailwind: Media Queries & Pseudo Selectors
  • Урок 111. 00:05:51
    Dynamic & Conditional Styling with Tailwind
  • Урок 112. 00:04:16
    Migrating The Demo App to Tailwind CSS
  • Урок 113. 00:04:27
    Tailwind CSS: Pros & Cons
  • Урок 114. 00:01:27
    Module Introduction
  • Урок 115. 00:01:17
    The Starting Project
  • Урок 116. 00:08:32
    Understanding React Error Messages
  • Урок 117. 00:07:24
    Using the Browser Debugger & Breakpoints
  • Урок 118. 00:06:20
    Understanding React's "Strict Mode"
  • Урок 119. 00:03:58
    Using the React DevTools (Browser Extension)
  • Урок 120. 00:03:20
    Module Introduction & Starting Project
  • Урок 121. 00:05:18
    Repetition: Managing User Input with State (Two-Way-Binding)
  • Урок 122. 00:06:05
    Introducing Refs: Connecting & Accessing HTML Elements via Refs
  • Урок 123. 00:02:15
    Manipulating the DOM via Refs
  • Урок 124. 00:04:46
    Refs vs State Values
  • Урок 125. 00:04:50
    Adding Challenges to the Demo Project
  • Урок 126. 00:04:57
    Setting Timers & Managing State
  • Урок 127. 00:08:31
    Using Refs for More Than "DOM Element Connections"
  • Урок 128. 00:06:41
    Adding a Modal Component
  • Урок 129. 00:06:08
    Forwarding Refs to Custom Components
  • Урок 130. 00:07:15
    Exposing Component APIs via the useImperativeHandle Hook
  • Урок 131. 00:08:51
    More Examples: When To Use Refs & State
  • Урок 132. 00:04:59
    Sharing State Across Components
  • Урок 133. 00:02:13
    Enhancing the Demo App "Result Modal"
  • Урок 134. 00:06:56
    Introducing & Understanding "Portals"
  • Урок 135. 00:03:12
    Module Introduction & Starting Project
  • Урок 136. 00:02:30
    Adding a "Projects Sidebar" Component
  • Урок 137. 00:05:01
    Styling the Sidebar & Button with Tailwind CSS
  • Урок 138. 00:05:59
    Adding the "New Project" Component & A Reusable "Input" Component
  • Урок 139. 00:07:04
    Styling Buttons & Inputs with Tailwind CSS
  • Урок 140. 00:06:50
    Splitting Components to Split JSX & Tailwind Styles (for Higher Reusability)
  • Урок 141. 00:08:20
    Managing State to Switch Between Components
  • Урок 142. 00:13:23
    Collecting User Input with Refs & Forwarded Refs
  • Урок 143. 00:06:01
    Handling Project Creation & Updating the UI
  • Урок 144. 00:10:56
    Validating User Input & Showing an Error Modal via useImperativeHandle
  • Урок 145. 00:05:47
    Styling the Modal via Tailwind CSS
  • Урок 146. 00:15:23
    Making Projects Selectable & Viewing Project Details
  • Урок 147. 00:04:45
    Handling Project Deletion
  • Урок 148. 00:05:52
    Adding "Project Tasks" & A Tasks Component
  • Урок 149. 00:15:24
    Managing Tasks & Understanding Prop Drilling
  • Урок 150. 00:06:41
    Clearing Tasks & Fixing Minor Bugs
  • Урок 151. 00:01:55
    Module Introduction
  • Урок 152. 00:05:59
    Understanding Prop Drilling & Project Overview
  • Урок 153. 00:05:18
    Prop Drilling: Component Composition as a Solution
  • Урок 154. 00:02:18
    Introducing the Context API
  • Урок 155. 00:07:35
    Creating & Providing The Context
  • Урок 156. 00:05:50
    Consuming the Context
  • Урок 157. 00:07:28
    Linking the Context to State
  • Урок 158. 00:05:02
    A Different Way Of Consuming Context
  • Урок 159. 00:01:26
    What Happens When Context Values Change?
  • Урок 160. 00:06:21
    Migrating the Entire Demo Project to use the Context API
  • Урок 161. 00:06:06
    Outsourcing Context & State Into a Separate Provider Component
  • Урок 162. 00:10:07
    Introducing the useReducer Hook
  • Урок 163. 00:10:15
    Dispatching Actions & Editing State with useReducer
  • Урок 164. 00:03:39
    Module Introduction & Starting Project
  • Урок 165. 00:07:24
    What's a "Side Effect"? A Thorough Example
  • Урок 166. 00:02:49
    A Potential Problem with Side Effects: An Infinite Loop
  • Урок 167. 00:05:32
    Using useEffect for Handling (Some) Side Effects
  • Урок 168. 00:07:59
    Not All Side Effects Need useEffect
  • Урок 169. 00:08:31
    useEffect Not Needed: Another Example
  • Урок 170. 00:04:11
    Preparing Another Use-Case For useEffect
  • Урок 171. 00:04:10
    Using useEffect for Syncing With Browser APIs
  • Урок 172. 00:03:01
    Understanding Effect Dependencies
  • Урок 173. 00:04:55
    Preparing Another Problem That Can Be Fixed with useEffect
  • Урок 174. 00:04:50
    Introducing useEffect's Cleanup Function
  • Урок 175. 00:08:10
    The Problem with Object & Function Dependencies
  • Урок 176. 00:03:49
    The useCallback Hook
  • Урок 177. 00:07:32
    useEffect's Cleanup Function: Another Example
  • Урок 178. 00:03:45
    Optimizing State Updates
  • Урок 179. 00:02:22
    Module Introduction & Starting Project
  • Урок 180. 00:07:04
    A First Component & Some State
  • Урок 181. 00:12:54
    Deriving Values, Outputting Questions & Registering Answers
  • Урок 182. 00:06:58
    Shuffling Answers & Adding Quiz Logic
  • Урок 183. 00:11:41
    Adding Question Timers
  • Урок 184. 00:07:15
    Working with Effect Dependencies & useCallback
  • Урок 185. 00:07:54
    Using Effect Cleanup Functions & Using Keys for Resetting Components
  • Урок 186. 00:11:35
    Highlighting Selected Answers & Managing More State
  • Урок 187. 00:17:44
    Splitting Components Up To Solve Problems
  • Урок 188. 00:12:47
    Moving Logic To Components That Actually Need It ("Moving State Down")
  • Урок 189. 00:08:08
    Setting Different Timers Based On The Selected Answer
  • Урок 190. 00:15:10
    Outputting Quiz Results
  • Урок 191. 00:01:17
    Module Introduction
  • Урок 192. 00:08:42
    React Builds A Component Tree / How React Works Behind The Scenes
  • Урок 193. 00:05:58
    Analyzing Component Function Executions via React's DevTools Profiler
  • Урок 194. 00:08:05
    Avoiding Component Function Executions with memo()
  • Урок 195. 00:06:07
    Avoiding Component Function Executions with Clever Structuring
  • Урок 196. 00:07:06
    Understanding the useCallback() Hook
  • Урок 197. 00:05:59
    Understanding the useMemo() Hook
  • Урок 198. 00:07:16
    React Uses A Virtual DOM - Time To Explore It!
  • Урок 199. 00:11:57
    Why Keys Matter When Managing State!
  • Урок 200. 00:02:55
    More Reasons For Why Keys Matter
  • Урок 201. 00:05:23
    Using Keys For Resetting Components
  • Урок 202. 00:05:50
    State Scheduling & Batching
  • Урок 203. 00:04:46
    Optimizing React with MillionJS
  • Урок 204. 00:02:11
    Module Introduction
  • Урок 205. 00:04:54
    What & Why
  • Урок 206. 00:06:55
    Adding a First Class-based Component
  • Урок 207. 00:11:39
    Working with State & Events
  • Урок 208. 00:05:21
    The Component Lifecycle (Class-based Components Only!)
  • Урок 209. 00:11:47
    Lifecycle Methods In Action
  • Урок 210. 00:04:54
    Class-based Components & Context
  • Урок 211. 00:02:43
    Class-based vs Functional Components: A Summary
  • Урок 212. 00:09:53
    Introducing Error Boundaries
  • Урок 213. 00:02:54
    Module Introduction
  • Урок 214. 00:06:21
    How (Not) To Connect To A Database
  • Урок 215. 00:03:26
    Starting Project & Dummy Backend API
  • Урок 216. 00:05:08
    Preparing the App For Data Fetching
  • Урок 217. 00:06:25
    How NOT To Send HTTP Requests (And Why It's Wrong)
  • Урок 218. 00:04:00
    Sending HTTP Requests (GET Request) via useEffect
  • Урок 219. 00:02:27
    Using async / await
  • Урок 220. 00:05:28
    Handling Loading States
  • Урок 221. 00:09:17
    Handling HTTP Errors
  • Урок 222. 00:05:32
    Transforming Fetched Data
  • Урок 223. 00:02:54
    Extracting Code & Improving Code Structure
  • Урок 224. 00:12:01
    Sending Data with POST Requests
  • Урок 225. 00:07:34
    Using Optimistic Updating
  • Урок 226. 00:03:44
    Deleting Data (via DELETE HTTP Requests)
  • Урок 227. 00:07:14
    Practice: Fetching Data
  • Урок 228. 00:02:08
    Module Introduction & Starting Project
  • Урок 229. 00:06:12
    Revisiting the "Rules of Hooks" & Why To Use Hooks
  • Урок 230. 00:05:33
    Creating a Custom Hook
  • Урок 231. 00:10:52
    Custom Hook: Managing State & Returning State Values
  • Урок 232. 00:06:04
    Exposing Nested Functions From The Custom Hook
  • Урок 233. 00:04:26
    Using A Custom Hook in Multiple Components
  • Урок 234. 00:05:00
    Creating Flexible Custom Hooks
  • Урок 235. 00:02:05
    Module Introduction & Starting Project
  • Урок 236. 00:04:00
    What Are Forms & What's Tricky About Them?
  • Урок 237. 00:10:27
    Handling Form Submission
  • Урок 238. 00:11:13
    Managing & Getting User Input via State & Generic Handlers
  • Урок 239. 00:04:36
    Getting User Input via Refs
  • Урок 240. 00:09:04
    Getting Values via FormData & Native Browser APIs
  • Урок 241. 00:04:39
    Resetting Forms
  • Урок 242. 00:06:59
    Validating Input on Every Keystroke via State
  • Урок 243. 00:07:54
    Validating Input Upon Lost Focus (Blur)
  • Урок 244. 00:07:55
    Validating Input Upon Form Submission
  • Урок 245. 00:05:00
    Validating Input via Built-in Validation Props
  • Урок 246. 00:04:29
    Mixing Custom & Built-in Validation Logic
  • Урок 247. 00:10:06
    Building & Using a Reusable Input Component
  • Урок 248. 00:03:23
    Outsourcing Validation Logic
  • Урок 249. 00:15:12
    Creating a Custom useInput Hook
  • Урок 250. 00:01:32
    Using Third-Party Form Libraries
  • Урок 251. 00:06:48
    What-are-Form-Actions
  • Урок 252. 00:02:49
    Module Introduction
  • Урок 253. 00:07:51
    Adding Validation Checks
  • Урок 254. 00:12:22
    Managing Form-dependent State with useActionState()
  • Урок 255. 00:10:05
    Using User Input
  • Урок 256. 00:02:35
    Moving the Action Function out of the Component
  • Урок 257. 00:03:27
    A Demo App: Introduction
  • Урок 258. 00:09:41
    Handling Form Submission
  • Урок 259. 00:06:24
    Working with Asynchronous Form Actions
  • Урок 260. 00:05:07
    Updating the UI with useFormStatus()
  • Урок 261. 00:04:33
    Registering Multiple Form Actions
  • Урок 262. 00:05:27
    Sending an HTTP Request via a Form Action
  • Урок 263. 00:03:48
    Using the "pending" State from useActionState()
  • Урок 264. 00:09:48
    Adding Optimistic Updating
  • Урок 265. 00:02:58
    Module Summary
  • Урок 266. 00:04:15
    Module Introduction & Starting Project
  • Урок 267. 00:06:41
    Planning the App & Adding a First Component
  • Урок 268. 00:12:01
    Fetching Meals Data (GET HTTP Request)
  • Урок 269. 00:07:40
    Adding a "MealItem" Component
  • Урок 270. 00:02:52
    Formatting & Outputting Numbers as Currency
  • Урок 271. 00:08:03
    Creating a Configurable & Flexible Custom Button Component
  • Урок 272. 00:20:10
    Getting Started with Cart Context & Reducer
  • Урок 273. 00:17:22
    Finishing & Using the Cart Context & Reducer
  • Урок 274. 00:07:27
    Adding a Reusable Modal Component with useEffect
  • Урок 275. 00:19:33
    Opening the Cart in the Modal via a New Context
  • Урок 276. 00:08:02
    Working on the Cart Items
  • Урок 277. 00:19:32
    Adding a Custom Input Component & Managing Modal Visibility
  • Урок 278. 00:06:04
    Handling Form Submission & Validation
  • Урок 279. 00:07:36
    Sending a POST Request with Order Data
  • Урок 280. 00:26:24
    Adding a Custom HTTP Hook & Avoiding Common Errors
  • Урок 281. 00:03:13
    Handling HTTP Loading & Error States
  • Урок 282. 00:14:08
    Finishing Touches
  • Урок 283. 00:03:14
    Migrating To Form Actions
  • Урок 284. 00:05:09
    Managing Form Status with Form Actions
  • Урок 285. 00:01:06
    Module Introduction
  • Урок 286. 00:05:15
    Another Look At State In React Apps
  • Урок 287. 00:06:20
    Redux vs React Context
  • Урок 288. 00:05:49
    How Redux Works
  • Урок 289. 00:15:15
    Exploring The Core Redux Concepts
  • Урок 290. 00:03:05
    More Redux Basics
  • Урок 291. 00:02:00
    Preparing a new Project
  • Урок 292. 00:04:55
    Creating a Redux Store for React
  • Урок 293. 00:03:14
    Providing the Store
  • Урок 294. 00:05:09
    Using Redux Data in React Components
  • Урок 295. 00:03:34
    Dispatching Actions From Inside Components
  • Урок 296. 00:10:21
    Redux with Class-based Components
  • Урок 297. 00:04:16
    Attaching Payloads to Actions
  • Урок 298. 00:06:20
    Working with Multiple State Properties
  • Урок 299. 00:05:08
    How To Work With Redux State Correctly
  • Урок 300. 00:05:28
    Redux Challenges & Introducing Redux Toolkit
  • Урок 301. 00:08:12
    Adding State Slices
  • Урок 302. 00:04:48
    Connecting Redux Toolkit State
  • Урок 303. 00:06:20
    Migrating Everything To Redux Toolkit
  • Урок 304. 00:11:51
    Working with Multiple Slices
  • Урок 305. 00:06:57
    Reading & Dispatching From A New Slice
  • Урок 306. 00:05:04
    Splitting Our Code
  • Урок 307. 00:03:54
    Summary
  • Урок 308. 00:00:40
    Module Introduction
  • Урок 309. 00:03:28
    Redux & Side Effects (and Asynchronous Code)
  • Урок 310. 00:20:13
    Refresher / Practice: Part 1/2
  • Урок 311. 00:18:01
    Refresher / Practice: Part 2/2
  • Урок 312. 00:04:10
    Redux & Async Code
  • Урок 313. 00:05:41
    Frontend Code vs Backend Code
  • Урок 314. 00:09:00
    Where To Put Our Logic
  • Урок 315. 00:06:01
    Using useEffect with Redux
  • Урок 316. 00:12:50
    Handling Http States & Feedback with Redux
  • Урок 317. 00:12:08
    Using an Action Creator Thunk
  • Урок 318. 00:08:40
    Getting Started with Fetching Data
  • Урок 319. 00:05:17
    Finalizing the Fetching Logic
  • Урок 320. 00:05:38
    Exploring the Redux DevTools
  • Урок 321. 00:01:54
    Summary
  • Урок 322. 00:03:22
    Module Introduction
  • Урок 323. 00:03:16
    Routing: Multiple Pages in Single-Page Applications
  • Урок 324. 00:03:07
    Project Setup & Installing React Router
  • Урок 325. 00:07:43
    Defining Routes
  • Урок 326. 00:02:08
    Adding a Second Route
  • Урок 327. 00:03:02
    Exploring an Alternative Way of Defining Routes
  • Урок 328. 00:04:37
    Navigating between Pages with Links
  • Урок 329. 00:08:25
    Layouts & Nested Routes
  • Урок 330. 00:03:59
    Showing Error Pages with errorElement
  • Урок 331. 00:06:38
    Working with Navigation Links (NavLink)
  • Урок 332. 00:02:42
    Navigating Programmatically
  • Урок 333. 00:07:45
    Defining & Using Dynamic Routes
  • Урок 334. 00:03:23
    Adding Links for Dynamic Routes
  • Урок 335. 00:10:39
    Understanding Relative & Absolute Paths
  • Урок 336. 00:01:57
    Working with Index Routes
  • Урок 337. 00:03:17
    Onwards to a new Project Setup
  • Урок 338. 00:01:26
    Time to Practice: Problem
  • Урок 339. 00:23:17
    Time to Practice: Solution
  • Урок 340. 00:07:36
    Data Fetching with a loader()
  • Урок 341. 00:02:52
    Using Data From A Loader In The Route Component
  • Урок 342. 00:03:18
    More loader() Data Usage
  • Урок 343. 00:02:19
    Where Should loader() Code Be Stored?
  • Урок 344. 00:02:49
    When Are loader() Functions Executed?
  • Урок 345. 00:02:54
    Reflecting The Current Navigation State in the UI
  • Урок 346. 00:04:02
    Returning Responses in loader()s
  • Урок 347. 00:01:15
    Which Kind Of Code Goes Into loader()s?
  • Урок 348. 00:04:57
    Error Handling with Custom Errors
  • Урок 349. 00:06:25
    Extracting Error Data & Throwing Responses
  • Урок 350. 00:02:08
    The json() Utility Function
  • Урок 351. 00:07:33
    Dynamic Routes & loader()s
  • Урок 352. 00:07:41
    The useRouteLoaderData() Hook & Accessing Data From Other Routes
  • Урок 353. 00:02:23
    Planning Data Submission
  • Урок 354. 00:09:09
    Working with action() Functions
  • Урок 355. 00:09:07
    Submitting Data Programmatically
  • Урок 356. 00:04:03
    Updating the UI State Based on the Submission Status
  • Урок 357. 00:06:58
    Validating User Input & Outputting Validation Errors
  • Урок 358. 00:07:56
    Reusing Actions via Request Methods
  • Урок 359. 00:09:12
    Behind-the-Scenes Work with useFetcher()
  • Урок 360. 00:09:08
    Deferring Data Fetching with defer()
  • Урок 361. 00:07:23
    Controlling Which Data Should Be Deferred
  • Урок 362. 00:02:58
    Module Summary
  • Урок 363. 00:01:11
    Module Introduction
  • Урок 364. 00:09:09
    How Authentication Works
  • Урок 365. 00:03:47
    Project Setup & Route Setup
  • Урок 366. 00:07:36
    Working with Query Parameters
  • Урок 367. 00:11:41
    Implementing the Auth Action
  • Урок 368. 00:04:19
    Validating User Input & Outputting Validation Errors
  • Урок 369. 00:01:56
    Adding User Login
  • Урок 370. 00:06:33
    Attaching Auth Tokens to Outgoing Requests
  • Урок 371. 00:04:22
    Adding User Logout
  • Урок 372. 00:06:06
    Updating the UI Based on Auth Status
  • Урок 373. 00:02:47
    Adding Route Protection
  • Урок 374. 00:05:11
    Adding Automatic Logout
  • Урок 375. 00:07:29
    Managing the Token Expiratoin
  • Урок 376. 00:01:41
    Module Introduction
  • Урок 377. 00:03:36
    Deployment Steps
  • Урок 378. 00:04:48
    Understanding Lazy Loading
  • Урок 379. 00:09:12
    Adding Lazy Loading
  • Урок 380. 00:02:23
    Building the Code For Production
  • Урок 381. 00:06:45
    Deployment Example
  • Урок 382. 00:04:07
    Server-side Routing & Required Configuration
  • Урок 383. 00:01:47
    Module Introduction
  • Урок 384. 00:04:09
    Project Setup & Overview
  • Урок 385. 00:06:00
    React Query: What & Why?
  • Урок 386. 00:16:33
    Installing & Using Tanstack Query - And Seeing Why It's Great!
  • Урок 387. 00:07:44
    Understanding & Configuring Query Behaviors - Cache & Stale Data
  • Урок 388. 00:13:06
    Dynamic Query Functions & Query Keys
  • Урок 389. 00:05:28
    The Query Configuration Object & Aborting Requests
  • Урок 390. 00:06:56
    Enabled & Disabled Queries
  • Урок 391. 00:11:30
    Changing Data with Mutations
  • Урок 392. 00:06:40
    Fetching More Data & Testing the Mutation
  • Урок 393. 00:08:51
    Acting on Mutation Success & Invalidating Queries
  • Урок 394. 00:02:15
    A Challenge! The Problem
  • Урок 395. 00:16:38
    A Challenge! The Solution
  • Урок 396. 00:02:43
    Disabling Automatic Refetching After Invalidations
  • Урок 397. 00:09:19
    Enhancing the Demo App & Repeating Mutation Concepts
  • Урок 398. 00:08:58
    React Query Advantages In Action
  • Урок 399. 00:04:50
    Updating Data with Mutations
  • Урок 400. 00:13:07
    Optimistic Updating
  • Урок 401. 00:07:48
    Using the Query Key As Query Function Input
  • Урок 402. 00:20:27
    React Query & React Router
  • Урок 403. 00:02:02
    Module Introduction
  • Урок 404. 00:04:18
    Creating a NextJS Project
  • Урок 405. 00:02:46
    Understanding File-based Routing & React Server Components
  • Урок 406. 00:03:07
    Adding Another Route via the Filesystem
  • Урок 407. 00:04:13
    Navigating Between Pages
  • Урок 408. 00:03:23
    Working with Pages & Layouts
  • Урок 409. 00:06:32
    Reserved File Names, Custom Components & How To Organize A NextJS Project
  • Урок 410. 00:06:18
    Configuring Dynamic Routes & Using Route Parameters
  • Урок 411. 00:01:25
    Onwards to the Main Project: The Foodies App
  • Урок 412. 00:02:04
    Exercise: Your Task
  • Урок 413. 00:08:20
    Exercise: Solution
  • Урок 414. 00:03:51
    Revisiting The Concept Of Layouts
  • Урок 415. 00:05:59
    Adding a Custom Component To A Layout
  • Урок 416. 00:06:01
    Styling NextJS Project: Your Options & Using CSS Modules
  • Урок 417. 00:04:58
    Optimizing Images with the NextJS Image Component
  • Урок 418. 00:03:49
    Using More Custom Components
  • Урок 419. 00:04:19
    Populating The Starting Page Content
  • Урок 420. 00:03:26
    Preparing an Image Slideshow
  • Урок 421. 00:08:16
    React Server Components vs Client Components - When To Use What
  • Урок 422. 00:11:08
    Using Client Components Efficiently
  • Урок 423. 00:10:32
    Outputting Meals Data & Images With Unknown Dimensions
  • Урок 424. 00:03:12
    Setting Up A SQLite Database
  • Урок 425. 00:07:18
    Fetching Data By Leveraging NextJS & Fullstack Capabilities
  • Урок 426. 00:04:01
    Adding A Loading Page
  • Урок 427. 00:05:55
    Using Suspense & Streamed Responses For Granular Loading State Management
  • Урок 428. 00:05:23
    Handling Errors
  • Урок 429. 00:01:58
    Handling "Not Found" States
  • Урок 430. 00:11:05
    Loading & Rendering Meal Details via Dynamic Routes & Route Parameters
  • Урок 431. 00:02:04
    Throwing Not Found Errors For Individual Meals
  • Урок 432. 00:01:54
    Getting Started with the "Share Meal" Form
  • Урок 433. 00:08:29
    Getting Started with a Custom Image Picker Input Component
  • Урок 434. 00:06:01
    Adding an Image Preview to the Picker
  • Урок 435. 00:09:03
    Introducing & Using Server Actions for Handling Form Submissions
  • Урок 436. 00:03:46
    Storing Server Actions in Separate Files
  • Урок 437. 00:03:21
    Creating a Slug & Sanitizing User Input for XSS Protection
  • Урок 438. 00:12:57
    Storing Uploaded Images & Storing Data in the Database
  • Урок 439. 00:05:31
    Managing the Form Submission Status with useFormStatus
  • Урок 440. 00:05:55
    Adding Server-Side Input Validation
  • Урок 441. 00:08:06
    Working with Server Action Responses & useFormState
  • Урок 442. 00:06:07
    Building For Production & Understanding NextJS Caching
  • Урок 443. 00:03:58
    Triggering Cache Revalidations
  • Урок 444. 00:02:14
    Don't Store Files Locally On The Filesystem!
  • Урок 445. 00:03:48
    Adding Static Metadata
  • Урок 446. 00:02:21
    Adding Dynamic Metadata
  • Урок 447. 00:04:26
    Module Summary
  • Урок 448. 00:02:56
    About the NextJS Pages Router
  • Урок 449. 00:02:08
    Creating a NextJS Project
  • Урок 450. 00:02:53
    Analyzing the Created Project
  • Урок 451. 00:06:06
    Adding First Pages
  • Урок 452. 00:03:48
    Adding Nested Paths & Pages (Nested Routes)
  • Урок 453. 00:03:37
    Creating Dynamic Pages (with Parameters)
  • Урок 454. 00:04:08
    Extracting Dynamic Parameter Values
  • Урок 455. 00:07:14
    Linking Between Pages
  • Урок 456. 00:03:33
    Onwards to a bigger Project!
  • Урок 457. 00:03:43
    Preparing the Project Pages
  • Урок 458. 00:05:04
    Outputting a List of Meetups
  • Урок 459. 00:03:56
    Adding the New Meetup Form
  • Урок 460. 00:06:18
    The "_app.js" File & Layout Wrapper
  • Урок 461. 00:03:48
    Using Programmatic (Imperative) Navigation
  • Урок 462. 00:10:01
    Adding Custom Components & CSS Modules
  • Урок 463. 00:05:53
    How Pre-rendering Works & Which Problem We Face
  • Урок 464. 00:08:57
    Data Fetching for Static Pages
  • Урок 465. 00:05:45
    More on Static Site Generation (SSG)
  • Урок 466. 00:06:28
    Exploring Server-side Rendering (SSR) with "getServerSideProps"
  • Урок 467. 00:05:15
    Working with Params for SSG Data Fetching
  • Урок 468. 00:07:17
    Preparing Paths with "getStaticPaths" & Working With Fallback Pages
  • Урок 469. 00:06:21
    Introducing API Routes
  • Урок 470. 00:09:33
    Working with MongoDB
  • Урок 471. 00:06:50
    Sending Http Requests To Our API Routes
  • Урок 472. 00:07:11
    Getting Data From The Database
  • Урок 473. 00:09:42
    Getting Meetup Details Data & Preparing Pages
  • Урок 474. 00:09:20
    Adding "head" Metadata
  • Урок 475. 00:12:27
    Deploying Next.js Projects
  • Урок 476. 00:04:14
    Using Fallback Pages & Re-deploying
  • Урок 477. 00:02:16
    Summary
  • Урок 478. 00:01:49
    Module Introduction
  • Урок 479. 00:04:15
    Why We Need A Special Project Setup
  • Урок 480. 00:07:17
    Understanding React Server Components
  • Урок 481. 00:05:47
    Changing Server to Client Components
  • Урок 482. 00:05:53
    Combining Server and Client Components
  • Урок 483. 00:03:40
    Fetching Data with RSCs
  • Урок 484. 00:07:07
    Submitting Data with Server Actions
  • Урок 485. 00:07:20
    Using the use() Hook for Promises & Data Fetching
  • Урок 486. 00:05:32
    The use() Hook In Action
  • Урок 487. 00:03:49
    Handling Errors
  • Урок 488. 00:01:03
    Theory Wrap Up
  • Урок 489. 00:03:06
    Module Introduction
  • Урок 490. 00:01:43
    Project Setup & Overview
  • Урок 491. 00:07:42
    Animating with CSS Transitions
  • Урок 492. 00:05:39
    Animating with CSS Animations
  • Урок 493. 00:03:49
    Introducing Framer Motion
  • Урок 494. 00:08:30
    Framer Motion Basics & Fundamentals
  • Урок 495. 00:04:14
    Animating Between Conditional Values
  • Урок 496. 00:04:29
    Adding Entry Animations
  • Урок 497. 00:03:52
    Animating Element Disappearances / Removal
  • Урок 498. 00:04:14
    Making Elements "Pop" With Hover Animations
  • Урок 499. 00:03:29
    Reusing Animation States
  • Урок 500. 00:07:47
    Nested Animations & Variants
  • Урок 501. 00:04:30
    Animating Staggered Lists
  • Урок 502. 00:04:05
    Animating Colors & Working with Keyframes
  • Урок 503. 00:07:29
    Imperative Animations
  • Урок 504. 00:03:35
    Animating Layout Changes
  • Урок 505. 00:10:06
    Orchestrating Multi-Element Animations
  • Урок 506. 00:03:56
    Combining Animations With Layout Animations
  • Урок 507. 00:04:16
    Animating Shared Elements
  • Урок 508. 00:04:53
    Re-triggering Animations via Keys
  • Урок 509. 00:15:45
    Scroll-based Animations
  • Урок 510. 00:00:56
    Module Introduction
  • Урок 511. 00:00:51
    Project Overview
  • Урок 512. 00:11:05
    Introducing Compound Components
  • Урок 513. 00:10:58
    Managing Multi-Component State with the Context API
  • Урок 514. 00:06:30
    Grouping Compound Components (
  • Урок 515. 00:08:37
    Adding Extra Components For Reusability & Configurability
  • Урок 516. 00:06:07
    Sharing Cross-Component State When Working With Compound Components
  • Урок 517. 00:06:15
    Introducing & Using Render Props
  • Урок 518. 00:04:19
    Adding Search To A React App
  • Урок 519. 00:04:19
    Implementing a Search Functionality With Help Of Render Props
  • Урок 520. 00:02:43
    Handling Keys Dynamically
  • Урок 521. 00:07:11
    Working with Debouncing
  • Урок 522. 00:01:24
    Module Introduction
  • Урок 523. 00:03:24
    What & Why?
  • Урок 524. 00:04:05
    Understanding Different Kinds Of Tests
  • Урок 525. 00:01:30
    What To Test & How To Test
  • Урок 526. 00:02:40
    Understanding the Technical Setup & Involved Tools
  • Урок 527. 00:07:17
    Running a First Test
  • Урок 528. 00:10:15
    Writing Our First Test
  • Урок 529. 00:02:15
    Grouping Tests Together With Test Suites
  • Урок 530. 00:14:01
    Testing User Interaction & State
  • Урок 531. 00:03:20
    Testing Connected Components
  • Урок 532. 00:09:12
    Testing Asynchronous Code
  • Урок 533. 00:08:31
    Working With Mocks
  • Урок 534. 00:03:48
    Summary & Further Resources
  • Урок 535. 00:01:27
    Module Introduction
  • Урок 536. 00:06:35
    What & Why?
  • Урок 537. 00:06:39
    Installing & Using TypeScript
  • Урок 538. 00:03:56
    Exploring the Base Types
  • Урок 539. 00:05:34
    Working with Array & Object Types
  • Урок 540. 00:02:48
    Understanding Type Inference
  • Урок 541. 00:02:49
    Using Union Types
  • Урок 542. 00:02:43
    Understanding Type Aliases
  • Урок 543. 00:05:20
    Functions & Function Types
  • Урок 544. 00:08:02
    Diving Into Generics
  • Урок 545. 00:08:35
    Creating a React + TypeScript Project
  • Урок 546. 00:05:42
    Working with Components & TypeScript
  • Урок 547. 00:14:21
    Working with Props & TypeScript
  • Урок 548. 00:09:10
    Adding a Data Model
  • Урок 549. 00:07:03
    Time to Practice: Exercise Time!
  • Урок 550. 00:05:22
    Form Submissions In TypeScript Projects
  • Урок 551. 00:10:57
    Working with refs & useRef
  • Урок 552. 00:07:27
    Working with "Function Props"
  • Урок 553. 00:05:14
    Managing State & TypeScript
  • Урок 554. 00:02:20
    Adding Styling
  • Урок 555. 00:09:28
    Time to Practice: Removing a Todo
  • Урок 556. 00:13:56
    The Context API & TypeScript
  • Урок 557. 00:02:19
    Summary
  • Урок 558. 00:05:47
    Bonus: Exploring tsconfig.json
  • Урок 559. 00:02:11
    Module Introduction
  • Урок 560. 00:04:57
    What Are React Hooks?
  • Урок 561. 00:04:52
    The Starting Project
  • Урок 562. 00:09:21
    Getting Started with useState()
  • Урок 563. 00:11:55
    More on useState() & State Updating
  • Урок 564. 00:02:35
    Array Destructuring
  • Урок 565. 00:03:48
    Multiple States
  • Урок 566. 00:02:22
    Rules of Hooks
  • Урок 567. 00:07:57
    Passing State Data Across Components
  • Урок 568. 00:01:04
    Time to Practice: Hooks Basics - Problem
  • Урок 569. 00:02:56
    Time to Practice: Hooks Basics - Solution
  • Урок 570. 00:07:17
    Sending Http Requests
  • Урок 571. 00:08:07
    useEffect() & Loading Data
  • Урок 572. 00:02:22
    Understanding useEffect() Dependencies
  • Урок 573. 00:09:38
    More on useEffect()
  • Урок 574. 00:05:29
    What's useCallback()?
  • Урок 575. 00:05:22
    Working with Refs & useRef()
  • Урок 576. 00:03:22
    Cleaning Up with useEffect()
  • Урок 577. 00:02:30
    Deleting Ingredients
  • Урок 578. 00:08:49
    Loading Errors & State Batching
  • Урок 579. 00:09:44
    Understanding useReducer()
  • Урок 580. 00:10:41
    Using useReducer() for the Http State
  • Урок 581. 00:08:28
    Working with useContext()
  • Урок 582. 00:10:31
    Performance Optimizations with useMemo()
  • Урок 583. 00:13:46
    Getting Started with Custom Hooks
  • Урок 584. 00:14:59
    Sharing Data Between Custom Hooks & Components
  • Урок 585. 00:08:12
    Using the Custom Hook
  • Урок 586. 00:03:06
    Wrap Up
  • Урок 587. 00:01:09
    Module Introduction
  • Урок 588. 00:05:38
    What Is React & Why Would You Use It?
  • Урок 589. 00:02:10
    React Projects - Requirements
  • Урок 590. 00:03:28
    Creating React Projects
  • Урок 591. 00:03:29
    Our Starting Project
  • Урок 592. 00:07:47
    Understanding How React Works
  • Урок 593. 00:11:16
    Building A First Custom Component
  • Урок 594. 00:05:04
    Outputting Dynamic Values
  • Урок 595. 00:06:01
    Reusing Components
  • Урок 596. 00:06:16
    Passing Data to Components with Props
  • Урок 597. 00:10:08
    CSS Styling & CSS Modules
  • Урок 598. 00:06:32
    Exercise & Another Component
  • Урок 599. 00:03:47
    Preparing the App For State Management
  • Урок 600. 00:07:53
    Adding Event Listeners
  • Урок 601. 00:10:01
    Working with State
  • Урок 602. 00:09:09
    Lifting State Up
  • Урок 603. 00:07:22
    The Special "children" Prop
  • Урок 604. 00:09:00
    State & Conditional Content
  • Урок 605. 00:07:52
    Adding a Shared Header & More State Management
  • Урок 606. 00:03:35
    Adding Form Buttons
  • Урок 607. 00:06:19
    Handling Form Submission
  • Урок 608. 00:05:31
    Updating State Based On Previous State
  • Урок 609. 00:06:40
    Outputting List Data
  • Урок 610. 00:06:11
    Adding a Backend to the React SPA
  • Урок 611. 00:04:13
    Sending a POST HTTP Request
  • Урок 612. 00:09:07
    Handling Side Effects with useEffect()
  • Урок 613. 00:04:24
    Handle Loading State
  • Урок 614. 00:03:56
    Understanding & Adding Routing
  • Урок 615. 00:05:37
    Adding Routes
  • Урок 616. 00:04:09
    Working with Layout Routes
  • Урок 617. 00:05:36
    Refactoring Route Components & More Nesting
  • Урок 618. 00:08:10
    Linking & Navigating
  • Урок 619. 00:09:08
    Data Fetching via loader()s
  • Урок 620. 00:11:09
    Submitting Data with action()s
  • Урок 621. 00:08:42
    Dynamic Routes
  • Урок 622. 00:01:26
    Module Summary
  • Урок 623. 00:01:11
    Roundup