React - Beginner To Advanced (With Redux & Ecommerce App)

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
Create cool projects using ReactJS
Learn the fundamentals of Redux
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 Css

Lecture 44 Profile App 7 - Add React Icon Context

Lecture 45 Profile App 8 - Card Component

Lecture 46 Profile App 9 - Create Pofiles Props

Lecture 47 Profile App 10 - Mapping Through Profiles

Section 8: React Basics Part 3

Lecture 48 What Are Hooks

Lecture 49 What Is State

Lecture 50 Hooks Folder Setup

Lecture 51 Css Utility Classes Overview

Lecture 52 Usestate - Comparative Programming 1

Lecture 53 Usestate - Comparative Programming 2

Lecture 54 Virtual Dom Vs Real Dom

Lecture 55 Counter App JS - Comparative Programming 1

Lecture 56 54 Counter App Usestate - Comparative Programming 2

Lecture 57 Counter App - State Updater Function

Lecture 58 Counter App Usestate - When Not To Use Usestate

Lecture 59 Usestate In Array 1

Lecture 60 Usestate In Array 2

Lecture 61 Usestate In Object

Section 9: Conditionals

Lecture 62 Conditionals Intro

Lecture 63 Conditionals - If Else Statement

Lecture 64 Conditionals - Logical And Operator

Lecture 65 Conditionals - Ternary Operator

Lecture 66 Conditionals - Adding Css Classes Conditionally

Lecture 67 Conditionals - Conditionals With Props

Section 10: General React Project Setup

Lecture 68 General project setup

Section 11: Project - User Profile App

Lecture 69 User Profile App - Demo

Lecture 70 User Profile App - JSX

Lecture 71 User Profile App - CSS

Lecture 72 User Profile App - Logic 1

Lecture 73 User Profile App - Logic 2

Section 12: Project - Animated Login App

Lecture 74 Animated Login Form - Demo

Lecture 75 Animated Login Form - JSX

Lecture 76 Animated Login Form - CSS

Lecture 77 Animated Login Form - Register Component

Lecture 78 Animated Login Form - Reset Component

Lecture 79 Animated Login Form - Logic

Lecture 80 Animated Login Form - Refactoring Logic

Section 13: useEffect Hook

Lecture 81 UseEffect Hook - Intro

Lecture 82 UseEffect Hook - Basics

Lecture 83 UseEffect Hook - Cleanup

Section 14: useEffect Project - Jokes Generator

Lecture 84 Jokes Generator - Demo

Lecture 85 Jokes Generator - JSX

Lecture 86 Jokes Generator - Logic

Lecture 87 Jokes Generator - Fetch Joke On Button Click

Section 15: UseEffect Project - Github User List

Lecture 88 Github User List - Demo

Lecture 89 Github User List - JSX

Lecture 90 Github User List - Fetch Users

Lecture 91 Github User List - Loading State

Lecture 92 Github User List - Handling Errors

Section 16: Forms

Lecture 93 Forms - Intro

Lecture 94 Forms - JSX

Lecture 95 Forms - Controlled Inputs

Lecture 96 Forms - Multiple Controlled Inputs

Lecture 97 Forms - Uncontrolled Inputs

Section 17: Project - Password Visibility Toggle & Strength Indicator

Lecture 98 Password Visibility Toggle & Strength Indicator Demo

Lecture 99 Password Visibility Toggle - JSX

Lecture 100 Password Visibility Toggle - Logic

Lecture 101 Password Strength Indicator - JSX

Lecture 102 Password Strength Indicator - CSS

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

Lecture 104 Password Strength Indicator - Logic - Get Password Input

Lecture 105 Password Strength Indicator - Logic - Set Letter Criterion

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

Lecture 107 Password Strength Indicator - Logic - Disable Enable Button

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

Section 18: Project - Product Filter

Lecture 109 Product Filter - Demo

Lecture 110 Product Filter - Product List Component JSX

Lecture 111 Product Filter - Product List Component CSS

Lecture 112 Product Filter - Search Component JSX

Lecture 113 Product Filter - Categories Component JSX & CSS

Lecture 114 Product Filter - Product Component JSX

Lecture 115 Product Filter - Product Component CSS

Lecture 116 Product Filter - Logic - Display Products

Lecture 117 Product Filter - Logic - Add Search Filter

Lecture 118 Product Filter - Logic - No Product Found

Lecture 119 Product Filter - Logic - Add Category Filter

Section 19: Project - Dark Mode Toggle

Lecture 120 Dark Mode Toggle - Demo

Lecture 121 Dark Mode Toggle - Set Color Scheme

Lecture 122 Dark Mode Toggle - Header Component JSX

Lecture 123 Dark Mode Toggle - Header Component CSS

Lecture 124 Dark Mode Toggle - Hero Component JSX

Lecture 125 Dark Mode Toggle - Hero Component CSS

Lecture 126 Dark Mode Toggle - Footer Component JSX & CSS

Lecture 127 Dark Mode Toggle - Logic - useLocalStorage Setup

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

Lecture 129 Dark Mode Toggle - Logic - Handle switch button

Section 20: Project - Pricing Section

Lecture 130 Pricing Section - Demo

Lecture 131 Pricing Section - SubList Component JSX

Lecture 132 Pricing Section - SubList Component CSS

Lecture 133 Pricing Section - Sub Component JSX

Lecture 134 Pricing Section - Sub Component CSS

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

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

Lecture 137 Pricing Section - Logic - Create Yearly Prop

Lecture 138 Pricing Section - Logic - Animate Toggle Button

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

Lecture 140 Pricing Section - Logic - Add buy prop

Section 21: useReducer

Lecture 141 useReducer - Setup

Lecture 142 useReducer - Intro

Lecture 143 useReducer - Add Functionality

Lecture 144 useReducer - Seperate reducer function into a file

Section 22: Project - Task Manager (with useState)

Lecture 145 Task Manager - Demo

Lecture 146 Task Manager - Form JSX

Lecture 147 Task Manager - Single Task JSX

Lecture 148 Task Manager - Linking state to form input

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

Lecture 150 Task Manager - Handle Submit

Lecture 151 Task Manager - Edit Task 1

Lecture 152 Task Manager - Edit Task 2

Lecture 153 Task Manager - Delete Task

Lecture 154 Task Manager - Complete Task

Lecture 155 Task Manager - Save Tasks to Local Storage

Section 23: Project - Task Manager (with useReducer)

Lecture 156 Task Manager Reducer - Demo

Lecture 157 Task Manager Reducer - Project Setup

Lecture 158 Task Manager Reducer - Alert JSX

Lecture 159 Task Manager Reducer - Confirm JSX

Lecture 160 Task Manager Reducer - useReducer setup

Lecture 161 Task Manager Reducer - Making the Alert dynamic

Lecture 162 Task Manager Reducer - Submit with empty fields

Lecture 163 Task Manager Reducer - Close Alert

Lecture 164 Task Manager Reducer - Add New Task

Lecture 165 Task Manager Reducer - Make Modal Dynamic

Lecture 166 Task Manager Reducer - Open Edit Modal

Lecture 167 Task Manager Reducer - Edit Task

Lecture 168 Task Manager Reducer - Close Edit Modal

Lecture 169 Task Manager Reducer - Update Task

Lecture 170 Task Manager Reducer - Open Delete Modal

Lecture 171 Task Manager Reducer - Delete Task

Lecture 172 Task Manager Reducer - Complete Task

Lecture 173 Task Manager Reducer - Export Reducer Function

Section 24: Props Drilling and Context API

Lecture 174 Props Drilling

Lecture 175 Replace Props Drilling With Context API

Lecture 176 Use Cases For Context API

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

Lecture 177 Dark Mode Toggle - Project Review

Lecture 178 Dark Mode Toggle - Context API 1

Lecture 179 Dark Mode Toggle - Context API 2

Lecture 180 Create a custom Theme Context Provider

Section 26: Custom Hooks

Lecture 181 Custom Hook - Intro

Lecture 182 Custom Hook - useFetch Hook

Section 27: Routing in React

Lecture 183 React Router - Demo

Lecture 184 React Router - Installation

Lecture 185 React Router - Setting Up Routes

Lecture 186 React Router - Linking our Routes

Lecture 187 React Router - 404 NotFound page

Lecture 188 React Router - Active Menu Class with NavLink

Lecture 189 React Router - Page Redirect

Lecture 190 React Router - Nested Routes

Lecture 191 React Router - useParams 1

Lecture 192 React Router - useParams 2

Section 28: Redux

Lecture 193 Intro To Redux

Lecture 194 How Redux Works

Lecture 195 Install Redux, Create Store and Reducer

Lecture 196 Setup Redux Devtools

Lecture 197 Provide the store to your App component

Lecture 198 Select/access data from the store

Lecture 199 Dispatch Actions from the component

Lecture 200 Pass data to the Reducer via payload

Lecture 201 Create authReducer

Lecture 202 Conditionally display the counter

Lecture 203 Extract the Reducers into seperate files

Lecture 204 Extract the Actions into seperate files

Lecture 205 Defining Action Types

Section 29: Redux Toolkit

Lecture 206 Redux Toolkit Intro

Lecture 207 create counterSlice

Lecture 208 create authSlice

Lecture 209 Replace CreateStore With configureStore

Lecture 210 Update useSelector and dispatch

Section 30: Project - Fullstack Ecommerce App

Lecture 211 1. React Ecommerce App - Demo

Lecture 212 2. Ecommerce App - Project Structure

Lecture 213 3. Eshop App - Project Setup

Lecture 214 4. Eshop App - Creating Folder

Lecture 215 5. Eshop App - Warning VS Error

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

Lecture 217 7. Eshop App - Routing setup

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

Lecture 219 9. Eshop App - Header Component - logo

Lecture 220 10. Eshop App - Header Component - Nav

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

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

Lecture 223 13. Eshop App - Footer Component

Lecture 224 14. Eshop App - Auth components and Routes

Lecture 225 15. Eshop App - Login Page JSX

Lecture 226 16. Eshop App - Card Component

Lecture 227 17. Eshop App - Register Page JSX

Lecture 228 18. Eshop App - Reset Page JSX

Lecture 229 19. Eshop App - Firebase Setup

Lecture 230 20. Eshop App - Loader Component

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

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

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

Lecture 234 24. Eshop App - Logout

Lecture 235 25. Eshop App - Sign in with Google

Lecture 236 26. Eshop App - Reset Password Logic

Lecture 237 27. Eshop App - Monitor Authentication State

Lecture 238 28. Eshop App - Redux Store setup

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

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

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

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

Lecture 243 33. Eshop App - Image Slider JSX

Lecture 244 34. Eshop App - Image Slider Logic

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

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

Lecture 247 37. Eshop App - Admin Only Route

Lecture 248 38. Eshop App - Create Admin Section Components

Lecture 249 39. Eshop App - Create Admin Nested Routes

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

Lecture 251 41. Eshop App - Create Admin Navbar

Lecture 252 42. Eshop App - Add Product component JSX

Lecture 253 43. Eshop App - Handle form input

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

Lecture 255 44.B Update firebase rules

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

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

Lecture 258 46. Eshop App - Upload your products

Lecture 259 47. Eshop App - Get products from firestore

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

Lecture 261 49. Eshop App - Delete Product

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

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

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

Lecture 265 53. Eshop App - detectForm based on params

Lecture 266 54. Eshop App - Edit Product

Lecture 267 55. Back to the Home Page

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

Lecture 269 57. Eshop App - Product Component Layout

Lecture 270 58. Eshop App - useFetchCollection hook

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

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

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

Lecture 274 62. Eshop App - getDefault Middleware issues

Lecture 275 63. Eshop App - Search Component

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

Lecture 277 65. Eshop App - Product Item Component

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

Lecture 279 67. Eshop App - Fetch Single Product

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

Lecture 281 69. Eshop App - Back To Product Button

Lecture 282 70. Eshop App - Product Filter JSX

Lecture 283 71. Eshop App - Filter Products by Search

Lecture 284 72. Eshop App - Sort Products

Lecture 285 73. Eshop App - Filter Products by Category

Lecture 286 74. Eshop App - Filter Products by Brand

Lecture 287 75. Eshop App - Filter Products by Price

Lecture 288 76. Eshop App - Clear all filter

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

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

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

Lecture 292 80. Eshop App - Redux cartSlice setup

Lecture 293 81. Eshop App - Add Product To Cart

Lecture 294 82. Eshop App - Cart Component JSX

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

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

Lecture 297 85. Eshop App - Clear Cart

Lecture 298 86. Eshop App - Calculate Subtotal

Lecture 299 87. Eshop App - Calculate Cart Total Quantity

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

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

Lecture 302 90. Eshop App - Redirect User on Checkout

Lecture 303 91. Eshop App - Create the Checkout Components

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

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

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

Lecture 307 95. Eshop App - Create Checkout Summary

Lecture 308 96 Eshop App Create Stripe Test Account

Lecture 309 97. Eshop App - Install Packages For Payment

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

Lecture 311 99. Eshop App - Setting Up Serverjs

Lecture 312 100. Eshop App - Checkout From The Frontend

Lecture 313 101. Eshop App - Checkout from the backend

Lecture 314 102. Eshop App - Checkout Form Component

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

Lecture 316 104. Eshop App - Checkout Success Page

Lecture 317 105. Eshop App - Save Order to Firebase

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

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

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

Lecture 321 109. Eshop App useFetchDocument Custom Hook

Lecture 322 110. Eshop App get Order Details

Lecture 323 111. Eshop App Review Product Component

Lecture 324 112. Eshop App - Save review to firebase

Lecture 325 113. Eshop App - Display reviews under product

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

Lecture 327 115. Eshop App - InfoBox Component

Lecture 328 116. Eshop App - InfoBox Component Logic

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

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

Lecture 331 119. Eshop App - ChangeOrderStatus Component JSX

Lecture 332 120. Eshop App - ChangeOrderStatus Component Logic

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

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

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

Lecture 336 124. Eshop App - Add Pagination to admin

Lecture 337 125. Eshop App - Contact us JSX

Lecture 338 126. Eshop App - Contact us Logic

Lecture 339 127. Eshop App - 404 Not Found page

Lecture 340 128. Eshop App - Testing the App

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

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

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

Lecture 344 132. Eshop App - Push project to Github

Lecture 345 133. Eshop App Setup Heroku

Lecture 346 134. Eshop App - Preparing project for deployment

Lecture 347 135. Eshop App - Deploy app to Heroku

Lecture 348 136. Eshop App - Testing the App

JavaScript developers that want to learn ReactJS