Mastering React With Interview Questions,eStore Project-2024

Course Curriculum

Chapter 1: React Fundamentals

Lecture 1: Introduction

Lecture 2: React Is Declarative

Lecture 3: Component Based Architecture

Lecture 4: Creating & Understanding React Project Architecture

Lecture 5: npm vs. npx

Lecture 6: React 18 – Goodbye ReactDOM.render()

Lecture 7: React 18 – Migrating from v17 to v18

Lecture 8: "props" Destructuring

Lecture 9: Concept of State & useState() Hook

Lecture 10: Lazy Initial State

Lecture 11: Basic Event Handling & Parameter Passing

Lecture 12: Applying External & Inline Styling

Lecture 13: JSX – In-depth

Lecture 14: New JSX Transform

Lecture 15: Primitive Types & Object Literal with useState()

Lecture 16: Class Component Basics

Lecture 17: Class Component "state" update with setState()

Lecture 18: Component Lifecycle Methods Basics

Lecture 19: useEffect() – Creating A Digital Clock Using useEffect()

Lecture 20: useEffect() Multiple States & Skipping Effects For Optimization

Lecture 21: Conditional Rendering – Cleaning Up An Effect

Lecture 22: "ref" – The Older way

Lecture 23: React.createRef() method

Lecture 24: useRef() hook

Lecture 25: React.memo() & useCallback() hook

Chapter 2: List & Keys

Lecture 1: Introduction

Lecture 2: map() method

Lecture 3: String Array Rendering

Lecture 4: Keys

Lecture 5: Fixed Stable Keys

Lecture 6: List With A Component

Lecture 7: Embedding map() In JSX

Chapter 3: "props" & JSX – In Depth

Lecture 1: Introduction

Lecture 2: Expression & String Literals

Lecture 3: "props" default to True

Lecture 4: Spread Attributes

Lecture 5: props.children property

Lecture 6: <React.Fragment>

Chapter 4: Event Handling – In-Depth

Lecture 1: Event Handling – In-depth Introduction

Lecture 2: Quick Essential Recap – Events

Lecture 3: SyntheticEvent

Lecture 4: Input Event – Textbox

Lecture 5: preventDefault – Preventing default behavior

Lecture 6: <form> with Multiple States

Lecture 7: <form> – States as Object

Lecture 8: Single Event Handler Using Dynamic Key

Lecture 9: Functional Update – The Correct Way

Lecture 10: Checkbox or Radio – Input fields

Chapter 5: Conditional Rendering – In-Depth

Lecture 1: Introduction

Lecture 2: Conditional Rendering with if…else…

Lecture 3: Inline if-else [ condition? true: false]

Lecture 4: JSX – Element Variable

Lecture 5: switch…case…

Lecture 6: Logical && Operator

Chapter 6: React Router Version 6 [SPA-Single Page Application]

Lecture 1: MPA vs. SPA

Lecture 2: Defining Routes

Lecture 3: Menu Formatting

Lecture 4: URL Vs. Routes & Default Page Setup

Lecture 5: Dynamic Routes – useParams() hook

Lecture 6: Nested Routes – <Outlet/>

Lecture 7: Not Found Page (404)

Lecture 8: index Attribute – Referring The Parent Route

Lecture 9: Dynamic Products Data – useState() & route Configuration

Lecture 10: context & useOutletContext() hook – Passing Data To Child Component

Lecture 11: "state" & useLocation() hook – The Correct Way Of Data Sharing

Lecture 12: Improvizing The Interface

Lecture 13: useRoutes() hook – Javascript instead of JSX

Lecture 14: NavLink – For Better Styling

Lecture 15: <Navigate> To Redirect

Lecture 16: useNavigate() hook

Chapter 7: (Older) Version 5 – React Router [SPA-Single Page Application]

Lecture 1: Multi-page Application(MPA)/Single-page Application(SPA) Basics

Lecture 2: Defining Routes

Lecture 3: Route Matchers – <Switch> & exact

Lecture 4: Route Parameters & Dynamic Routes with useParams hook

Lecture 5: Nested Route, match object & useRouteMatch() hook

Lecture 6: Redirect

Lecture 7: NoMatch(404)

Lecture 8: <NavLink> Vs. <Link>

Lecture 9: useHistory() hook

Lecture 10: Preventing Navigation – <Prompt>

Lecture 11: Query Parameters

Chapter 8: Context API

Lecture 1: “prop” drilling

Lecture 2: First Step – All in App.js

Lecture 3: Creating Cart & Total component

Lecture 4: context API – Implementation

Lecture 5: useContext() – New & Better Consumer!

Chapter 9: Redux

Lecture 1: Redux – Introduction

Lecture 2: Setting-up the redux-demo Application

Lecture 3: Creating Global Store & Reducer

Lecture 4: Providing store with Provider

Lecture 5: useSelector() hook