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