Урок 1.
00:02:59
Introduction
Урок 2.
00:04:13
What is React?
Урок 3.
00:00:40
Companies that use React
Урок 4.
00:01:42
Environmeny Setup
Урок 5.
00:01:20
Vscode setup
Урок 6.
00:02:59
JavaScript Refersher - Introduction
Урок 7.
00:10:15
Variables - var, let and const
Урок 8.
00:09:09
Arrow functions
Урок 9.
00:06:57
Ternary operator
Урок 10.
00:05:52
Map and Filter
Урок 11.
00:08:10
Spread and Rest operator
Урок 12.
00:06:27
Destructuring
Урок 13.
00:01:07
ES6 Classes - Part 1
Урок 14.
00:06:40
ES6 Classes - Part 2
Урок 15.
00:16:29
Modules - Import and Exports
Урок 16.
00:04:00
Modules - Default Exports
Урок 17.
00:04:54
Create a React app
Урок 18.
00:06:55
Files and Folder Overview
Урок 19.
00:07:25
Hello World App
Урок 20.
00:03:12
Files Clean Up
Урок 21.
00:05:09
Components
Урок 22.
00:02:48
Shortcut For Creating a Component
Урок 23.
00:03:19
Creating a Custom Component
Урок 24.
00:02:46
Create a Custom Component - 2
Урок 25.
00:10:10
JSX
Урок 26.
00:05:48
Outputting Dynamic Values
Урок 27.
00:09:37
Styling in React
Урок 28.
00:10:28
Scoping CSS Files
Урок 29.
00:04:45
Styling Summary
Урок 30.
00:07:59
Props
Урок 31.
00:03:28
Setting Default Props
Урок 32.
00:01:57
Props Destructuring
Урок 33.
00:08:24
Children Props
Урок 34.
00:14:55
Rendering a List
Урок 35.
00:10:52
Handling Events
Урок 36.
00:02:49
Profile App - Intro
Урок 37.
00:06:22
Instructions
Урок 38.
00:02:27
Profile App 1 - Create React App
Урок 39.
00:10:57
Profile App 2 - Create Files And Folder
Урок 40.
00:06:29
Profile App 3 - Installing React Icons
Урок 41.
00:01:19
Profile App 4 - Global Styles
Урок 42.
00:07:20
Profile App 5 - Profile List Jsx And Css
Урок 43.
00:08:58
Profile App 6 - Profile JSX
Урок 44.
00:12:03
Profile App 6 - Profile Css
Урок 45.
00:03:58
Profile App 7 - Add React Icon Context
Урок 46.
00:04:17
Profile App 8 - Card Component
Урок 47.
00:07:08
Profile App 9 - Create Pofiles Props
Урок 48.
00:10:00
Profile App 10 - Mapping Through Profiles
Урок 49.
00:01:32
What Are Hooks
Урок 50.
00:05:52
What Is State
Урок 51.
00:04:30
Hooks Folder Setup
Урок 52.
00:05:31
Css Utility Classes Overview
Урок 53.
00:07:09
Usestate - Comparative Programming 1
Урок 54.
00:13:50
Usestate - Comparative Programming 2
Урок 55.
00:07:34
Virtual Dom Vs Real Dom
Урок 56.
00:09:17
Counter App JS - Comparative Programming 1
Урок 57.
00:09:06
54 Counter App Usestate - Comparative Programming 2
Урок 58.
00:07:51
Counter App - State Updater Function
Урок 59.
00:05:51
Counter App Usestate - When Not To Use Usestate
Урок 60.
00:15:53
Usestate In Array 1
Урок 61.
00:05:30
Usestate In Array 2
Урок 62.
00:09:44
Usestate In Object
Урок 63.
00:01:55
Conditionals Intro
Урок 64.
00:05:51
Conditionals - If Else Statement
Урок 65.
00:04:40
Conditionals - Logical And Operator
Урок 66.
00:03:46
Conditionals - Ternary Operator
Урок 67.
00:09:09
Conditionals - Adding Css Classes Conditionally
Урок 68.
00:10:18
Conditionals - Conditionals With Props
Урок 69.
00:06:58
General project setup
Урок 70.
00:01:20
User Profile App - Demo
Урок 71.
00:10:03
User Profile App - JSX
Урок 72.
00:05:21
User Profile App - CSS
Урок 73.
00:08:37
User Profile App - Logic 1
Урок 74.
00:06:39
User Profile App - Logic 2
Урок 75.
00:01:20
Animated Login Form - Demo
Урок 76.
00:12:05
Animated Login Form - JSX
Урок 77.
00:10:15
Animated Login Form - CSS
Урок 78.
00:05:29
Animated Login Form - Register Component
Урок 79.
00:12:39
Animated Login Form - Reset Component
Урок 80.
00:16:28
Animated Login Form - Logic
Урок 81.
00:05:47
Animated Login Form - Refactoring Logic
Урок 82.
00:01:45
UseEffect Hook - Intro
Урок 83.
00:11:49
UseEffect Hook - Basics
Урок 84.
00:12:13
UseEffect Hook - Cleanup
Урок 85.
00:01:19
Jokes Generator - Demo
Урок 86.
00:04:32
Jokes Generator - JSX
Урок 87.
00:13:35
Jokes Generator - Logic
Урок 88.
00:05:09
Jokes Generator - Fetch Joke On Button Click
Урок 89.
00:00:32
Github User List - Demo
Урок 90.
00:05:42
Github User List - JSX
Урок 91.
00:09:50
Github User List - Fetch Users
Урок 92.
00:05:45
Github User List - Loading State
Урок 93.
00:08:46
Github User List - Handling Errors
Урок 94.
00:01:23
Forms - Intro
Урок 95.
00:06:29
Forms - JSX
Урок 96.
00:10:48
Forms - Controlled Inputs
Урок 97.
00:16:39
Forms - Multiple Controlled Inputs
Урок 98.
00:12:37
Forms - Uncontrolled Inputs
Урок 99.
00:04:47
Password Visibility Toggle & Strength Indicator Demo
Урок 100.
00:05:53
Password Visibility Toggle - JSX
Урок 101.
00:05:53
Password Visibility Toggle - Logic
Урок 102.
00:07:24
Password Strength Indicator - JSX
Урок 103.
00:03:28
Password Strength Indicator - CSS
Урок 104.
00:05:53
Password Strength Indicator - Logic - Show/Hide Indicator
Урок 105.
00:03:44
Password Strength Indicator - Logic - Get Password Input
Урок 106.
00:11:38
Password Strength Indicator - Logic - Set Letter Criterion
Урок 107.
00:09:57
Password Strength Indicator - Logic - Set Number Character And Length Criteria
Урок 108.
00:16:01
Password Strength Indicator - Logic - Disable Enable Button
Урок 109.
00:14:46
Password Strength Indicator - Logic - Lifting The State Up
Урок 110.
00:01:48
Product Filter - Demo
Урок 111.
00:09:12
Product Filter - Product List Component JSX
Урок 112.
00:08:10
Product Filter - Product List Component CSS
Урок 113.
00:01:29
Product Filter - Search Component JSX
Урок 114.
00:02:10
Product Filter - Categories Component JSX & CSS
Урок 115.
00:08:06
Product Filter - Product Component JSX
Урок 116.
00:05:35
Product Filter - Product Component CSS
Урок 117.
00:09:57
Product Filter - Logic - Display Products
Урок 118.
00:10:47
Product Filter - Logic - Add Search Filter
Урок 119.
00:03:20
Product Filter - Logic - No Product Found
Урок 120.
00:23:34
Product Filter - Logic - Add Category Filter
Урок 121.
00:01:18
Dark Mode Toggle - Demo
Урок 122.
00:07:32
Dark Mode Toggle - Set Color Scheme
Урок 123.
00:07:22
Dark Mode Toggle - Header Component JSX
Урок 124.
00:10:57
Dark Mode Toggle - Header Component CSS
Урок 125.
00:03:54
Dark Mode Toggle - Hero Component JSX
Урок 126.
00:07:27
Dark Mode Toggle - Hero Component CSS
Урок 127.
00:02:39
Dark Mode Toggle - Footer Component JSX & CSS
Урок 128.
00:12:11
Dark Mode Toggle - Logic - useLocalStorage Setup
Урок 129.
00:02:43
Dark Mode Toggle - Logic - Set Dark Mode On all Components
Урок 130.
00:11:07
Dark Mode Toggle - Logic - Handle switch button
Урок 131.
00:02:27
Pricing Section - Demo
Урок 132.
00:06:59
Pricing Section - SubList Component JSX
Урок 133.
00:07:54
Pricing Section - SubList Component CSS
Урок 134.
00:04:10
Pricing Section - Sub Component JSX
Урок 135.
00:09:37
Pricing Section - Sub Component CSS
Урок 136.
00:06:00
Pricing Section - Logic - Set Plan and Theme Prop
Урок 137.
00:10:14
Pricing Section - Logic - Set Price and Features Prop
Урок 138.
00:08:09
Pricing Section - Logic - Create Yearly Prop
Урок 139.
00:03:58
Pricing Section - Logic - Animate Toggle Button
Урок 140.
00:11:03
Pricing Section - Logic - Calculate Yearly Price with discount
Урок 141.
00:03:22
Pricing Section - Logic - Add buy prop
Урок 142.
00:05:14
useReducer - Setup
Урок 143.
00:13:09
useReducer - Intro
Урок 144.
00:11:54
useReducer - Add Functionality
Урок 145.
00:02:46
useReducer - Seperate reducer function into a file
Урок 146.
00:04:59
Task Manager - Demo
Урок 147.
00:10:09
Task Manager - Form JSX
Урок 148.
00:07:38
Task Manager - Single Task JSX
Урок 149.
00:04:55
Task Manager - Linking state to form input
Урок 150.
00:02:44
Task Manager - Add Auto-focus on the name input field
Урок 151.
00:15:23
Task Manager - Handle Submit
Урок 152.
00:18:12
Task Manager - Edit Task 1
Урок 153.
00:01:35
Task Manager - Edit Task 2
Урок 154.
00:06:05
Task Manager - Delete Task
Урок 155.
00:05:40
Task Manager - Complete Task
Урок 156.
00:06:11
Task Manager - Save Tasks to Local Storage
Урок 157.
00:01:16
Task Manager Reducer - Demo
Урок 158.
00:04:15
Task Manager Reducer - Project Setup
Урок 159.
00:07:01
Task Manager Reducer - Alert JSX
Урок 160.
00:07:06
Task Manager Reducer - Confirm JSX
Урок 161.
00:11:47
Task Manager Reducer - useReducer setup
Урок 162.
00:06:29
Task Manager Reducer - Making the Alert dynamic
Урок 163.
00:05:56
Task Manager Reducer - Submit with empty fields
Урок 164.
00:06:25
Task Manager Reducer - Close Alert
Урок 165.
00:13:57
Task Manager Reducer - Add New Task
Урок 166.
00:12:12
Task Manager Reducer - Make Modal Dynamic
Урок 167.
00:08:52
Task Manager Reducer - Open Edit Modal
Урок 168.
00:09:56
Task Manager Reducer - Edit Task
Урок 169.
00:03:29
Task Manager Reducer - Close Edit Modal
Урок 170.
00:21:53
Task Manager Reducer - Update Task
Урок 171.
00:13:31
Task Manager Reducer - Open Delete Modal
Урок 172.
00:11:45
Task Manager Reducer - Delete Task
Урок 173.
00:17:42
Task Manager Reducer - Complete Task
Урок 174.
00:04:58
Task Manager Reducer - Export Reducer Function
Урок 175.
00:09:03
Props Drilling
Урок 176.
00:15:14
Replace Props Drilling With Context API
Урок 177.
00:02:35
Use Cases For Context API
Урок 178.
00:03:04
Dark Mode Toggle - Project Review
Урок 179.
00:05:13
Dark Mode Toggle - Context API 1
Урок 180.
00:09:12
Dark Mode Toggle - Context API 2
Урок 181.
00:10:09
Create a custom Theme Context Provider
Урок 182.
00:01:31
Custom Hook - Intro
Урок 183.
00:10:18
Custom Hook - useFetch Hook
Урок 184.
00:01:49
React Router - Demo
Урок 185.
00:04:33
React Router - Installation
Урок 186.
00:06:41
React Router - Setting Up Routes
Урок 187.
00:04:16
React Router - Linking our Routes
Урок 188.
00:03:30
React Router - 404 NotFound page
Урок 189.
00:06:33
React Router - Active Menu Class with NavLink
Урок 190.
00:05:49
React Router - Page Redirect
Урок 191.
00:05:26
React Router - Nested Routes
Урок 192.
00:10:24
React Router - useParams 1
Урок 193.
00:08:03
React Router - useParams 2
Урок 194.
00:06:38
Intro To Redux
Урок 195.
00:05:13
How Redux Works
Урок 196.
00:10:23
Install Redux, Create Store and Reducer
Урок 197.
00:02:14
Setup Redux Devtools
Урок 198.
00:02:46
Provide the store to your App component
Урок 199.
00:03:58
Select/access data from the store
Урок 200.
00:06:53
Dispatch Actions from the component
Урок 201.
00:05:14
Pass data to the Reducer via payload
Урок 202.
00:14:19
Create authReducer
Урок 203.
00:04:29
Conditionally display the counter
Урок 204.
00:03:34
Extract the Reducers into seperate files
Урок 205.
00:11:13
Extract the Actions into seperate files
Урок 206.
00:07:23
Defining Action Types
Урок 207.
00:04:40
Redux Toolkit Intro
Урок 208.
00:12:57
create counterSlice
Урок 209.
00:03:35
create authSlice
Урок 210.
00:04:56
Replace CreateStore With configureStore
Урок 211.
00:07:22
Update useSelector and dispatch
Урок 212.
00:12:03
1. React Ecommerce App - Demo
Урок 213.
00:02:26
2. Ecommerce App - Project Structure
Урок 214.
00:04:58
3. Eshop App - Project Setup
Урок 215.
00:04:37
4. Eshop App - Creating Folder
Урок 216.
00:07:24
5. Eshop App - Warning VS Error
Урок 217.
00:09:44
6. Eshop App - Creating main pages and components
Урок 218.
00:09:42
7. Eshop App - Routing setup
Урок 219.
00:05:59
8. Eshop App - Grouping our imports in a single file
Урок 220.
00:09:40
9. Eshop App - Header Component - logo
Урок 221.
00:12:04
10. Eshop App - Header Component - Nav
Урок 222.
00:22:49
11. Eshop App - Header Component - Responsive menu
Урок 223.
00:08:53
12. Eshop App - Header Component - Set Active Menu Link
Урок 224.
00:03:26
13. Eshop App - Footer Component
Урок 225.
00:07:05
14. Eshop App - Auth components and Routes
Урок 226.
00:16:08
15. Eshop App - Login Page JSX
Урок 227.
00:05:35
16. Eshop App - Card Component
Урок 228.
00:06:54
17. Eshop App - Register Page JSX
Урок 229.
00:06:13
18. Eshop App - Reset Page JSX
Урок 230.
00:08:35
19. Eshop App - Firebase Setup
Урок 231.
00:08:56
20. Eshop App - Loader Component
Урок 232.
00:11:04
21. Eshop App - Regiser User - part 1
Урок 233.
00:18:52
22. Eshop App - Regiser User - part 2
Урок 234.
00:11:58
23. Eshop App - Sign in with Email and Password
Урок 235.
00:08:46
24. Eshop App - Logout
Урок 236.
00:08:48
25. Eshop App - Sign in with Google
Урок 237.
00:09:29
26. Eshop App - Reset Password Logic
Урок 238.
00:09:51
27. Eshop App - Monitor Authentication State
Урок 239.
00:05:40
28. Eshop App - Redux Store setup
Урок 240.
00:25:09
29. Eshop App - Set Active User in Redux - Part 1
Урок 241.
00:09:53
30. Eshop App - Set Active User in Redux - Part 2
Урок 242.
00:05:17
30b. Eshop App - Update on username
Урок 243.
00:09:50
31. Eshop App - Remove Active User in Redux
Урок 244.
00:14:32
32. Eshop App - Show or Hide Links based on auth state
Урок 245.
00:17:57
33. Eshop App - Image Slider JSX
Урок 246.
00:10:16
34. Eshop App - Image Slider Logic
Урок 247.
00:07:16
35. Eshop App - Image Slider Logic - Autoslide effect
Урок 248.
00:05:20
36. Eshop App - Image Slider - Webpack warning
Урок 249.
00:13:07
37. Eshop App - Admin Only Route
Урок 250.
00:06:18
38. Eshop App - Create Admin Section Components
Урок 251.
00:16:34
39. Eshop App - Create Admin Nested Routes
Урок 252.
00:08:02
40. Eshop App - Create Fallback content for Non-Admin
Урок 253.
00:12:10
41. Eshop App - Create Admin Navbar
Урок 254.
00:23:52
42. Eshop App - Add Product component JSX
Урок 255.
00:05:51
43. Eshop App - Handle form input
Урок 256.
00:16:49
44. Eshop App - Upload Image to Firebase Storage
Урок 257.
00:02:39
44.B Update firebase rules
Урок 258.
00:15:07
45. Eshop App - Display upload progress and get image url
Урок 259.
00:22:16
45.B - Eshop App - Upload Product to Firebase
Урок 260.
00:02:45
46. Eshop App - Upload your products
Урок 261.
00:16:02
47. Eshop App - Get products from firestore
Урок 262.
00:15:56
48. Eshop App - Display products on the page
Урок 263.
00:13:13
49. Eshop App - Delete Product
Урок 264.
00:10:24
50. Eshop App - Confirm Dialog Box before Delete Product
Урок 265.
00:12:33
51. Eshop App - Save Products to Redux Store
Урок 266.
00:08:05
52. Eshop App - useParams to add and Edit Product
Урок 267.
00:23:07
53. Eshop App - detectForm based on params
Урок 268.
00:15:54
54. Eshop App - Edit Product
Урок 269.
00:01:55
55. Back to the Home Page
Урок 270.
00:07:02
56. Eshop App - Create Product Component and Sub-components
Урок 271.
00:07:15
57. Eshop App - Product Component Layout
Урок 272.
00:13:09
58. Eshop App - useFetchCollection hook
Урок 273.
00:11:50
59. Eshop App - Testing useFetchCollection hook on Admin page
Урок 274.
00:03:33
60. Eshop App - Fetch products in products Component
Урок 275.
00:14:30
61. Eshop App - ProductList Component - Part 1
Урок 276.
00:03:55
62. Eshop App - getDefault Middleware issues
Урок 277.
00:07:12
63. Eshop App - Search Component
Урок 278.
00:09:27
64. Eshop App - ProductList Component - Part 2
Урок 279.
00:18:21
65. Eshop App - Product Item Component
Урок 280.
00:05:10
66. Eshop App - Show Loading spinner when fetching products
Урок 281.
00:13:42
67. Eshop App - Fetch Single Product
Урок 282.
00:15:04
68. Eshop App - Display Product on Product Details Page
Урок 283.
00:08:42
69. Eshop App - Back To Product Button
Урок 284.
00:06:50
70. Eshop App - Product Filter JSX
Урок 285.
00:22:50
71. Eshop App - Filter Products by Search
Урок 286.
00:16:01
72. Eshop App - Sort Products
Урок 287.
00:21:35
73. Eshop App - Filter Products by Category
Урок 288.
00:09:19
74. Eshop App - Filter Products by Brand
Урок 289.
00:20:22
75. Eshop App - Filter Products by Price
Урок 290.
00:02:28
76. Eshop App - Clear all filter
Урок 291.
00:08:03
77. Eshop App - Make the Product Filter Responsive
Урок 292.
00:10:53
78. Eshop App - Pagination Component - Part 1
Урок 293.
00:31:09
79. Eshop App - Pagination Component - Part 2
Урок 294.
00:09:22
80. Eshop App - Redux cartSlice setup
Урок 295.
00:19:25
81. Eshop App - Add Product To Cart
Урок 296.
00:30:30
82. Eshop App - Cart Component JSX
Урок 297.
00:16:35
83. Eshop App - Decrease product in the cart
Урок 298.
00:06:40
84. Eshop App - Remove product from the cart
Урок 299.
00:04:47
85. Eshop App - Clear Cart
Урок 300.
00:12:19
86. Eshop App - Calculate Subtotal
Урок 301.
00:05:20
87. Eshop App - Calculate Cart Total Quantity
Урок 302.
00:16:38
88. Eshop App - Update Cart in Product Details Page
Урок 303.
00:13:07
89. Eshop App - Make the header sticky and Update Cart in the Header
Урок 304.
00:21:59
90. Eshop App - Redirect User on Checkout
Урок 305.
00:05:45
91. Eshop App - Create the Checkout Components
Урок 306.
00:21:21
92. Eshop App - Create the Checkout Details Page - Part 1
Урок 307.
00:09:07
93. Eshop App - Create the Checkout Details Page - Part 2
Урок 308.
00:11:39
94. Eshop App - Setup Checkout Slice in redux
Урок 309.
00:19:27
95. Eshop App - Create Checkout Summary
Урок 310.
00:03:31
96 Eshop App Create Stripe Test Account
Урок 311.
00:05:08
97. Eshop App - Install Packages For Payment
Урок 312.
00:09:28
98. Eshop App - Create Checkoutform Serverjs And Env File
Урок 313.
00:13:09
99. Eshop App - Setting Up Serverjs
Урок 314.
00:30:50
100. Eshop App - Checkout From The Frontend
Урок 315.
00:12:45
101. Eshop App - Checkout from the backend
Урок 316.
00:14:44
102. Eshop App - Checkout Form Component
Урок 317.
00:24:10
103. Eshop App - Handle Submit on Checkout Form
Урок 318.
00:02:52
104. Eshop App - Checkout Success Page
Урок 319.
00:22:49
105. Eshop App - Save Order to Firebase
Урок 320.
00:13:47
106. Eshop App - OrderHistory Component - Get Orders from Firebase
Урок 321.
00:24:53
107. Eshop App - OrderHistory Component - Display orders on the page
Урок 322.
00:05:22
108. Eshop App - OrderHistory Component - Filter orders by userID
Урок 323.
00:13:23
109. Eshop App useFetchDocument Custom Hook
Урок 324.
00:20:12
110. Eshop App get Order Details
Урок 325.
00:17:14
111. Eshop App Review Product Component
Урок 326.
00:15:41
112. Eshop App - Save review to firebase
Урок 327.
00:16:30
113. Eshop App - Display reviews under product
Урок 328.
00:07:08
114. Eshop App - Back to Admin section - Home Component
Урок 329.
00:11:53
115. Eshop App - InfoBox Component
Урок 330.
00:21:19
116. Eshop App - InfoBox Component Logic
Урок 331.
00:19:34
117. Eshop App - View all orders on Admin dashboard
Урок 332.
00:12:05
118. Eshop App - View order details on Admin dashboard
Урок 333.
00:11:05
119. Eshop App - ChangeOrderStatus Component JSX
Урок 334.
00:15:54
120. Eshop App - ChangeOrderStatus Component Logic
Урок 335.
00:15:48
121. Eshop App - Order status chart - Part 1
Урок 336.
00:11:06
122. Eshop App - Order status chart - Part 2
Урок 337.
00:09:11
123. Eshop App - Add search Filter to admin
Урок 338.
00:04:22
124. Eshop App - Add Pagination to admin
Урок 339.
00:12:40
125. Eshop App - Contact us JSX
Урок 340.
00:14:36
126. Eshop App - Contact us Logic
Урок 341.
00:06:16
127. Eshop App - 404 Not Found page
Урок 342.
00:09:49
128. Eshop App - Testing the App
Урок 343.
00:06:41
129. Eshop App - Cleaning our code with the help of ESLINT
Урок 344.
00:04:21
130. Eshop App - Hide Api keys in .env file
Урок 345.
00:09:00
131. Eshop App - Firebase security rules for production
Урок 346.
00:06:02
132. Eshop App - Push project to Github
Урок 347.
00:08:26
133. Eshop App Setup Heroku
Урок 348.
00:08:58
134. Eshop App - Preparing project for deployment
Урок 349.
00:15:37
135. Eshop App - Deploy app to Heroku
Урок 350.
00:03:13
136. Eshop App - Testing the App