Autoplay
Autocomplete
Previous Lesson
Complete and Continue
Mastering React With Interview Questions + eStore Project
React Fundamentals
Introduction (3:00)
React Is Declarative (3:49)
Component Based Architecture (18:25)
Creating and Understanding React Project Architecture (11:06)
npm Vs. npx (3:33)
React 18 - Goodbye ReactDOM.render() (2:27)
React 18 - Migrating from v17 to v18 (2:29)
"props" Destructuring (9:18)
Concept of State and useState() Hook (11:26)
Lazy Initial State (6:30)
Basic Event Handling and Parameter Passing (8:37)
Applying External and Inline Styling (6:45)
JSX - In-depth (10:13)
New JSX Transform (4:46)
Primitive Types and Object Literal with useState() (11:58)
Class Component Basics (7:40)
Class Component "state" update with setState() (7:15)
Component Lifecycle Methods Basics (9:50)
useEffect() - Creating A Digital Clock Using useEffect() (8:29)
useEffect() Multiple States and Skipping Effects For Optimization (5:18)
Conditional Rendering - Cleaning Up An Effect (9:56)
"ref" - The Older way (5:17)
React.createRef() method (2:49)
useRef() hook (3:34)
React.memo() and useCallback() hook (17:45)
List & Keys
Introduction (0:47)
map() method (8:51)
String Array Rendering (4:16)
Keys (2:34)
Fixed Stable Keys (4:23)
List With A Component (1:50)
Embedding map() In JSX (1:50)
"props" & JSX - In Depth
Introduction (1:02)
Expression and String Literals (4:46)
"props" default to True (1:24)
Spread Attributes (2:53)
props.children property (3:03)
React.Fragment (2:43)
Source Code
Event Handling - In-Depth
Event Handling - In-depth Introduction (0:52)
Quick Essential Recap - Events (4:27)
SyntheticEvent (5:34)
Input Event - Textbox (3:10)
preventDefault - Preventing default behavior (5:16)
form with Multiple States (8:15)
form - States as Object (6:20)
Single Event Handler Using Dynamic Key (5:03)
Functional Update - The Correct Way (2:52)
Checkbox or Radio - Input fields (3:30)
Source Code
Conditional Rendering - In-Depth
Introduction (1:15)
Conditional Rendering with if...else… (7:41)
Inline if-else - [condition?: true false] (2:55)
JSX - Element Variable (1:46)
switch...case… (2:53)
Logical Operator (2:13)
Source Code
React Router Version 6 [SPA-Single Page Application]
MPA vs. SPA (3:25)
Defining Routes 2 (13:24)
Menu Formatting (1:44)
URL Vs. Routes and Default Page Setup (3:14)
Dynamic Routes - useParams() hook (10:40)
Nested Routes - Outlet (5:12)
Not Found Page (404) (3:23)
index Attribute - Referring the patent route (3:46)
Dynamic Products Data - useState() and route configuration (5:29)
context and useOutletContext() hook - Passing data to child component (3:35)
"state" & useLocation() hook - The Correct Way Of Data Sharing (3:30)
Improvizing The Interface (4:07)
useRoutes() hook - Javascript instead of JSX (5:35)
NavLink - for better styling (4:37)
to Redirect (1:55)
useNavigate() hook (3:58)
Source Code
(Older) Version 5 - React Router [SPA-Single Page Application]
Multi-page Application(MPA)/Single-page Application(SPA) Basics (3:18)
Defining Routes (10:48)
Route Matchers - and exact (6:05)
Route Parameters & Dynamic Routes with useParams hook (9:06)
Nested Route, match object and useRouteMatch() hook (10:10)
Redirect (2:56)
No Match(404) (5:10)
NavLink Vs. Link (6:13)
useHistory() hook (6:09)
Preventing Navigation - Prompt (5:32)
Query Parameters (8:24)
Source Code
Context API
“prop” drilling (5:10)
First Step - All in App.js (3:24)
Creating Cart and Total component (4:03)
context API - Implementation (13:00)
useContext() - New and Better Consumer! (4:33)
Source Code
Redux
Redux - Introduction (10:21)
Setting-up the redux-demo Application (6:29)
Creating Global Store and Reducer (5:20)
Providing store with Provider (3:00)
useSelector() hook (6:18)
useDispatch() hook (14:42)
Class Component - Accessing store in class component (7:04)
Action Creator and Event Dispatching (Class Component) (7:45)
Delete Cart Item (6:09)
Combine Reducers Part-1 (6:33)
Combine Reducers Part-2 (6:55)
Action Type Constants (5:56)
Source Code
Asynchronous Redux
Why Asynchronous Redux? (3:46)
Action Creator - validateUser() (4:40)
redux-thunk (5:28)
Redux Toolkit (RTK) - Modern Redux
Redux Toolkit(RTK) - Introduction _ Installation (3:19)
Creating Slice (12:30)
configureStore() - Store creation (3:19)
Dispatching Actions - The RTK way (6:10)
thunk - Asynchronous (4:25)
Handling Http Requests
Http Requests - Introduction (2:20)
fetch Api - Refresher (12:27)
Fetching Data (7:52)
Displaying Users Data (4:17)
Creating Components - Users/Todos (8:17)
Conditional Rendering Implementation (3:32)
Error Handling (8:12)
Source Code
Custom Hooks
Rules Of Hooks (2:41)
Custom Hooks (6:02)
Fetching Data Using Custom Hooks (5:16)
Source Code
React with TypeScript
Introduction (1:17)
Installing TypeScript Compiler (5:05)
Variables and Datatypes (8:04)
Type Annotation and Inference (4:56)
Creating React and TypeScript Project (2:23)
React.FC - TypeScript FunctionalComponent (6:18)
Interface and Optional Attributes (3:55)
useState() with TypeScript (3:02)
onClick - Event Handling with TypeScript (3:30)
onChange - EventHandling with TypeScript (3:00)
select - Working with Dropdown (2:06)
useRef() with TypeScript (3:31)
Source Code
Automated Testing in React
Introduction to Automated Testing (2:14)
Types of Automated Tests (2:15)
Jest Vs. Enzyme (3:10)
React Project and Testing - First Step (5:12)
Understanding TDD - Test Driven Development (1:46)
Beginning Practical Test (11:11)
getByTestId() and data-testid (2:27)
Button Click Test - fireEvent (5:02)
userEvent Vs. fireEvent (3:57)
Matchers - toBe() or not.toBe() and more (3:55)
Test with input element (5:30)
Resolving Input Change Issue (3:10)
Asynchronous Testing (7:33)
Mock Test - Mocking fetch() API (4:08)
beforeEach() and afterEach() (2:22)
Snapshot Testing (6:17)
Source Code
eStore Project with React 18 + New features
Introduction - MERN Stack eStore Project (1:20)
Beginning With Header Component (5:03)
Adding Search Bar With Icon (4:32)
Category Dropdown In Search Bar (2:53)
Login, Wishlist and Cart Icons (5:57)
Creating React TopNav Component (4:27)
Implementing SCSS (4:29)
CatNav - Category Navigation (5:42)
Applying Transition Effect (3:13)
Global CSS with mixins and variables (4:43)
SideNav (5:27)
Creating Accordion (5:46)
Making the Accordion Collapsible (2:24)
Converting Transition into Global Mixin (3:54)
Creating Products Component (6:35)
Styling the Product Card (5:24)
Mapping the Product Cards (3:22)
Rating section in the product card (1:46)
Implementing Flex For Better Responsiveness (3:52)
What and Why Git / Github? (3:05)
Configuring the Project Repository (4:15)
Configuring the Branch in Git (2:40)
Configuring Redux Tool-Kit(RTK) (2:03)
Implementing RTK in CatNav Component (3:40)
Implementing RTK for the Products Component (1:28)
Implementing RTK for the Accordion Categories (4:10)
Configuring MySQL (3:34)
Creating the Database (3:52)
Creating Node Server with Express.js (3:11)
Configuring API Endpoints/Routes (2:33)
Configuring nodemon (1:35)
Connecting with MySQL (3:25)
Data Fetching with SQL Query (2:02)
createPool() - No Need for getConnection() (1:27)
Organizing Routes (2:16)
Configuring Routes with “express.Router()” (1:21)
Inserting and Fetching all Parent Categories (1:31)
Organizing the RTK Code (2:10)
Configuring the Reducer and Action for CatNav (4:05)
Fetching the Category Data from Database (2:09)
Fetching Categories for Accordion (3:14)
Adding the Products Endpoint / Route (2:57)
Rendering the Products Data (3:33)
Adding the Cart Button (3:03)
Creating the Cart Slice (1:51)
Applying Cart Functionalities (4:03)
Displaying the Cart Item Count (3:46)
Filtering Products by Categories (4:51)
Setting Up Price Filter UI (3:34)
Adding Price Filter Feature (3:32)
Configuring the React Router 6 - SPA (2:32)
Configuring the ProductDetails (2:20)
Filling the Data in ProductDetails Component (3:25)
Styling the ProductDetails Component (5:09)
Enabling Cart In ProductDetails (1:08)
Creating the Cart Component (1:39)
Conditional Rendering in Cart Component (1:44)
Completing the EmptyCart Component (2:59)
Rendering Data in FilledCart Component (7:04)
Styling the FilledCart Component (3:17)
Rendering the Cart Item Quantity (2:19)
Implementing the Cart Item Quantity (5:05)
Deleting Cart Items (2:53)
Configuring the Google OAuth (4:07)
Displaying Logged-in User Name (2:38)
Source Code
context and useOutletContext() hook - Passing data to child component
Lesson content locked
If you're already enrolled,
you'll need to login
.
Enroll in Course to Unlock