Complete React Ultimate Guide eCommerce Hooks Redux

Learn by Doing | eCommerce | React Projects | Redux | JavaScript | React for Busy Developers | Router | Redux Toolkit
Complete React Ultimate Guide eCommerce Hooks Redux
File Size :
16.75 GB
Total length :
39h 10m



Web University by Harsha Vardhan


Last update

Last updated 11/2022



Complete React Ultimate Guide eCommerce Hooks Redux

What you’ll learn

Confidently speak about most of the essential concepts of React
Create professional web app using React
Learn React by doing a eCommerce app
React Hooks
Props and State
HTTP Rest API calls using Fetch API
ES6 Classes
Unidirectional Data flow in React
Forms Development in React
React Lifecycle
CRUD Operations in React with HTTP Rest API calls
React Routing with Navbar and Sidebar along with Route Parameters
Login and Logout
Component Communication in React

Complete React Ultimate Guide eCommerce Hooks Redux


JavaScript – Don’t worry, the most important topics of JavaScript (Functions and Objects) are covered in depth as Bonus lectures here.


THE BEST SELLING REACT COURSE ON UDEMY*****************************************************”Before I find this course, I was really worried about React. But this course gave me amazing clarity on each concept of React and how does it work really behind the scenes. Instructor explains how does it works apart from how to just do it.” – Sridhar Mamidala”Came here after purchasing top 3 bestseller react courses. I couldn’t get redux from those, so purchase this course. Was able to understand Redux, Harsha has explained it in most simplified way. Later went through the other section of the course from the beginning & understood more abt the things already learnt. This course deserves to be the best seller.” – Prashant Dhage”Great Course harsha sir is a great instructor am vary happy to learn from him everything is fine and sir response is good at Q&A section if you are a exact beginner or experienced developer blindly go for it” – Yugesh”Trainer knowledge is excellent and very descriptive Very well designed course. I can definitely say that I have learned a lot. Now I am working very conveniently on React after taking this course” – Shaik Aleem”This course is really the next level. It explains everything that I need to know to become expert in React – starting from app creation to react hooks.” – Maruti”Very good practical oriented course.” – Susmitha”This course is amazing. Everything is explained in depth and clear. All the concepts that are explained in theory are built into an interesting and easy ecommerce project to understand where to use which concept.” – BhavaniLEARN these HOT TOPICS in React with Hooks in this course:Build your own React Class ComponentsAdd Bootstrap to ReactStyle handling in ReactNavbarNested ComponentsRendering Expressions, Lists, Methods, ImagesHandling Component StateParent-to-child communicationProps vs StatePassing Children to ComponentsLifecycle methodsLifecycle of child componentsForms development in ReactREST-API calls using Async and AwaitReact-routerCRUD operationsValidationsReact hooksFunctional ComponentsuseStateuseEffectuseContextuseMemouseRefuseReduceruseCallbackReact.memoServicesGrid developmentReduxReact-ReduxRedux-ThunkRedux Custom MiddlewareRedux-PromiseRedux ToolkitCourse Project:By end of this course, you will have your own eCommerce app where the users can register, login – search, filter shop products – as well as they can see previous orders, can add products to cart, buy products.The course project is developed using both Class Components and Function Components in React.Hooks are main highlight of this course – where you will really learn when-to-use which hook, apart from just how to use it.We will cover class components up to Section 10.We will cover complete React hooks from Section 11.The administrator can control what products should be visible to the users.It is inclusive of grid operations such as Grid CRUD operations, filter, sort and pagination & REST-API calls.Let’s begin React with an eCommerce project.You will learn React by doing – practically in this project.About course:This course is beginner to intermediate level course, where the developer understands React from scratch (basics) to a meaningful app – by practice.But you will not miss theoretical details. All essential articles that you need to read are available at end of each section.You create forms, routing and navigation, component hierarchy, communication from parent-to-child components and vice versa, and also hooks etc., and many more in this course.You will connect to DB server using JSON-server package (third party npm package) that demonstrates how to make HTTP requests to REST-API servers.In case if you are a UI developer, sticking to JSON-server is recommended.This course shows development of sophisticated data grid with all features such as sorting, filtering, paging, http requests (REST API calls) etc.Please note that, this course sticks to React only – doesn’t cover any concepts of server side programming.This course covers Redux, React-Redux, Redux-Promise, Redux-Saga and Redux-Toolkit in detailed with sample projects.**************************************************************JavaScript – Bonus LecturesTo be frank, you might feel little complications if you don’t have sound knowledge of JavaScript, while learning some advanced React concepts. But fortunately, in this course, I am proudly providing bonus lectures of JavaScript essential concepts that are required to become master in React – i.e. “JavaScript Functions” “JavaScript Objects”, “JavaScript Arrays” and “ES6 Classes”.It is guarantee that if you go through these four sections of JavaScript lectures in this course, you will never confuse to learn any advanced concepts of React – even Redux also.In case if you find any complication in the middle of React / Redux lectures also, you can refer to the specific topic which you are not aware in the JavaScript bonus lectures. It’s a big gift for React learners.**************************************************************POTENTIAL BENEFITS OF THIS COURSEBy the end of this course, you will create all of the source code for a decent eCommerce real-time project, with all features like page navigation with routing, CRUD operations with JSON-server, Forms and validations, component communication and also React Hooks.You will type in every line of code with me in the videos … all from scratch.I explain every line of react code that we create. So this isn’t a copy/paste exercise, you will have a full understanding of the code. I am a RESPONSIVE INSTRUCTOR …. post your questions and I will RESPOND in 24 hours, ASAP.All source code is available for download.English captions are available.**************************************************************No Risk – Money-Back GuaranteeFinally, there is no risk. You can preview first few lectures of the course for free. Once you buy this course, for some reason if you are not happy with the course, Udemy offers a 30-day money back guarantee.So you have nothing to lose, sign up for this course and learn how to build React Projects from scratch!**************************************************************Key Points about this Course: AJAX (REST-API calls) videos will be shown with JSON-server; no sever side code is shown.All the concepts explained practically.We use Bootstrap from the beginning of the course.Essential articles are included for conceptual understanding of React.We use Windows O/S, Visual Studio Code, React.


Section 1: Introduction & Basics

Lecture 1 What is React

Lecture 2 Understand Components

Section 2: Your First React App

Lecture 3 Create New React App

Lecture 4 Create React App From Scratch

Lecture 5 Load Bootstrap

Lecture 6 Create Components

Lecture 7 Add CSS Styles

Lecture 8 Add Bootstrap NavBar

Lecture 9 Fix Error – DOM property class

Lecture 10 Nested Components

Section 3: Render Your Data

Lecture 11 Render Expressions

Lecture 12 Handle Events

Lecture 13 Update Component State

Lecture 14 Render List

Lecture 15 Render Conditionally

Lecture 16 Render Methods

Lecture 17 Render Images

Lecture 18 Render CSS Styles

Lecture 19 Render CSS Classes

Lecture 20 Pass Event Arguments

Section 4: Parent-Child Component Communication

Lecture 21 Render Child Components

Lecture 22 Props

Lecture 23 Props vs State

Lecture 24 Props.Children

Lecture 25 Handle Child Events

Lecture 26 Delete Child Components

Section 5: Life Cycle Methods

Lecture 27 Life Cycle Phases

Lecture 28 Mounting Phase

Lecture 29 Updating Phase

Lecture 30 Unmounting Phase

Lecture 31 Life Cycle of Child Components

Lecture 32 Error Handling Phase

Section 6: Forms

Lecture 33 Basic Form

Lecture 34 Two-Way Binding

Lecture 35 Form Submit Button

Section 7: REST-Api Calls

Lecture 36 HTTP Requests

Lecture 37 Async and Await

Lecture 38 Login Form with HTTP Request

Section 8: Routing

Lecture 39 Basic Routing

Lecture 40 404 Page

Lecture 41 Switch

Lecture 42 Link

Lecture 43 Active Route

Lecture 44 Render Links Conditionally

Lecture 45 Update Login State

Lecture 46 Navigate Programmatically

Lecture 47 Logout

Lecture 48 Sidebar

Lecture 49 Route Parameters

Lecture 50 Update Title bar

Lecture 51 Hash Router

Section 9: CRUD

Lecture 52 Get

Lecture 53 Post

Lecture 54 Catch Errors

Lecture 55 Put

Lecture 56 Delete

Section 10: Validate

Lecture 57 Registration Form

Lecture 58 Validate

Lecture 59 Validate Dates

Lecture 60 IsValid

Lecture 61 Dirty

Lecture 62 Radio Button

Lecture 63 DropDownList

Lecture 64 Check Box

Lecture 65 Error Messages

Lecture 66 Submit Registration Form

Section 11: Functional Components & Hooks [Course Project]

Lecture 67 Overview of Course Project

Lecture 68 Setup JSON-Server

Lecture 69 Setup Project

Lecture 70 Class Components vs Functional Components

Lecture 71 Intro to Hooks

Lecture 72 useState Hook

Lecture 73 Routing

Lecture 74 NavBar

Lecture 75 useEffect – Run on each Render

Lecture 76 useEffect – Run on Update

Lecture 77 useEffect – Run on Mount

Lecture 78 useEffect – Run on Unmount

Lecture 79 useState with Objects

Lecture 80 Validations with Hooks – Register

Lecture 81 Validations with Hooks – Login

Lecture 82 useContext – User Authentication

Lecture 83 useState with Arrays

Lecture 84 Re-Usable Services

Lecture 85 React.memo

Lecture 86 useCallback – Part 1

Lecture 87 useCallback – Part 2

Lecture 88 Handle Multiple Tables – Part 1

Lecture 89 Handle Multiple Tables – Part 2

Lecture 90 Handle Multiple Tables – Part 3

Lecture 91 Admin Login

Lecture 92 Products Grid

Lecture 93 Grid – Filter

Lecture 94 Grid – Sort

Lecture 95 useMemo

Lecture 96 useReducer with Context

Lecture 97 useRef

Section 12: Redux

Lecture 98 Introduction to Redux

Lecture 99 Redux Data Flow

Lecture 100 Getting Started with Redux

Lecture 101 Reducers

Lecture 102 Store

Lecture 103 Dispatch and Action

Lecture 104 Redux DevTools

Lecture 105 Subscribe to Store

Lecture 106 Payload

Lecture 107 Action Types

Lecture 108 Action Creator

Section 13: React-Redux and Redux-Thunk

Lecture 109 Real World React-Redux App Project Structure

Lecture 110 Create React UI

Lecture 111 Initial State

Lecture 112 Action Types

Lecture 113 Actions

Lecture 114 Reducers

Lecture 115 Store

Lecture 116 useSelector

Lecture 117 useDispatch

Lecture 118 Search

Lecture 119 React-Thunk – Http Request

Lecture 120 Axios

Lecture 121 Request-Success-Failure Pattern

Lecture 122 Create and Delete using Request-Success-Failure Pattern

Lecture 123 connect()

Lecture 124 mapStateToProps and mapDispatchToProps

Lecture 125 mapDispatchToProps as Object

Lecture 126 Redux-Logger

Lecture 127 Redux-Logger Configuration

Lecture 128 Redux Custom Middleware

Section 14: Redux-Promise

Lecture 129 Redux-Promise

Lecture 130 Create and Delete with Redux-Promise

Section 15: Redux-Saga

Lecture 131 Generator Functions

Lecture 132 Introduction to Redux-Saga

Lecture 133 Getting Started with Redux-Saga

Lecture 134 Root Saga

Lecture 135 Worker Saga

Lecture 136 Async Operations or HTTP requests

Lecture 137 Create and Delete with Redux-Saga

Lecture 138 takeEvery vs takeLatest

Lecture 139 debounce

Lecture 140 throttle

Lecture 141 call

Lecture 142 fork

Lecture 143 all

Lecture 144 take

Lecture 145 retry

Lecture 146 cancel

Lecture 147 race

Lecture 148 select

Section 16: Redux-Toolkit

Lecture 149 Intro to Redux-Toolkit

Lecture 150 Initial Setup

Lecture 151 Initial State

Lecture 152 Create UI

Lecture 153 Reducers

Lecture 154 createSlice

Lecture 155 configureStore

Lecture 156 useSelector

Lecture 157 dispatch

Lecture 158 Update with Redux Toolkit

Lecture 159 Multiple Slices

Lecture 160 extraReducers

Lecture 161 createAsyncThunk

Lecture 162 createAsyncThunk – Create and Delete

Section 17: Bonus: JavaScript Functions

Lecture 163 Creating Functions

Lecture 164 Functions with no Arguments and Return

Lecture 165 Function Calls Another Function

Lecture 166 Arguments keyword

Lecture 167 Recursion

Lecture 168 Default Arguments

Lecture 169 Scope of Variables

Lecture 170 Pure Functions

Lecture 171 Callback Functions

Lecture 172 setTimeout

Lecture 173 setInterval

Lecture 174 Currying

Section 18: Bonus: JavaScript Objects

Lecture 175 Object Literals

Lecture 176 this keyword

Lecture 177 Real World Scenarios and JS Debugging

Lecture 178 Adding Members From Outside of Object

Lecture 179 Accessing Properties

Lecture 180 Function – call

Lecture 181 Function – apply

Lecture 182 Function – bind

Lecture 183 Arrow Functions

Lecture 184 For-in loop

Lecture 185 Destructuring Objects

Lecture 186 Destructuring Function Parameters

Section 19: Bonus: ES2015 or ES6 – Classes

Lecture 187 Classes

Lecture 188 Constructor

Lecture 189 Private Properties and Private Methods

Lecture 190 Set and Get Methods

Lecture 191 Accessor Properties – Set and Get

Lecture 192 Class Inheritance

Section 20: Bonus: Arrays – JavaScript

Lecture 193 Creating Arrays

Lecture 194 Push and Pop

Lecture 195 Splice

Lecture 196 Concat

Lecture 197 Every

Lecture 198 Some

Lecture 199 Filter

Lecture 200 Find

Lecture 201 FindIndex

Lecture 202 ForEach

Lecture 203 Includes

Lecture 204 IndexOf

Lecture 205 Map

Lecture 206 FlatMap

Lecture 207 Flat

Lecture 208 Reverse

Lecture 209 Slice

Lecture 210 Sort

Section 21: The End

Lecture 211 What’s Next?

Lecture 212 Bonus: $6 – Discount Coupons for my other Udemy Courses

Beginners who wants to learn React practically by really creating a sample eCommerce app from scratch,Learn react by actually creating a sample eCommerce app. Useful for busy developers who wants to learn real code of React by practically doing it

Course Information:

Udemy | English | 39h 10m | 16.75 GB
Created by: Web University by Harsha Vardhan

You Can See More Courses in the Developer >> Greetings from

New Courses

Scroll to Top