React – Beginner to Advanced (+ Redux & Ecommerce App)

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

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

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

Section 6: React Basics – Part 2

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

Section 10: General React Project Setup

Section 11:Project – User Profile App

Section 12:Project – Animated Login App

Section 13: useEffect Hook

Section 14: useEffect Project – Jokes Generator

Section 15: UseEffect Project – Github User List

Section 16: Forms

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

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

Section 25: Project – Dark/Light Mode Toggle (With Context API)

Section 26: Custom Hooks

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

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

Add this certificate to your resume to demonstrate your skills & increase your chances of getting noticed.

Student Ratings & Reviews

No Review Yet

About Course

What Will You Learn?

Course Content

Section 1: Introduction

1. Introduction

2. What is React?

3. Companies that use React

— RESOURCES —

Section 2: Environment Setup

4. Environment Setup

5. Vscode setup

Section 3: JavaScript Refresher

6. JavaScript Refersher – Introduction

7. Variables – var, let and const

8. Arrow functions

9. Ternary operator

10. Map and Filter

11. Spread and Rest operator

12. Destructuring

13. ES6 Classes – Part 1

14. ES6 Classes – Part 2

15. Modules – Import and Exports

16. Modules – Default Exports

Section 4: React Basics

17. Create a React app

18. Files and Folder Overview

19.Hello World App

20. Files Clean Up

21. Components

22. Shortcut For Creating a Component

23. Creating a Custom Component

24. Create a Custom Component – 2

25. JSX

26. Outputting Dynamic Values

Section 5: Styling

27. Styling in React

28. Scoping CSS Files

29. Styling Summary

Section 6: React Basics – Part 2

30. Props

31. Setting Default Props

32. Props Destructuring

33. Children Props

34. Rendering a List

35. Handling Events

Section 7: Project – Profile App (Challenge)

36. Profile App – Intro

37. Instructions

38. Profile App 1 – Create React App

39. Profile App 2 – Create Files And Folder

40. Profile App 3 – Installing React Icons

41. Profile App 4 – Global Styles

42. Profile App 5 – Profile List Jsx And Css

43. Profile App 6 – Profile JSX

44. Profile App 6 – Profile Css

45. Profile App 7 – Add React Icon Contex

46. Profile App 8 – Card Component

47. Profile App 9 – Create Pofiles Props

48. Profile App 10 – Mapping Through Profiles

Section 8: React Basics Part 3

49. What Are Hooks

50. What Is State?

51. Hooks Folder Setup

52. Css Utility Classes Overview

53. Usestate – Comparative Programming 1

54. Usestate – Comparative Programming 2

55. Virtual Dom Vs Real Dom

56. Counter App JS – Comparative Programming 1

57. 54 Counter App Usestate – Comparative Programming 2

58. Counter App – State Updater Function

59. Counter App Usestate – When Not To Use Usestate

60. Usestate In Array 1

61. Usestate In Array 2

62. Usestate In Object

Section 9: Conditionals

63. Conditionals Intro

64. Conditionals – If Else Statement

65. Conditionals – Logical And Operator

66. Conditionals – Ternary Operator

67. Conditionals – Adding Css Classes Conditionally