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

Join premium to watch
Go to premium
# Title Duration
1 Introduction 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

Comments

0 comments

Want to join the conversation?

Sign in to comment

Similar courses

React Query: Server State Management in React

React Query: Server State Management in React

Sources: udemy
React Query has become the go-to solution for server state management in React apps, and for good reason! This smart, comprehensive solution makes it easy to ke
7 hours 39 minutes 49 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
MERN 2024 Edition - MongoDB, Express, React and NodeJS

MERN 2024 Edition - MongoDB, Express, React and NodeJS

Sources: udemy
Welcome to the immersion in the MERN Stack! This course will help you master all aspects of building a fully functional "Jobify" application using MongoDB.
19 hours 7 minutes
Zero to Full Stack Hero

Zero to Full Stack Hero

Sources: papareact.com
PAPA React presents.. Zero to Full Stack Hero. It's NOT just another COURSE. It's the world's BEST COMMUNITY. From learning the Basics of Web Development to Mastering React!
101 hours 29 minutes 59 seconds
Build a React & Redux App w CircleCI CICD, AWS & Terraform

Build a React & Redux App w CircleCI CICD, AWS & Terraform

Sources: udemy
React is one of the most popular library's for building client apps with HTML, CSS and JavaScript. If you want to establish yourself as a front-end or full-stack developer, you ...
25 hours 45 minutes 21 seconds