Introduction

01:54

React Is Declarative

03:49

Component Based Architecture

18:24

Creating & Understanding React Project Architecture

11:05

npm vs. npx

03:33

React 18 - Goodbye ReactDOM.render()

02:26

React 18 - Migrating from v17 to v18

02:29

"props" Destructuring

09:18

Concept of State & useState() Hook

09:18

Lazy Initial State

06:29

Basic Event Handling & Parameter Passing

08:37

Applying External & Inline Styling

06:44

JSX - In-depth

10:13

New JSX Transform

04:46

Primitive Types & Object Literal with useState()

11:57

Class Component Basics

07:40

Class Component "state" update with setState()

07:15

Component Lifecycle Methods Basics

09:49

useEffect() - Creating A Digital Clock Using useEffect()

08:28

useEffect() Multiple States & Skipping Effects For Optimization

05:17

Conditional Rendering - Cleaning Up An Effect

09:55

"ref" - The Older way

05:16

React.createRef() method

02:49

useRef() hook

03:33

React.memo() & useCallback() hook

17:44

Sample

01:02

Introduction

00:47

map() method

08:51

String Array Rendering

04:16

Keys

02:34

Fixed Stable Keys

04:23

List With A Component

01:50

Embedding map() In JSX

01:50

Expression & String Literals

04:46

"props" default to True

01:23

Spread Attributes

02:53

props.children property

03:03

<React.Fragment>

02:43

Event Handling - In-depth Introduction

00:52

Quick Essential Recap - Events

04:27

SyntheticEvent

05:34

Input Event - Textbox

03:09

preventDefault - Preventing default behavior

05:16

<form> with Multiple States

08:14

<form> - States as Object

06:20

Single Event Handler Using Dynamic Key

05:02

Functional Update - The Correct Way

02:52

Checkbox or Radio - Input fields

03:30

Introduction

01:14

Conditional Rendering with if...else…

07:40

Inline if-else [ condition? true: false]

02:54

JSX - Element Variable

01:45

switch...case…

02:52

Logical && Operator

02:12

MPA vs. SPA

03:25

Defining Routes

13:24

Menu Formatting

01:44

URL Vs. Routes & Default Page Setup

03:14

Dynamic Routes - useParams() hook

10:40

Nested Routes - <Outlet/>

05:12

Not Found Page (404)

03:23

index Attribute - Referring The Parent Route

03:46

Dynamic Products Data - useState() & route Configuration

05:29

context & useOutletContext() hook - Passing Data To Child Component

03:35

"state" & useLocation() hook - The Correct Way Of Data Sharing

03:30

Improvizing The Interface

04:07

useRoutes() hook - Javascript instead of JSX

05:35

NavLink - For Better Styling

04:37

<Navigate> To Redirect

01:55

useNavigate() hook

03:58

Multi-page Application(MPA)/Single-page Application(SPA) Basics

03:18

Defining Routes

10:48

Route Matchers - <Switch> & exact

06:04

Route Parameters & Dynamic Routes with useParams hook

09:05

Nested Route, match object & useRouteMatch() hook

10:10

Redirect

02:55

NoMatch(404)

05:09

<NavLink> Vs. <Link>

06:12

useHistory() hook

06:08

Preventing Navigation - <Prompt>

05:32

Query Parameters

08:24

“prop” drilling

05:10

First Step - All in App.js

03:24

Creating Cart & Total component

04:03

context API - Implementation

12:59

useContext() - New & Better Consumer!

04:33

Redux - Introduction

10:21

Setting-up the redux-demo Application

06:29

Creating Global Store & Reducer

05:19

Providing store with Provider

02:59

useSelector() hook

06:18

useDispatch() hook

14:42

Class Component - Accessing store in class component

07:04

Action Creator & Event Dispatching (Class Component)

07:44

Delete Cart Item

06:09

Combine Reducers Part-1

06:32

Combine Reducers Part-2

06:55

Action Type Constants

05:56

Why Asynchronous Redux ?

03:46

Action Creator - validateUser()

04:39

redux-thunk

05:27

Redux Toolkit(RTK) - Introduction & Installation

03:19

Creating Slice

12:30

configureStore() - Store creation

03:19

Dispatching Actions - The RTK way

06:09

thunk - Asynchronous

04:24

Http Requests - Introduction

02:19

fetch Api - Refresher

12:26

Fetching Data

07:52

Displaying Users Data

04:16

Creating Components - Users/Todos

08:17

Conditional Rendering Implementation

03:32

Error Handling

08:12

Rules Of Hooks

02:41

Custom Hooks

06:02

Fetching Data Using Custom Hooks

05:16

Introduction

02:06

Installing TypeScript Compiler

05:05

Variables & Datatypes

08:04

Type Annotation & Inference

04:55

Creating React & TypeScript Project

02:23

React.FC - TypeScript FunctionalComponent

06:17

Interface & Optional Attributes

03:55

useState() with TypeScript

03:02

onClick - Event Handling with TypeScript

03:30

onChange - EventHandling with TypeScript

03:00

<select> - Working with Dropdown

02:06

useRef() with TypeScript

03:31

Introduction to Automated Testing

02:14

Types of Automated Tests

02:15

Jest Vs. Enzyme

03:10

React Project & Testing - First Step

05:12

Understanding TDD - Test Driven Development

01:46

Beginning Practical Test

11:10

getByTestId() and data-testid

02:27

Button Click Test - fireEvent

05:02

userEvent Vs. fireEvent

03:57

Matchers - toBe() or not.toBe() & more...

03:55

Test with input element

05:30

Resolving Input Change Issue

03:10

Asynchronous Testing

07:33

Mock Test - Mocking fetch() API

04:08

beforeEach() & afterEach()

02:21

Snapshot Testing

06:16

Introduction - MERN Stack eStore Project

01:19

Beginning With Header Component

05:02

Adding Search Bar With Icon

04:32

Category Dropdown In Search Bar

02:53

Login, Wishlist & Cart Icons

05:57

Creating React TopNav Component

04:27

Implementing SCSS

04:29

CatNav - Category Navigation

05:42

Applying Transition Effect

03:13

Global CSS with mixins and variables

04:43

SideNav

05:27

Creating Accordion

05:46

Making the Accordion Collapsible

02:23

Converting Transition into Global Mixin

03:53

Creating Products Component

06:35

Styling the Product Card

05:23

Mapping the Product Cards

03:22

Rating section in the product card

01:46

Implementing Flex For Better Responsiveness

03:51

What and Why Git / Github?

03:05

Configuring the Project Repository

04:14

Configuring the Branch in Git

02:40

Configuring Redux Tool-Kit(RTK)

02:02

Implementing RTK in CatNav Component

03:39

Implementing RTK for the Products Component

01:27

Implementing RTK for the Accordion Categories

04:09

Configuring MySQL

03:34

Creating the Database

03:52

Creating Node Server with Express.js

03:11

Configuring API Endpoints/Routes

02:33

Configuring nodemon

01:35

Connecting with MySQL

03:25

Data Fetching with SQL Query

02:02

createPool() - No Need for getConnection()

01:27

Organizing Routes

02:15

Configuring Routes with “express.Router()”

01:21

Organizing the RTK Code

02:09

Configuring the Reducer and Action for CatNav

04:05

Fetching the Category Data from Database

02:09

Inserting and Fetching all Parent Categories

01:30

Fetching Categories for Accordion

03:14

Adding the Products Endpoint / Route

02:57

Rendering the Products Data

03:32

Adding the Cart Button

03:03

Creating the Cart Slice

01:51

Applying Cart Functionalities

04:03

Displaying the Cart Item Count

03:46

Filtering Products by Categories

04:51

Setting Up Price Filter UI

03:34

Adding Price Filter Feature

03:31

Configuring the React Router 6 - SPA

02:32

Configuring the ProductDetails

02:20