4.50
(4 Ratings)
React – Beginner to Advanced (+ Redux & Ecommerce App)
Categories: React, Web Development
About Course
Learn React from the beginning. Build interesting projects. Gain confidence to start applying for jobs…
Learn React From Absolute Scratch
This course would teach you the fundamentals and advanced React concepts via project-based learning.
What you’ll learn
This course is for anyone that wants to learn React and also for React developers looking to build some projects and sharpen their skills.
Requirements:
— A good knowledge of JavaScript is required before you take this course.
Here are some of the things you would learn:
— React fundamentals including components, props, hooks, state, etc
— React hooks such as useState, useEffect, useContext, useReducer, useRef, etc
— Custom hooks
— Learn how to use context and reducers to manage global state
— Build powerful, fast, user-friendly and reactive web apps
— Learn Redux and Redux Toolkit
— Build more than 10 projects
— Build a fullStack eCommerce website with React and Firebase
— Deploy React apps to Netlify and Heroku
— Much more…
Here are some reasons why you should learn React right now
1. React is declarative
It’s a simpler way of developing apps, and you can learn why here.
2. React Native makes app development easier
When you learn React, you can transfer your skill to mobile development using React Native.
You may have heard of the phrase “Write once, run anywhere” before. React Native brings that kind of philosophy to React with “Learn once, write anywhere”.
3. The React community is amazing
React has a massive community of dedicated developers. The community helps to maintain and grow the open-source library, with everyone able to contribute their own components to the library.
4. React is used by huge organisations
What Will You Learn?
- Fundamentals of ReactJS
- React hooks and practical applications
- Build cool projects using ReactJS
- Learn the Latest Version of React Router V6
- Learn the latest version of Firebase V9
- Build a Fullstack Ecommerce App
Course Content
Section 1: Introduction
-
1. Introduction
02:58 -
2. What is React?
04:12 -
3. Companies that use React
00:39 -
— RESOURCES —
00:00
Section 2: Environment Setup
-
4. Environment Setup
01:41 -
5. Vscode setup
01:19
Section 3: JavaScript Refresher
-
6. JavaScript Refersher – Introduction
02:58 -
7. Variables – var, let and const
10:14 -
8. Arrow functions
09:08 -
9. Ternary operator
06:58 -
10. Map and Filter
05:51 -
11. Spread and Rest operator
08:09 -
12. Destructuring
06:26 -
13. ES6 Classes – Part 1
01:06 -
14. ES6 Classes – Part 2
06:39 -
15. Modules – Import and Exports
16:28 -
16. Modules – Default Exports
03:59
Section 4: React Basics
-
17. Create a React app
04:53 -
18. Files and Folder Overview
06:51 -
19.Hello World App
07:24 -
20. Files Clean Up
03:11 -
21. Components
05:08 -
22. Shortcut For Creating a Component
02:47 -
23. Creating a Custom Component
03:18 -
24. Create a Custom Component – 2
02:45 -
25. JSX
10:09 -
26. Outputting Dynamic Values
05:47
Section 5: Styling
-
27. Styling in React
09:36 -
28. Scoping CSS Files
10:27 -
29. Styling Summary
04:44
Section 6: React Basics – Part 2
-
30. Props
07:58 -
31. Setting Default Props
03:27 -
32. Props Destructuring
01:56 -
33. Children Props
08:23 -
34. Rendering a List
14:53 -
35. Handling Events
10:51
Section 7: Project – Profile App (Challenge)
-
36. Profile App – Intro
02:48 -
37. Instructions
06:21 -
38. Profile App 1 – Create React App
02:21 -
39. Profile App 2 – Create Files And Folder
10:56 -
40. Profile App 3 – Installing React Icons
06:28 -
41. Profile App 4 – Global Styles
01:18 -
42. Profile App 5 – Profile List Jsx And Css
07:19 -
43. Profile App 6 – Profile JSX
08:57 -
44. Profile App 6 – Profile Css
12:02 -
45. Profile App 7 – Add React Icon Contex
03:57 -
46. Profile App 8 – Card Component
04:16 -
47. Profile App 9 – Create Pofiles Props
07:07 -
48. Profile App 10 – Mapping Through Profiles
09:59
Section 8: React Basics Part 3
-
49. What Are Hooks
01:31 -
50. What Is State?
05:51 -
51. Hooks Folder Setup
04:29 -
52. Css Utility Classes Overview
05:30 -
53. Usestate – Comparative Programming 1
07:08 -
54. Usestate – Comparative Programming 2
13:49 -
55. Virtual Dom Vs Real Dom
07:33 -
56. Counter App JS – Comparative Programming 1
09:16 -
57. 54 Counter App Usestate – Comparative Programming 2
09:05 -
58. Counter App – State Updater Function
07:50 -
59. Counter App Usestate – When Not To Use Usestate
05:50 -
60. Usestate In Array 1
15:52 -
61. Usestate In Array 2
05:29 -
62. Usestate In Object
09:43
Section 9: Conditionals
-
63. Conditionals Intro
01:54 -
64. Conditionals – If Else Statement
05:50 -
65. Conditionals – Logical And Operator
04:39 -
66. Conditionals – Ternary Operator
03:45 -
67. Conditionals – Adding Css Classes Conditionally
09:08 -
68. Conditionals – Conditionals With Props
10:17
Section 10: General React Project Setup
-
69. General project setup
06:57
Section 11:Project – User Profile App
-
70. User Profile App – Demo
01:19 -
71. User Profile App – JSX
10:02 -
72. User Profile App – CSS
05:20 -
73. User Profile App – Logic 1
08:36 -
74. User Profile App – Logic 2
06:38
Section 12:Project – Animated Login App
-
75. Animated Login Form – Demo
01:19 -
76. Animated Login Form – JSX
12:04 -
77. Animated Login Form – CSS
10:14 -
78. Animated Login Form – Register Component
05:28 -
79. Animated Login Form – Reset Component
12:38 -
80. Animated Login Form – Logic
16:27 -
81. Animated Login Form – Refactoring Logic
05:46
Section 13: useEffect Hook
-
82. UseEffect Hook – Intro
01:44 -
83. UseEffect Hook – Basics
11:48 -
84. UseEffect Hook – Cleanup
12:12
Section 14: useEffect Project – Jokes Generator
-
85. Jokes Generator – Demo
01:18 -
86. Jokes Generator – JSX
04:31 -
87. Jokes Generator – Logic
13:34 -
88. Jokes Generator – Fetch Joke On Button Click
05:08
Section 15: UseEffect Project – Github User List
-
89. Github User List – Demo
00:31 -
90. Github User List – JSX
05:41 -
91. Github User List – Fetch Users
09:49 -
92. Github User List – Loading State
05:44 -
93. Github User List – Handling Errors
08:45
Section 16: Forms
-
94. Forms – Intro
01:22 -
95. Forms – JSX
06:28 -
96. Forms – Controlled Inputs
10:47 -
97. Forms – Multiple Controlled Inputs
16:38 -
98. Forms – Uncontrolled Inputs
12:36
Section 17: Project – Password Visibility Toggle & Strength Indicator
-
99. Password Visibility Toggle & Strength Indicator Demo
04:46 -
100. Password Visibility Toggle – JSX
05:52 -
101. Password Visibility Toggle – Logic
05:53 -
102. Password Strength Indicator – JSX
07:23 -
103. Password Strength Indicator – CSS
03:27 -
104. Password Strength Indicator – Logic – Show/Hide Indicator
05:52 -
105. Password Strength Indicator – Logic – Get Password Input
03:43 -
106. Password Strength Indicator – Logic – Set Letter Criterion
11:37 -
107. Password Strength Indicator – Logic – Set Number Character And Length Criteria
09:56 -
108. Password Strength Indicator – Logic – Disable Enable Button
16:00 -
109.Password Strength Indicator – Logic – Lifting The State Up
14:45
Section 18:Project – Product Filter
-
110. Product Filter – Demo
01:47 -
111. Product Filter – Product List Component JSX
09:11 -
112. Product Filter – Product List Component CSS
08:09 -
113. Product Filter – Search Component JSX
01:26 -
114. Product Filter – Categories Component JSX & CSS
02:09 -
115. Product Filter – Product Component JSX
08:06 -
116. Product Filter – Product Component CSS
05:34 -
117. Product Filter – Logic – Display Products
09:56 -
118. Product Filter – Logic – Add Search Filter
10:46 -
119. Product Filter – Logic – No Product Found
03:19 -
120. Product Filter – Logic – Add Category Filter
23:33
Section 19: Project – Dark Mode Toggle
-
121. Dark Mode Toggle – Demo
01:17 -
122. Dark Mode Toggle – Set Color Scheme
07:31 -
123. Dark Mode Toggle – Header Component JSX
11:21 -
124. Dark Mode Toggle – Header Component CSS
10:56 -
125. Dark Mode Toggle – Hero Component JSX
03:53 -
126. Dark Mode Toggle – Hero Component CSS
07:26 -
127. Dark Mode Toggle – Footer Component JSX & CSS
02:38 -
128. Dark Mode Toggle – Logic – useLocalStorage Setup
12:10 -
129. Dark Mode Toggle – Logic – Set Dark Mode On all Components
02:49 -
130. Dark Mode Toggle – Logic – Handle switch button
11:06
Section 20: Project – Pricing Section
-
131. Pricing Section – Demo
02:26 -
132. Pricing Section – SubList Component JSX
06:58 -
133. Pricing Section – SubList Component CSS
07:53 -
134. Pricing Section – Sub Component JSX
04:09 -
135. Pricing Section – Sub Component CSS
09:36 -
136. Pricing Section – Logic – Set Plan and Theme Prop
05:39 -
137. Pricing Section – Logic – Set Price and Features Prop
10:13 -
138. Pricing Section – Logic – Create Yearly Prop
08:08 -
139. Pricing Section – Logic – Animate Toggle Button
03:57 -
140. Pricing Section – Logic – Calculate Yearly Price with discount
11:02 -
141. Pricing Section – Logic – Add buy prop
03:21
Section 21: useReducer
-
142. useReducer – Setup
05:13 -
143. useReducer – Intro
13:08 -
144. useReducer – Add Functionality
11:53 -
145. useReducer – Seperate reducer function into a file
02:45
Section 22: Project – Task Manager (with useState)
-
146. Task Manager – Demo
04:58 -
147. Task Manager – Form JSX
10:08 -
148. Task Manager – Single Task JSX
07:37 -
149. Task Manager – Linking state to form input
04:54 -
150. Task Manager – Add Auto-focus on the name input field
02:43 -
151. Task Manager – Handle Submit
15:22 -
152. Task Manager – Edit Task 1
18:11 -
153. Task Manager – Edit Task 2
01:34 -
154. Task Manager – Delete Task
06:04 -
155. Task Manager – Complete Task
05:39 -
156. Task Manager – Save Tasks to Local Storage
06:10
Section 23: Project – Task Manager (with useReducer)
-
157. Task Manager Reducer – Demo
01:15 -
158. Task Manager Reducer – Project Setup
04:14 -
159. Task Manager Reducer – Alert JSX
07:00 -
160. Task Manager Reducer – Confirm JSX
07:05 -
161. Task Manager Reducer – useReducer setup
11:46 -
162. Task Manager Reducer – Making the Alert dynamic
06:28 -
163. Task Manager Reducer – Submit with empty fields
05:55 -
164. Task Manager Reducer – Close Alert
06:24 -
165. Task Manager Reducer – Add New Task
13:56 -
166. Task Manager Reducer – Make Modal Dynamic
12:11 -
167. Task Manager Reducer – Open Edit Modal
08:51 -
168. Task Manager Reducer – Edit Task
09:55 -
169. Task Manager Reducer – Close Edit Modal
03:28 -
170. Task Manager Reducer – Update Task
21:52 -
171. Task Manager Reducer – Open Delete Modal
13:30 -
172. Task Manager Reducer – Delete Task
11:41 -
173. Task Manager Reducer – Complete Task
17:41 -
174. Task Manager Reducer – Export Reducer Function
04:57
Section 24: Props Drilling and Context API
-
175. Props Drilling
09:02 -
176. Replace Props Drilling With Context API
15:13 -
177. Use Cases For Context API
02:34
Section 25: Project – Dark/Light Mode Toggle (With Context API)
-
178. Dark Mode Toggle – Project Review
03:03 -
179. Dark Mode Toggle – Context API 1
05:12 -
180. Dark Mode Toggle – Context API 2
09:11 -
181. Create a custom Theme Context Provider
10:08
Section 26: Custom Hooks
-
182. Custom Hook – Intro
01:08 -
183. Custom Hook – useFetch Hook
10:17
Sectioin 27: Routing in React
-
184. React Router – Demo
01:48 -
185. React Router – Installation
04:32 -
186. React Router – Setting Up Routes
06:40 -
187. React Router – Linking our Routes
04:15 -
188. React Router – 404 NotFound page
03:29 -
189. React Router – Active Menu Class with NavLink
06:32 -
190. React Router – Page Redirect
05:48 -
191. React Router – Nested Routes
05:25 -
192. React Router – useParams 1
10:24 -
193. React Router – useParams 2
08:02
Section 28: Redux
-
194. Intro To Redux
06:37 -
195. How Redux Works
05:12 -
196. Install Redux, Create Store and Reducer
10:22 -
197. Setup Redux Devtools
02:13 -
198. Provide the store to your App component
02:45 -
199. Select/access data from the store
03:57 -
200. Dispatch Actions from the component
06:52 -
201. Pass data to the Reducer via payload
05:13 -
202. Create authReducer
14:13 -
203. Conditionally display the counter
04:48 -
204. Extract the Reducers into seperate files
03:33 -
205. Extract the Actions into seperate files
11:12 -
206.Defining Action Types
07:22
Section 29: Redux Toolkit
-
207. Redux Toolkit Intro
04:39 -
208. create counterSlice
12:56 -
209. create authSlice
03:34 -
210. Replace CreateStore With configureStore
04:55 -
211. Update useSelector and dispatch
07:21
Section 30: Project – Fullstack Ecommerce App
-
212. 1. React Ecommerce App – Demo
12:02 -
213. 2. Ecommerce App – Project Structure
02:25 -
214. 3. Eshop App – Project Setup
04:57 -
215.4. Eshop App – Creating Folder
04:36 -
216. 5. Eshop App – Warning VS Error
07:23 -
217. 6. Eshop App – Creating main pages and components
09:43 -
218. 7. Eshop App – Routing setup
09:41 -
219. 8. Eshop App – Grouping our imports in a single file
05:58 -
220. 9. Eshop App – Header Component – logo
09:39 -
221. 10. Eshop App – Header Component – Nav
12:03 -
222. 11. Eshop App – Header Component – Responsive menu
22:48 -
223. 12. Eshop App – Header Component – Set Active Menu Link
08:52 -
224. 13. Eshop App – Footer Component
03:25 -
225. 14. Eshop App – Auth components and Routes
07:04 -
226. 15. Eshop App – Login Page JSX
16:07 -
227. 16. Eshop App – Card Component
05:34 -
228. 17. Eshop App – Register Page JSX
06:53 -
229. 18. Eshop App – Reset Page JSX
06:12 -
230. 19. Eshop App – Firebase Setup
08:34 -
231. 20. Eshop App – Loader Component
08:55 -
232. 21. Eshop App – Regiser User – part 1
11:01 -
233. 22. Eshop App – Regiser User – part 2
18:51 -
234. 23. Eshop App – Sign in with Email and Password
11:57 -
235. 24. Eshop App – Logout
08:45 -
236. 25. Eshop App – Sign in with Google
08:47 -
237. 26. Eshop App – Reset Password Logic
09:28 -
238. 27. Eshop App – Monitor Authentication State
09:50 -
239. 28. Eshop App – Redux Store setup
05:39 -
240. 29. Eshop App – Set Active User in Redux – Part 1
25:08 -
241. 30. Eshop App – Set Active User in Redux – Part 2
09:52 -
242. 30b. Eshop App – Update on username
05:16 -
243. 31. Eshop App – Remove Active User in Redux
09:49 -
244. 32. Eshop App – Show or Hide Links based on auth state
14:31 -
245. 33. Eshop App – Image Slider JSX
17:56 -
246. 34. Eshop App – Image Slider Logic
10:15 -
247. 35. Eshop App – Image Slider Logic – Autoslide effect
07:15 -
248. 36. Eshop App – Image Slider – Webpack warning
05:19 -
249. 37. Eshop App – Admin Only Route
13:06 -
250. 38. Eshop App – Create Admin Section Components
06:17 -
251. 39. Eshop App – Create Admin Nested Routes
16:33 -
252. 40. Eshop App – Create Fallback content for Non-Admin
08:01 -
253. 41. Eshop App – Create Admin Navbar
12:01 -
254. 42. Eshop App – Add Product component JSX
23:51 -
255. 43. Eshop App – Handle form input
05:50 -
256. 44. Eshop App – Upload Image to Firebase Storage
16:48 -
257. 44.B Update firebase rules
02:38 -
258. 45. Eshop App – Display upload progress and get image url
15:06 -
259. 45.B – Eshop App – Upload Product to Firebase
22:15 -
260. 46. Eshop App – Upload your products
02:44 -
261. 47. Eshop App – Get products from firestore
16:01 -
262. 48. Eshop App – Display products on the page
15:55 -
263. 49. Eshop App – Delete Product
13:12 -
264. 50. Eshop App – Confirm Dialog Box before Delete Product
10:23 -
265. 51. Eshop App – Save Products to Redux Store
12:32 -
266. 52. Eshop App – useParams to add and Edit Product
08:04 -
267. 53. Eshop App – detectForm based on params
23:06 -
268. 54. Eshop App – Edit Product
15:53 -
269. 55. Back to the Home Page
01:54 -
270. 56. Eshop App – Create Product Component and Sub-components
07:01 -
271. 57. Eshop App – Product Component Layout
07:14 -
272. 58. Eshop App – useFetchCollection hook
13:08 -
273. 59. Eshop App – Testing useFetchCollection hook on Admin page
11:49 -
274. 60. Eshop App – Fetch products in products Component
03:32 -
275.61. Eshop App – ProductList Component – Part 1
14:29 -
276.62. Eshop App – getDefault Middleware issues
03:54 -
277. 63. Eshop App – Search Component
07:11 -
278. 64. Eshop App – ProductList Component – Part 2
09:26 -
279. 65. Eshop App – Product Item Component
08:20 -
280. 66. Eshop App – Show Loading spinner when fetching products
18:20 -
281. 67. Eshop App – Fetch Single Product
13:41 -
282. 68. Eshop App – Display Product on Product Details Page
15:03 -
283. 69. Eshop App – Back To Product Button
08:41 -
284. 70. Eshop App – Product Filter JSX
06:49 -
285. 71. Eshop App – Filter Products by Search
22:49 -
286. 72. Eshop App – Sort Products
16:00 -
287. 73. Eshop App – Filter Products by Category
21:34 -
288. 74. Eshop App – Filter Products by Brand
09:18 -
289.75. Eshop App – Filter Products by Price
20:21 -
290. 76. Eshop App – Clear all filter
02:27 -
291. 77. Eshop App – Make the Product Filter Responsive
08:02 -
292. 78. Eshop App – Pagination Component – Part 1
10:52 -
293. 79. Eshop App – Pagination Component – Part 2
31:08 -
294. 80. Eshop App – Redux cartSlice setup
09:21 -
295. 81. Eshop App – Add Product To Cart
19:24 -
296. 82. Eshop App – Cart Component JSX
30:29 -
297. 83. Eshop App – Decrease product in the cart
16:34 -
298. 84. Eshop App – Remove product from the cart
06:39 -
299. 85. Eshop App – Clear Cart
04:46 -
300. 86. Eshop App – Calculate Subtotal
12:18 -
87. Eshop App – Calculate Cart Total Quantity
05:19 -
88. Eshop App – Update Cart in Product Details Page
16:37 -
89. Eshop App – Make the header sticky and Update Cart in the Header
13:06 -
90. Eshop App – Redirect User on Checkout
21:58 -
91. Eshop App – Create the Checkout Components
05:44 -
92. Eshop App – Create the Checkout Details Page – Part 1
21:20 -
93 .Eshop App – Create the Checkout Details Page – Part 2
09:06 -
94.. Eshop App – Setup Checkout Slice in redux
11:38 -
95. Eshop App – Create Checkout Summary
19:26 -
96. Eshop App Create Stripe Test Account
03:30 -
97. Eshop App – Install Packages For Payment
05:08 -
98. Eshop App – Create Checkoutform Serverjs And Env File
09:27 -
99. Eshop App – Setting Up Serverjs
13:08 -
100. Eshop App – Checkout From The Frontend
30:49 -
101. Eshop App – Checkout from the backend
12:45 -
102. Eshop App – Checkout Form Component
14:43 -
103. Eshop App – Handle Submit on Checkout Form
24:09 -
104. Eshop App – Checkout Success Page
02:52 -
105. Eshop App – Save Order to Firebase
22:48 -
106. Eshop App – OrderHistory Component – Get Orders from Firebase
13:46 -
107. Eshop App – OrderHistory Component – Display orders on the page
24:52 -
108. Eshop App – OrderHistory Component – Filter orders by userID
05:21 -
109. Eshop App useFetchDocument Custom Hook
13:22 -
110. Eshop App get Order Details
20:11 -
111. Eshop App Review Product Component
17:13 -
112. Eshop App – Save review to firebase
15:40 -
113. Eshop App – Display reviews under product
16:29 -
114. Eshop App – Back to Admin section – Home Component
07:07 -
115. Eshop App – InfoBox Component
11:52 -
116. Eshop App – InfoBox Component Logic
21:18 -
117. Eshop App – View all orders on Admin dashboard
19:33 -
118. Eshop App – View order details on Admin dashboard
12:04 -
119. Eshop App – ChangeOrderStatus Component JSX
11:04 -
120. Eshop App – ChangeOrderStatus Component Logic
15:53 -
121. Eshop App – Order status chart – Part 1
15:47 -
122. Eshop App – Order status chart – Part 2
11:05 -
123. Eshop App – Add search Filter to admin
09:10 -
124. Eshop App – Add Pagination to admin
04:21 -
125. Eshop App – Contact us JSX
12:39 -
126. Eshop App – Contact us Logic
14:38 -
127. Eshop App – 404 Not Found page
06:15 -
128. Eshop App – Testing the App
09:48 -
129. Eshop App – Cleaning our code with the help of ESLINT
06:40 -
130. Eshop App – Hide Api keys in .env file
04:20 -
131. Eshop App – Firebase security rules for production
08:58 -
132. Eshop App – Push project to Github
06:01 -
HEROKU CANCELED THEIR FREE TIER
00:00 -
133. Eshop App Setup Heroku
08:25 -
134. Eshop App – Preparing project for deployment
08:57 -
135. Eshop App – Deploy app to Heroku
15:36 -
136. Eshop App – Testing the App
03:12
Student Ratings & Reviews
No Review Yet