Mastering React With Interview Questions,eStore Project-2024

16h 53m 3s
English
Paid

Course description

In this comprehensive course, we will go through the prior and newer versions of ReactJS with the primary focus on understanding the latest version(18).

The entire course is prepared in a methodical way so that candidates learn & master ReactJS fundamentals through smaller applications, get prepared for interviews & advanced concepts in the simplest of ways.

“React (also known as React.js or ReactJS) is a free and open-source front-end JavaScript library for building user interfaces or UI components.”

Candidates trained by me are now working with fortune 500 companies in the US. This project-based course will make your journey easier in becoming a hands-on React.js developer.

The end of the course has a concise Amazon-like eStore project using MySQL,Express.js,ReactJS,Node.js, which is built with all the latest React techniques like Redux, React Hooks, React Router(SPA), Class & functional components, Axios, Node.js, Express.js, GitHub, payment gateway and more...

As mentioned, the course is completely hands-on from the 1st lecture - making sure you make the most out of each lecture as you progress ahead.

On completion of this course, you’ll be able to handle real-world applications like any other ReactJS developer.

Read more about the course

What's in the course?

If you have seen my other courses, you’ll know that we always have sections packed with beginner to advanced level content, so once again it is advised to check the full course curriculum first to get a clear idea of all the topics and then start step by step.

Here's a quick summary of what you'll find in the course:

  • React fundamentals(version 17)
  • React Hooks
  • Standard React practices
  • Code optimization
  • List & Keys
  • Forms
  • React-Router (SPA - Single-page application)
  • Context API
  • Redux
  • Asynchronous Redux
  • Redux Toolkit (RTK) - Modern Redux
  • React with TypeScript
  • Comprehensive React eStore project
  • Testing

In the eStore project, you’ll learn the following:

  • Configuring large projects
  • Axios
  • GitHub for source & version control
  • MySQL installation & working knowledge
  • Configuring RESTful API with Node.js & Express.js
  • Creating shopping cart
  • Configuring payment gateway

I recommend that you have a basic knowledge of HTML, CSS & JavaScript before starting this course.

Take action today and enroll in this comprehensive course.

Watch Online

This is a demo lesson (10:00 remaining)

You can watch up to 10 minutes for free. Subscribe to unlock all 209 lessons in this course and access 10,000+ hours of premium content across all courses.

View Pricing

Watch Online Mastering React With Interview Questions,eStore Project-2024

0:00
/
#1: Introduction

All Course Lessons (209)

#Lesson TitleDurationAccess
1
Introduction Demo
01:55
2
React Is Declarative
03:50
3
Component Based Architecture
18:26
4
Creating & Understanding React Project Architecture
11:07
5
npm vs. npx
03:34
6
React 18 - Goodbye ReactDOM.render()
02:28
7
React 18 - Migrating from v17 to v18
02:31
8
"props" Destructuring
09:19
9
Concept of State & useState() Hook
11:27
10
Lazy Initial State
06:31
11
Basic Event Handling & Parameter Passing
08:38
12
Applying External & Inline Styling
06:46
13
JSX - In-depth
10:14
14
New JSX Transform
04:47
15
Primitive Types & Object Literal with useState()
11:59
16
Class Component Basics
07:41
17
Class Component "state" update with setState()
07:16
18
Component Lifecycle Methods Basics
09:51
19
useEffect() - Creating A Digital Clock Using useEffect()
08:30
20
useEffect() Multiple States & Skipping Effects For Optimization
05:19
21
Conditional Rendering - Cleaning Up An Effect
09:57
22
"ref" - The Older way
05:18
23
React.createRef() method
02:50
24
useRef() hook
03:35
25
React.memo() & useCallback() hook
17:46
26
Introduction
00:48
27
map() method
08:52
28
String Array Rendering
04:17
29
Keys
05:17
30
Fixed Stable Keys
02:35
31
List With A Component
04:24
32
Embedding map() In JSX
01:51
33
Introduction
01:03
34
Expression & String Literals
04:47
35
"props" default to True
01:25
36
Spread Attributes
02:54
37
props.children property
03:04
38
<React.Fragment>
02:45
39
Event Handling - In-depth Introduction
00:53
40
Quick Essential Recap - Events
04:28
41
SyntheticEvent
05:35
42
Input Event - Textbox
03:11
43
preventDefault - Preventing default behavior
05:17
44
<form> with Multiple States
08:16
45
<form> - States as Object
06:21
46
Single Event Handler Using Dynamic Key
05:04
47
Functional Update - The Correct Way
02:53
48
Checkbox or Radio - Input fields
03:31
49
Introduction
01:16
50
Conditional Rendering with if...else…
07:42
51
Inline if-else [ condition? true: false]
02:56
52
JSX - Element Variable
02:54
53
switch...case…
01:47
54
Logical && Operator
02:14
55
MPA vs. SPA
03:26
56
Defining Routes
13:25
57
Menu Formatting
01:45
58
URL Vs. Routes & Default Page Setup
03:15
59
Dynamic Routes - useParams() hook
10:41
60
Nested Routes - <Outlet/>
05:13
61
Not Found Page (404)
03:24
62
index Attribute - Referring The Parent Route
03:47
63
Dynamic Products Data - useState() & route Configuration
05:30
64
context & useOutletContext() hook - Passing Data To Child Component
03:36
65
"state" & useLocation() hook - The Correct Way Of Data Sharing
03:31
66
Improvizing The Interface
04:08
67
useRoutes() hook - Javascript instead of JSX
05:36
68
NavLink - For Better Styling
04:38
69
<Navigate> To Redirect
01:56
70
useNavigate() hook
03:59
71
Multi-page Application(MPA)/Single-page Application(SPA) Basics
03:19
72
Defining Routes
10:49
73
Route Matchers - <Switch> & exact
06:06
74
Route Parameters & Dynamic Routes with useParams hook
09:07
75
Nested Route, match object & useRouteMatch() hook
10:11
76
Redirect
02:57
77
NoMatch(404)
05:11
78
<NavLink> Vs. <Link>
06:14
79
useHistory() hook
06:10
80
Preventing Navigation - <Prompt>
05:33
81
Query Parameters
08:25
82
“prop” drilling
05:11
83
First Step - All in App.js
03:25
84
Creating Cart & Total component
04:04
85
context API - Implementation
13:01
86
useContext() - New & Better Consumer!
04:34
87
Redux - Introduction
10:22
88
Setting-up the redux-demo Application
06:30
89
Creating Global Store & Reducer
05:21
90
Providing store with Provider
03:01
91
useSelector() hook
06:19
92
useDispatch() hook
14:43
93
Class Component - Accessing store in class component
07:05
94
Action Creator & Event Dispatching (Class Component)
07:46
95
Delete Cart Item
06:11
96
Combine Reducers Part-1
06:34
97
Combine Reducers Part-2
06:56
98
Action Type Constants
05:57
99
Why Asynchronous Redux ?
03:48
100
Action Creator - validateUser()
04:41
101
redux-thunk
05:29
102
Redux Toolkit(RTK) - Introduction & Installation
03:52
103
Creating Slice
12:31
104
configureStore() - Store creation
03:20
105
Dispatching Actions - The RTK way
06:11
106
thunk - Asynchronous
04:26
107
Http Requests - Introduction
02:21
108
fetch Api - Refresher
12:28
109
Fetching Data
07:53
110
Displaying Users Data
04:18
111
Creating Components - Users/Todos
08:18
112
Conditional Rendering Implementation
03:33
113
Error Handling
08:13
114
Rules Of Hooks
02:42
115
Custom Hooks
06:03
116
Fetching Data Using Custom Hooks
05:17
117
Introduction
01:18
118
Installing TypeScript Compiler
05:06
119
Variables & Datatypes
08:05
120
Type Annotation & Inference
04:57
121
Creating React & TypeScript Project
02:24
122
React.FC - TypeScript FunctionalComponent
06:19
123
Interface & Optional Attributes
03:56
124
useState() with TypeScript
03:03
125
onClick - Event Handling with TypeScript
03:31
126
onChange - EventHandling with TypeScript
03:02
127
<select> - Working with Dropdown
02:07
128
useRef() with TypeScript
03:32
129
Introduction to Automated Testing
02:15
130
Types of Automated Tests
02:16
131
Jest Vs. Enzyme
03:11
132
React Project & Testing - First Step
05:13
133
Understanding TDD - Test Driven Development
01:47
134
Beginning Practical Test
11:12
135
getByTestId() and data-testid
02:28
136
Button Click Test - fireEvent
05:03
137
userEvent Vs. fireEvent
03:58
138
Matchers - toBe() or not.toBe() & more...
03:56
139
Test with input element
05:31
140
Resolving Input Change Issue
03:11
141
Asynchronous Testing
07:34
142
Mock Test - Mocking fetch() API
04:09
143
beforeEach() & afterEach()
02:23
144
Snapshot Testing
06:18
145
Introduction - MERN Stack eStore Project
01:20
146
Beginning With Header Component
05:04
147
Adding Search Bar With Icon
04:33
148
Category Dropdown In Search Bar
02:54
149
Login, Wishlist & Cart Icons
05:58
150
Creating React TopNav Component
04:28
151
Implementing SCSS
04:30
152
CatNav - Category Navigation
05:43
153
Applying Transition Effect
03:14
154
Global CSS with mixins and variables
04:44
155
SideNav
05:28
156
Creating Accordion
05:47
157
Making the Accordion Collapsible
02:25
158
Converting Transition into Global Mixin
03:55
159
Creating Products Component
06:36
160
Styling the Product Card
05:25
161
Mapping the Product Cards
03:23
162
Rating section in the product card
01:47
163
Implementing Flex For Better Responsiveness
03:53
164
What and Why Git / Github?
03:06
165
Configuring the Project Repository
04:16
166
Configuring the Branch in Git
02:41
167
Configuring Redux Tool-Kit(RTK)
02:04
168
Implementing RTK in CatNav Component
03:41
169
Implementing RTK for the Products Component
01:29
170
Implementing RTK for the Accordion Categories
04:11
171
Configuring MySQL
03:35
172
Creating the Database
03:53
173
Creating Node Server with Express.js
03:12
174
Configuring API Endpoints/Routes
02:34
175
Configuring nodemon
01:36
176
Connecting with MySQL
03:26
177
Data Fetching with SQL Query
02:03
178
createPool() - No Need for getConnection()
01:28
179
Organizing Routes
02:17
180
Configuring Routes with “express.Router()”
01:22
181
Organizing the RTK Code
02:11
182
Configuring the Reducer and Action for CatNav
04:06
183
Fetching the Category Data from Database
02:10
184
Inserting and Fetching all Parent Categories
01:31
185
Fetching Categories for Accordion
03:15
186
Adding the Products Endpoint / Route
02:58
187
Rendering the Products Data
03:34
188
Adding the Cart Button
03:04
189
Creating the Cart Slice
01:52
190
Applying Cart Functionalities
04:04
191
Displaying the Cart Item Count
03:47
192
Filtering Products by Categories
04:52
193
Setting Up Price Filter UI
03:35
194
Adding Price Filter Feature
03:33
195
Configuring the React Router 6 - SPA
02:33
196
Configuring the ProductDetails
02:21
197
Filling the Data in ProductDetails Component
03:26
198
Styling the ProductDetails Component
05:10
199
Enabling Cart In ProductDetails
01:09
200
Creating the Cart Component
01:40
201
Conditional Rendering in Cart Component
01:45
202
Completing the EmptyCart Component
03:00
203
Rendering Data in FilledCart Component
07:05
204
Styling the FilledCart Component
03:18
205
Rendering the Cart Item Quantity
02:20
206
Implementing the Cart Item Quantity
05:06
207
Deleting Cart Items
02:54
208
Configuring the Google OAuth
04:08
209
Displaying Logged-in User Name
02:39

Unlock unlimited learning

Get instant access to all 208 lessons in this course, plus thousands of other premium courses. One subscription, unlimited knowledge.

Learn more about subscription

Comments

0 comments

Want to join the conversation?

Sign in to comment

Similar courses

React Three Fiber: The Ultimate Guide to 3D Web Developmen

React Three Fiber: The Ultimate Guide to 3D Web Developmen

Sources: Wawa Sensei
3D development is a vast field with many different techniques. This comprehensive guide will provide you with the necessary tools to get started and the...
9 hours 18 minutes 15 seconds
Next.JS with Sanity CMS - Serverless Blog App (w/ Vercel)

Next.JS with Sanity CMS - Serverless Blog App (w/ Vercel)

Sources: udemy
We will start with integration of a very clean application layout I have prepared for you. We will follow latest practices of React and Next JS, this means we w
13 hours 5 minutes 9 seconds
React & TypeScript Chrome Extension Development [2021]

React & TypeScript Chrome Extension Development [2021]

Sources: udemy
Hi! Welcome to the comprehensive Chrome Extension Development course using modern web frameworks in 2021. This is the only course on Udemy that is focused on bu
8 hours 52 minutes 35 seconds
Intro to Shopify App Development with React, Node & GraphQL

Intro to Shopify App Development with React, Node & GraphQL

Sources: udemy
This is the first course of it's kind on the internet! Learn how to make professional applications for the Shopify Platform using React, Node, Koa, GraphQL, Apollo, and the Shop...
4 hours 10 seconds