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