CF

Mastering React With Interview Questions,eStore Project-2024

16h 53m 3s
English
Paid

Explore the comprehensive world of ReactJS as you dive into this course designed to master the fundamental and advanced facets of the latest React version (18). The course is crafted methodically, helping you learn ReactJS through small applications while preparing you for interviews and advanced concepts with ease.

Course Overview

“React (or React.js/ReactJS) is a free, open-source front-end JavaScript library used for building user interfaces or UI components.”

This project-based course is geared towards transforming you into a hands-on React.js developer. Many of my trainees are now employed by Fortune 500 companies in the US, thanks to this structured approach.

As you progress, you'll develop an Amazon-like eStore project using MySQL, Express.js, ReactJS, and Node.js. You'll employ the latest React techniques like Redux, React Hooks, React Router (SPA), class and functional components, Axios, Node.js, Express.js, GitHub, payment gateways, and more.

Hands-on Experience is the core principle of this course from the very first lecture.

Upon completion, you'll possess the skills necessary to manage real-world applications akin to a seasoned ReactJS developer.

Course Content

Familiarize yourself with the full course curriculum for a thorough understanding of the topics covered. Here is a quick overview of what you'll learn:

  • 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

eStore Project Details

During the eStore project, you will gain expertise in:

  • Configuring Large Projects
  • Using Axios
  • GitHub for Source & Version Control
  • MySQL Installation & Working Knowledge
  • Setting up RESTful API with Node.js & Express.js
  • Creating a Shopping Cart
  • Configuring Payment Gateways

Prerequisites

A foundational understanding of HTML, CSS, & JavaScript is recommended before beginning this course.

Enroll today and commence your journey towards mastering ReactJS with this comprehensive course.

About the Author: Udemy

Udemy thumbnail

Udemy is the largest open marketplace for online courses on the internet. Founded in 2010 by Eren Bali, Oktay Caglar, and Gagan Biyani and headquartered in San Francisco, the company went public on the Nasdaq in 2021 under the ticker UDMY. The platform hosts well over two hundred thousand courses across software development, IT and cloud, data science, design, business, marketing, and creative skills, taught by tens of thousands of independent instructors. Roughly seventy million learners use it worldwide, and the corporate arm — Udemy Business — supplies a curated subset of that catalog to enterprise customers.

Because Udemy is a marketplace rather than a single editorial publisher, the catalog is uneven by design. The strongest material lives in the long-form, project-based courses authored by working engineers — full-stack JavaScript, React, Node.js, Python data science, AWS, Docker and Kubernetes, mobile development with Flutter and React Native, and cloud certification preparation. The CourseFlix listing under this source is the slice of that catalog that has been mirrored here for offline-friendly viewing, organized by topic and updated as new releases land. Pricing on Udemy itself swings dramatically with the site's near-permanent sales, which is why the platform is best treated as a deep reference catalog: pick instructors with strong reviews and a track record of updating their material rather than buying on the headline price alone.

Watch Online 209 lessons

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
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

Related courses

Frequently asked questions

What are the prerequisites for enrolling in this course?
Before enrolling in this course, it is recommended that you have a basic understanding of JavaScript as React is built on this programming language. Familiarity with HTML and CSS will also be beneficial since they are essential for building user interfaces with React. The course is designed to guide you from the fundamentals to advanced concepts, so prior experience with React is not mandatory.
What project will I build during the course?
During the course, you will develop an Amazon-like eStore project. This project will incorporate various technologies including MySQL, Express.js, ReactJS, and Node.js. You will learn to implement features using the latest React techniques such as Redux, React Hooks, and React Router (SPA), alongside integrating a payment gateway. This hands-on project is designed to simulate a real-world application development experience.
Who is the target audience for this course?
The course is tailored for individuals aiming to become hands-on React.js developers. It is ideal for those seeking to deepen their understanding of ReactJS and aspire to work with real-world applications. Additionally, it is suitable for those preparing for interviews in tech companies, as the course also covers typical interview questions related to React.
How does this course compare in depth and scope to other React courses?
This course offers a comprehensive exploration of React, covering both fundamental concepts such as React Fundamentals and advanced features like React Hooks and Redux. Unlike some courses that focus solely on theoretical knowledge, this course emphasizes hands-on experience by guiding you through the development of a full-scale eStore project. It also prepares you for technical interviews, making it broader in scope.
What specific tools and platforms will I learn to use in this course?
The course covers a range of tools and platforms essential for React development. You will learn to use npm and npx for package management, GitHub for version control, and Axios for handling HTTP requests. Additionally, you will work with Node.js and Express.js for backend development and MySQL for database management. These tools are integrated into the project-based learning approach of the course.
What topics are not covered in this course?
While the course provides a thorough foundation in React and related technologies, it does not delve into mobile development with React Native. Additionally, it does not cover server-side rendering with frameworks like Next.js or advanced database management beyond basic MySQL integration. These topics may require further learning beyond the scope of this course.
What is the expected time commitment for this course?
The course consists of 209 lessons, each designed to progressively build your skills and understanding of React. While the total runtime is not explicitly specified, the comprehensive nature of the content suggests a significant time commitment to fully engage with the material, complete the eStore project, and prepare for interviews. Students should plan their schedule accordingly to accommodate extensive hands-on practice.