React - Beginner To Advanced 2022 (+ Redux & Ecommerce App) (updated 9/2022)

Learn React from the beginning. Build interesting projects. Gain confidence to start applying for jobs…

What you'll learn
Fundamentals of ReactJS
React hooks and practical applications
Build cool projects using ReactJS
Learn the fundamentals of Redux and Redux Toolkit
Learn the Latest Version of React Router V6
Learn the latest version of Firebase V9
Build a Fullstack Ecommerce App
Requirements
Students should know the fundamentals of HTML, CSS and JavaScript before taking this course.
Description
Learn React From Absolute ScratchThis course would teach you the fundamentals and advanced React concepts via project-based learning.What you'll learnThis 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 now1. React is declarativeIt’s a simpler way of developing apps, and you can learn why here.2. React Native makes app development easierWhen 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 amazingReact 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

Overview

Section 1: Introduction

Lecture 1 Introduction

Lecture 2 What is React?

Lecture 3 Companies that use React

Section 2: Environment Setup

Lecture 4 Environmeny Setup

Lecture 5 Vscode setup

Section 3: JavaScript Refresher

Lecture 6 JavaScript Refersher - Introduction

Lecture 7 Variables - var, let and const

Lecture 8 Arrow functions

Lecture 9 Ternary operator

Lecture 10 Map and Filter

Lecture 11 Spread and Rest operator

Lecture 12 Destructuring

Lecture 13 ES6 Classes - Part 1

Lecture 14 ES6 Classes - Part 2

Lecture 15 Modules - Import and Exports

Lecture 16 Modules - Default Exports

Section 4: React Basics

Lecture 17 Create a React app

Lecture 18 Files and Folder Overview

Lecture 19 Hello World App

Lecture 20 Files Clean Up

Lecture 21 Components

Lecture 22 Shortcut For Creating a Component

Lecture 23 Creating a Custom Component

Lecture 24 Create a Custom Component - 2

Lecture 25 JSX

Lecture 26 Outputting Dynamic Values

Section 5: Styling

Lecture 27 Styling in React

Lecture 28 Scoping CSS Files

Lecture 29 Styling Summary

Section 6: React Basics - Part 2

Lecture 30 Props

Lecture 31 Setting Default Props

Lecture 32 Props Destructuring

Lecture 33 Children Props

Lecture 34 Rendering a List

Lecture 35 Handling Events

Section 7: Project - Profile App (Challenge)

Lecture 36 Profile App - Intro

Lecture 37 Instructions

Lecture 38 Profile App 1 - Create React App

Lecture 39 Profile App 2 - Create Files And Folder

Lecture 40 Profile App 3 - Installing React Icons

Lecture 41 Profile App 4 - Global Styles

Lecture 42 Profile App 5 - Profile List Jsx And Css

Lecture 43 Profile App 6 - Profile JSX

Lecture 44 Profile App 6 - Profile Css

Lecture 45 Profile App 7 - Add React Icon Context

Lecture 46 Profile App 8 - Card Component

Lecture 47 Profile App 9 - Create Pofiles Props

Lecture 48 Profile App 10 - Mapping Through Profiles

Section 8: React Basics Part 3

Lecture 49 What Are Hooks

Lecture 50 What Is State

Lecture 51 Hooks Folder Setup

Lecture 52 Css Utility Classes Overview

Lecture 53 Usestate - Comparative Programming 1

Lecture 54 Usestate - Comparative Programming 2

Lecture 55 Virtual Dom Vs Real Dom

Lecture 56 Counter App JS - Comparative Programming 1

Lecture 57 54 Counter App Usestate - Comparative Programming 2

Lecture 58 Counter App - State Updater Function

Lecture 59 Counter App Usestate - When Not To Use Usestate

Lecture 60 Usestate In Array 1

Lecture 61 Usestate In Array 2

Lecture 62 Usestate In Object

Section 9: Conditionals

Lecture 63 Conditionals Intro

Lecture 64 Conditionals - If Else Statement

Lecture 65 Conditionals - Logical And Operator

Lecture 66 Conditionals - Ternary Operator

Lecture 67 Conditionals - Adding Css Classes Conditionally

Lecture 68 Conditionals - Conditionals With Props

Section 10: General React Project Setup

Lecture 69 General project setup

Section 11: Project - User Profile App

Lecture 70 User Profile App - Demo

Lecture 71 User Profile App - JSX

Lecture 72 User Profile App - CSS

Lecture 73 User Profile App - Logic 1

Lecture 74 User Profile App - Logic 2

Section 12: Project - Animated Login App

Lecture 75 Animated Login Form - Demo

Lecture 76 Animated Login Form - JSX

Lecture 77 Animated Login Form - CSS

Lecture 78 Animated Login Form - Register Component

Lecture 79 Animated Login Form - Reset Component

Lecture 80 Animated Login Form - Logic

Lecture 81 Animated Login Form - Refactoring Logic

Section 13: useEffect Hook

Lecture 82 UseEffect Hook - Intro

Lecture 83 UseEffect Hook - Basics

Lecture 84 UseEffect Hook - Cleanup

Section 14: useEffect Project - Jokes Generator

Lecture 85 Jokes Generator - Demo

Lecture 86 Jokes Generator - JSX

Lecture 87 Jokes Generator - Logic

Lecture 88 Jokes Generator - Fetch Joke On Button Click

Section 15: UseEffect Project - Github User List

Lecture 89 Github User List - Demo

Lecture 90 Github User List - JSX

Lecture 91 Github User List - Fetch Users

Lecture 92 Github User List - Loading State

Lecture 93 Github User List - Handling Errors

Section 16: Forms

Lecture 94 Forms - Intro

Lecture 95 Forms - JSX

Lecture 96 Forms - Controlled Inputs

Lecture 97 Forms - Multiple Controlled Inputs

Lecture 98 Forms - Uncontrolled Inputs

Section 17: Project - Password Visibility Toggle & Strength Indicator

Lecture 99 Password Visibility Toggle & Strength Indicator Demo

Lecture 100 Password Visibility Toggle - JSX

Lecture 101 Password Visibility Toggle - Logic

Lecture 102 Password Strength Indicator - JSX

Lecture 103 Password Strength Indicator - CSS

Lecture 104 Password Strength Indicator - Logic - Show/Hide Indicator

Lecture 105 Password Strength Indicator - Logic - Get Password Input

Lecture 106 Password Strength Indicator - Logic - Set Letter Criterion

Lecture 107 Password Strength Indicator - Logic - Set Number Character And Length Criteria

Lecture 108 Password Strength Indicator - Logic - Disable Enable Button

Lecture 109 Password Strength Indicator - Logic - Lifting The State Up

Section 18: Project - Product Filter

Lecture 110 Product Filter - Demo

Lecture 111 Product Filter - Product List Component JSX

Lecture 112 Product Filter - Product List Component CSS

Lecture 113 Product Filter - Search Component JSX

Lecture 114 Product Filter - Categories Component JSX & CSS

Lecture 115 Product Filter - Product Component JSX

Lecture 116 Product Filter - Product Component CSS

Lecture 117 Product Filter - Logic - Display Products

Lecture 118 Product Filter - Logic - Add Search Filter

Lecture 119 Product Filter - Logic - No Product Found

Lecture 120 Product Filter - Logic - Add Category Filter

Section 19: Project - Dark Mode Toggle

Lecture 121 Dark Mode Toggle - Demo

Lecture 122 Dark Mode Toggle - Set Color Scheme

Lecture 123 Dark Mode Toggle - Header Component JSX

Lecture 124 Dark Mode Toggle - Header Component CSS

Lecture 125 Dark Mode Toggle - Hero Component JSX

Lecture 126 Dark Mode Toggle - Hero Component CSS

Lecture 127 Dark Mode Toggle - Footer Component JSX & CSS

Lecture 128 Dark Mode Toggle - Logic - useLocalStorage Setup

Lecture 129 Dark Mode Toggle - Logic - Set Dark Mode On all Components

Lecture 130 Dark Mode Toggle - Logic - Handle switch button

Section 20: Project - Pricing Section

Lecture 131 Pricing Section - Demo

Lecture 132 Pricing Section - SubList Component JSX

Lecture 133 Pricing Section - SubList Component CSS

Lecture 134 Pricing Section - Sub Component JSX

Lecture 135 Pricing Section - Sub Component CSS

Lecture 136 Pricing Section - Logic - Set Plan and Theme Prop

Lecture 137 Pricing Section - Logic - Set Price and Features Prop

Lecture 138 Pricing Section - Logic - Create Yearly Prop

Lecture 139 Pricing Section - Logic - Animate Toggle Button

Lecture 140 Pricing Section - Logic - Calculate Yearly Price with discount

Lecture 141 Pricing Section - Logic - Add buy prop

Section 21: useReducer

Lecture 142 useReducer - Setup

Lecture 143 useReducer - Intro

Lecture 144 useReducer - Add Functionality

Lecture 145 useReducer - Seperate reducer function into a file

Section 22: Project - Task Manager (with useState)

Lecture 146 Task Manager - Demo

Lecture 147 Task Manager - Form JSX

Lecture 148 Task Manager - Single Task JSX

Lecture 149 Task Manager - Linking state to form input

Lecture 150 Task Manager - Add Auto-focus on the name input field

Lecture 151 Task Manager - Handle Submit

Lecture 152 Task Manager - Edit Task 1

Lecture 153 Task Manager - Edit Task 2

Lecture 154 Task Manager - Delete Task

Lecture 155 Task Manager - Complete Task

Lecture 156 Task Manager - Save Tasks to Local Storage

Section 23: Project - Task Manager (with useReducer)

Lecture 157 Task Manager Reducer - Demo

Lecture 158 Task Manager Reducer - Project Setup

Lecture 159 Task Manager Reducer - Alert JSX

Lecture 160 Task Manager Reducer - Confirm JSX

Lecture 161 Task Manager Reducer - useReducer setup

Lecture 162 Task Manager Reducer - Making the Alert dynamic

Lecture 163 Task Manager Reducer - Submit with empty fields

Lecture 164 Task Manager Reducer - Close Alert

Lecture 165 Task Manager Reducer - Add New Task

Lecture 166 Task Manager Reducer - Make Modal Dynamic

Lecture 167 Task Manager Reducer - Open Edit Modal

Lecture 168 Task Manager Reducer - Edit Task

Lecture 169 Task Manager Reducer - Close Edit Modal

Lecture 170 Task Manager Reducer - Update Task

Lecture 171 Task Manager Reducer - Open Delete Modal

Lecture 172 Task Manager Reducer - Delete Task

Lecture 173 Task Manager Reducer - Complete Task

Lecture 174 Task Manager Reducer - Export Reducer Function

Section 24: Props Drilling and Context API

Lecture 175 Props Drilling

Lecture 176 Replace Props Drilling With Context API

Lecture 177 Use Cases For Context API

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

Lecture 178 Dark Mode Toggle - Project Review

Lecture 179 Dark Mode Toggle - Context API 1

Lecture 180 Dark Mode Toggle - Context API 2

Lecture 181 Create a custom Theme Context Provider

Section 26: Custom Hooks

Lecture 182 Custom Hook - Intro

Lecture 183 Custom Hook - useFetch Hook

Section 27: Routing in React

Lecture 184 React Router - Demo

Lecture 185 React Router - Installation

Lecture 186 React Router - Setting Up Routes

Lecture 187 React Router - Linking our Routes

Lecture 188 React Router - 404 NotFound page

Lecture 189 React Router - Active Menu Class with NavLink

Lecture 190 React Router - Page Redirect

Lecture 191 React Router - Nested Routes

Lecture 192 React Router - useParams 1

Lecture 193 React Router - useParams 2

Section 28: Redux

Lecture 194 Intro To Redux

Lecture 195 How Redux Works

Lecture 196 Install Redux, Create Store and Reducer

Lecture 197 Setup Redux Devtools

Lecture 198 Provide the store to your App component

Lecture 199 Select/access data from the store

Lecture 200 Dispatch Actions from the component

Lecture 201 Pass data to the Reducer via payload

Lecture 202 Create authReducer

Lecture 203 Conditionally display the counter

Lecture 204 Extract the Reducers into seperate files

Lecture 205 Extract the Actions into seperate files

Lecture 206 Defining Action Types

Section 29: Redux Toolkit

Lecture 207 Redux Toolkit Intro

Lecture 208 create counterSlice

Lecture 209 create authSlice

Lecture 210 Replace CreateStore With configureStore

Lecture 211 Update useSelector and dispatch

Section 30: Project - Fullstack Ecommerce App

Lecture 212 1. React Ecommerce App - Demo

Lecture 213 2. Ecommerce App - Project Structure

Lecture 214 3. Eshop App - Project Setup

Lecture 215 4. Eshop App - Creating Folder

Lecture 216 5. Eshop App - Warning VS Error

Lecture 217 6. Eshop App - Creating main pages and components

Lecture 218 7. Eshop App - Routing setup

Lecture 219 8. Eshop App - Grouping our imports in a single file

Lecture 220 9. Eshop App - Header Component - logo

Lecture 221 10. Eshop App - Header Component - Nav

Lecture 222 11. Eshop App - Header Component - Responsive menu

Lecture 223 12. Eshop App - Header Component - Set Active Menu Link

Lecture 224 13. Eshop App - Footer Component

Lecture 225 14. Eshop App - Auth components and Routes

Lecture 226 15. Eshop App - Login Page JSX

Lecture 227 16. Eshop App - Card Component

Lecture 228 17. Eshop App - Register Page JSX

Lecture 229 18. Eshop App - Reset Page JSX

Lecture 230 19. Eshop App - Firebase Setup

Lecture 231 20. Eshop App - Loader Component

Lecture 232 21. Eshop App - Regiser User - part 1

Lecture 233 22. Eshop App - Regiser User - part 2

Lecture 234 23. Eshop App - Sign in with Email and Password

Lecture 235 24. Eshop App - Logout

Lecture 236 25. Eshop App - Sign in with Google

Lecture 237 26. Eshop App - Reset Password Logic

Lecture 238 27. Eshop App - Monitor Authentication State

Lecture 239 28. Eshop App - Redux Store setup

Lecture 240 29. Eshop App - Set Active User in Redux - Part 1

Lecture 241 30. Eshop App - Set Active User in Redux - Part 2

Lecture 242 30b. Eshop App - Update on username

Lecture 243 31. Eshop App - Remove Active User in Redux

Lecture 244 32. Eshop App - Show or Hide Links based on auth state

Lecture 245 33. Eshop App - Image Slider JSX

Lecture 246 34. Eshop App - Image Slider Logic

Lecture 247 35. Eshop App - Image Slider Logic - Autoslide effect

Lecture 248 36. Eshop App - Image Slider - Webpack warning

Lecture 249 37. Eshop App - Admin Only Route

Lecture 250 38. Eshop App - Create Admin Section Components

Lecture 251 39. Eshop App - Create Admin Nested Routes

Lecture 252 40. Eshop App - Create Fallback content for Non-Admin

Lecture 253 41. Eshop App - Create Admin Navbar

Lecture 254 42. Eshop App - Add Product component JSX

Lecture 255 43. Eshop App - Handle form input

Lecture 256 44. Eshop App - Upload Image to Firebase Storage

Lecture 257 44.B Update firebase rules

Lecture 258 45. Eshop App - Display upload progress and get image url

Lecture 259 45.B - Eshop App - Upload Product to Firebase

Lecture 260 46. Eshop App - Upload your products

Lecture 261 47. Eshop App - Get products from firestore

Lecture 262 48. Eshop App - Display products on the page

Lecture 263 49. Eshop App - Delete Product

Lecture 264 50. Eshop App - Confirm Dialog Box before Delete Product

Lecture 265 51. Eshop App - Save Products to Redux Store

Lecture 266 52. Eshop App - useParams to add and Edit Product

Lecture 267 53. Eshop App - detectForm based on params

Lecture 268 54. Eshop App - Edit Product

Lecture 269 55. Back to the Home Page

Lecture 270 56. Eshop App - Create Product Component and Sub-components

Lecture 271 57. Eshop App - Product Component Layout

Lecture 272 58. Eshop App - useFetchCollection hook

Lecture 273 59. Eshop App - Testing useFetchCollection hook on Admin page

Lecture 274 60. Eshop App - Fetch products in products Component

Lecture 275 61. Eshop App - ProductList Component - Part 1

Lecture 276 62. Eshop App - getDefault Middleware issues

Lecture 277 63. Eshop App - Search Component

Lecture 278 64. Eshop App - ProductList Component - Part 2

Lecture 279 65. Eshop App - Product Item Component

Lecture 280 66. Eshop App - Show Loading spinner when fetching products

Lecture 281 67. Eshop App - Fetch Single Product

Lecture 282 68. Eshop App - Display Product on Product Details Page

Lecture 283 69. Eshop App - Back To Product Button

Lecture 284 70. Eshop App - Product Filter JSX

Lecture 285 71. Eshop App - Filter Products by Search

Lecture 286 72. Eshop App - Sort Products

Lecture 287 73. Eshop App - Filter Products by Category

Lecture 288 74. Eshop App - Filter Products by Brand

Lecture 289 75. Eshop App - Filter Products by Price

Lecture 290 76. Eshop App - Clear all filter

Lecture 291 77. Eshop App - Make the Product Filter Responsive

Lecture 292 78. Eshop App - Pagination Component - Part 1

Lecture 293 79. Eshop App - Pagination Component - Part 2

Lecture 294 80. Eshop App - Redux cartSlice setup

Lecture 295 81. Eshop App - Add Product To Cart

Lecture 296 82. Eshop App - Cart Component JSX

Lecture 297 83. Eshop App - Decrease product in the cart

Lecture 298 84. Eshop App - Remove product from the cart

Lecture 299 85. Eshop App - Clear Cart

Lecture 300 86. Eshop App - Calculate Subtotal

Lecture 301 87. Eshop App - Calculate Cart Total Quantity

Lecture 302 88. Eshop App - Update Cart in Product Details Page

Lecture 303 89. Eshop App - Make the header sticky and Update Cart in the Header

Lecture 304 90. Eshop App - Redirect User on Checkout

Lecture 305 91. Eshop App - Create the Checkout Components

Lecture 306 92. Eshop App - Create the Checkout Details Page - Part 1

Lecture 307 93. Eshop App - Create the Checkout Details Page - Part 2

Lecture 308 94. Eshop App - Setup Checkout Slice in redux

Lecture 309 95. Eshop App - Create Checkout Summary

Lecture 310 96 Eshop App Create Stripe Test Account

Lecture 311 97. Eshop App - Install Packages For Payment

Lecture 312 98. Eshop App - Create Checkoutform Serverjs And Env File

Lecture 313 99. Eshop App - Setting Up Serverjs

Lecture 314 100. Eshop App - Checkout From The Frontend

Lecture 315 101. Eshop App - Checkout from the backend

Lecture 316 102. Eshop App - Checkout Form Component

Lecture 317 103. Eshop App - Handle Submit on Checkout Form

Lecture 318 104. Eshop App - Checkout Success Page

Lecture 319 105. Eshop App - Save Order to Firebase

Lecture 320 106. Eshop App - OrderHistory Component - Get Orders from Firebase

Lecture 321 107. Eshop App - OrderHistory Component - Display orders on the page

Lecture 322 108. Eshop App - OrderHistory Component - Filter orders by userID

Lecture 323 109. Eshop App useFetchDocument Custom Hook

Lecture 324 110. Eshop App get Order Details

Lecture 325 111. Eshop App Review Product Component

Lecture 326 112. Eshop App - Save review to firebase

Lecture 327 113. Eshop App - Display reviews under product

Lecture 328 114. Eshop App - Back to Admin section - Home Component

Lecture 329 115. Eshop App - InfoBox Component

Lecture 330 116. Eshop App - InfoBox Component Logic

Lecture 331 117. Eshop App - View all orders on Admin dashboard

Lecture 332 118. Eshop App - View order details on Admin dashboard

Lecture 333 119. Eshop App - ChangeOrderStatus Component JSX

Lecture 334 120. Eshop App - ChangeOrderStatus Component Logic

Lecture 335 121. Eshop App - Order status chart - Part 1

Lecture 336 122. Eshop App - Order status chart - Part 2

Lecture 337 123. Eshop App - Add search Filter to admin

Lecture 338 124. Eshop App - Add Pagination to admin

Lecture 339 125. Eshop App - Contact us JSX

Lecture 340 126. Eshop App - Contact us Logic

Lecture 341 127. Eshop App - 404 Not Found page

Lecture 342 128. Eshop App - Testing the App

Lecture 343 129. Eshop App - Cleaning our code with the help of ESLINT

Lecture 344 130. Eshop App - Hide Api keys in .env file

Lecture 345 131. Eshop App - Firebase security rules for production

Lecture 346 132. Eshop App - Push project to Github

Lecture 347 133. Eshop App Setup Heroku

Lecture 348 134. Eshop App - Preparing project for deployment

Lecture 349 135. Eshop App - Deploy app to Heroku

Lecture 350 136. Eshop App - Testing the App

JavaScript developers that want to learn ReactJS