React JS Masterclass: Zero To Job Ready With 10 Projects

Lesson 1, Step 1: Course Introduction

Courses Outline

Lesson 1: Introduction & Resources
Free
Course Introduction
5:00
Resources
10:33
Lesson 2: React Basics & Setup
React Introduction
13:02
Environment Setup
7:02
Create React App
12:09
React Behind The Scene
11:12
React Boilerplate / 005
15:56
Components: Class & Function Based / 006
10:02
JSX: In-depth Introduction / 007
12:11
Practice: Basic Template Structure / 008
15:41
Lesson 3: States and useState
Why We Need States? / 009
10:02
State Introduction: useState / 010
12:00
useState: Multiple Updates / 011
4:23
useState: Array State Value / 012
11:58
useState: Array setState Value / 013
6:30
Conditional Templates / 014
7:21
Quick Hook Advice / 015
1:25
Lesson 4: Components & Props
Multiple Components & Fragments / 016
9:24
Props: In-depth Introduction / 017
6:41
Props: Children / 018
11:09
Prop Drilling / 019
4:03
Lesson 5: Styling React Application
Global Level Styling / 020
12:47
Component Level Styling / 021
17:04
Inline Level Styling / 022
4:42
Dynamic Level Styling / 023
4:33
Module Level Styling / 024
7:38
Lesson 6: User Input, Events & useRef
Forms & Input / 025
11:10
onChange Event / 026
5:24
Controlled Inputs / 027
3:43
onSubmit Event / 028
13:41
Add New Task / 029
11:01
useRef Hook / 030
6:39
Lesson 7: useEffects, useCallback and Custom Hooks
JSON Server / 031
16:36
useEffect Hook / 032
12:51
React StrictMode
5:12
List Output / 035
6:00
onClick Event / 036
7:13
useCallback Hook / 037
11:14
Custom Hook (useFetch) / 038
10:44
Loading State / 039
6:33
Handling Errors (try/catch) / 040
10:01
Aborting Fetch Request / 041
4:48
Infinite Loops / 042
3:59
Lesson 8: Project: TaskMate
Project Source Code - Github
TaskMate Demo
5:49
Project Structure
4:04
Components / 045
14:48
State: tasklist & setTasklist / 046
11:26
Function: Edit & Delete / 047
20:19
Warning: Undefined Value / 048
10:19
Update Button / 049
1:07
Local Storage: Store All Tasks / 050
7:04
Theme: Change Background / 051
10:49
Project Deployment
5:55
Lesson 9: React Router
React Router Introduction / 053
8:57
React Router Setup / 054
9:42
Project Structure / 055
15:21
Navigation / 056
11:26
Route Parameters / 057
12:47
No Route Found / 058
5:06
Nested Routes / 059
8:39
Project Restructuring / 060
14:46
Lesson 10: Tailwind CSS Crash Course
Introduction & Demo
9:48
Common Properties
14:34
Hover, Focus, and Other States
5:11
Responsive Design
11:32
Dark Mode
7:06
Custom Configuration / 206
8:11
Project Demo / 207
12:41
Header & Hero Section/ 208
12:56
Footer / 209
2:46
Responsive Screen & Component Tools / 210
11:42
Lesson 11: Movie API Project: Cinemate
Project Source Code - Github
Cinemate Demo
4:36
Project Setup
17:43
Tailwind Introduction / 063
20:15
TMDB API: Documentation / 064
10:34
UI Design (Tailwind & Flowbite) / 065
14:20
Navigation Structure
10:19
Dark Mode Integration / 067
14:36
Movie List Structure / 068
10:36
API Fetch: Movie List / 069
14:43
Custom Hook: useFetch / 070
11:52
API Fetch: Movie Search / 071
15:18
Tailwind CSS Customization / 072
16:18
Page Not Found / 073
15:05
Individual Movie Information / 074
28:28
Scroll Restoration: Scroll To Top / 075
4:50
Dynamic Page Title / 076
13:29
Style Update / 077
2:40
Project Deployment / 078
22:25
Development Branch On Git & Github
10:05
Solved: Netlify Error / 079
7:16
Lesson 12: Assignment: Shopping Cart
Assignment Statement & Demo / 080
2:41
Solution: Project Setup
6:20
Solution: Components / 082
16:31
Solution: Pages / 083
9:42
Assignment Deployment
4:04
Lesson 13: Context & Reducers Project: Shopping Cart
Global State Management
6:50
Project Structure / 086
6:10
Context / 087
16:27
Reducer / 088
25:43
Methods / 089
18:45
Project Deployment / 090
12:18
Lesson 14: Redux Project: Shopping Cart
Redux Introduction
15:10
Project Structure / 091
9:42
Slice & Action / 092
16:52
Reducers: Add & Remove / 093
15:45
Redux Store State / 094
11:23
Project Deployment / 095
9:34
Lesson 15: E-commerce Project: Codebook
Project Source Code - Github
Codebook Demo / 097
10:46
Installations / 098
6:54
Project Structure / 099
19:45
Header Component - I / 100
16:48
Header Component - II / 101
10:16
Home Page / 102
22:25
Products Page / 103
8:21
API: Product List / 104
19:11
Rating Component / 105
9:26
Individual Product Component / 106
16:24
Dark Mode / 107
10:10
ScrollToTop Component / 108
3:47
Product Search / 109
17:21
Dynamic Title / 110
7:22
Filter: Context & Reducers / 111
19:25
Filter: Initial Product List / 112
11:41
Filter: Properties / 113
38:40
Clear Filter / 114
5:46
Dropdown Option / 115
7:44
User Account & Cart
13:36
Login & Registration Page / 118
14:10
React-Toastify / 119
9:38
API: Login/Register End Point / 120
10:42
Session Storage / 121
10:22
Toggle Dropdown (Hide) / 122
3:45
Cart Interface / 123
13:59
Cart: Context & Reducers / 124
9:48
Cart: Provider / 125
13:24
Add To Cart / 126
12:08
Condition Check: Already In Cart / 127
15:13
Out Of Stock Products / 128
6:45
Protected Routes / 129
7:34
Checkout Modal / 130
15:31
Undefined Value Warning / 131
2:28
Order Submit Function / 132
16:52
Order Page / 133
14:03
Dashboard: Condition 1 / 134
9:44
Dashboard: Condition 2 / 135
11:54
Auth Service: API End Points / 136
10:31
Data Service: API End Points / 137
15:35
Product Service: API End Points / 138
9:50
Page Not Found / 139
2:24
Dynamic Page Title / 140
6:37
Error Handling / 141
25:44
ENV / 142
8:00
Frontend Deployment / 143
19:23
Backend Deployment / 144
14:55
Update Environment Variables / 145
5:25
Login As Guest
15:24
Solved: Netlify Errors / 147
3:16
Lesson 16: Assignment: Word Counter
Statement & Demo / 157
4:34
Solution: WordCount / 158
4:59
Lesson 17: React Testing Library & Jest
Testing Introduction / 148
6:12
React Testing Library & Jest / 149
6:55
Project Setup
7:52
Testing Structure / 151
14:20
Test: Component Rendering / 152
11:07
Test: Fire Events & User Events / 153
10:22
Queries, Type, Expect & More / 154
9:15
Test: API Async Loading / 155
6:38
Test: Page Component Wrapper / 156
9:44
Lesson 18: Firebase Crach Course
Firebase Introduction
6:59
Webpack Setup / 252
13:08
Firebase Setup / 253
8:31
Firebase Connection / 254
4:58
Fetching Documents - I / 255
9:52
Fetching Documents- II / 256
4:26
Adding & Deleting Documents / 257
14:09
Snapshots / 258
6:02
Firestore Queries / 259
6:24
Ordering Data / 260
10:37
Updating Documents / 261
7:24
Fetching Individual Document / 262
3:50
Authentication - I / 263
5:27
Authentication - II / 264
22:10
Lesson 19: Blog Project: WriteNode
Project Source Code - Github
WriteNode Demo / 159
3:05
Project Structure / 160
11:50
Project Styling / 161
8:34
Homepage / 162
11:07
Firebase Setup / 163
9:18
Firebase Configuration / 164
13:40
Conditional Auth Header / 165
8:06
Create Blog Post / 167
16:05
Error: Object Fetch / 168
10:06
Toggle Update / 169
5:41
Dynamic Page Title
8:35
React Loading Skeleton
12:21
Project Deployment / 172
6:52
Lesson 20: Bonus
Bonus
2:13