[Master Class] Deep Dive into React 18 + Typescript

Course Curriculum

Chapter 1: Introduction

Lecture 1: Introduction

Lecture 2: Your Instructor

Lecture 3: Why React?

Lecture 4: Typescript Overview

Chapter 2: Refresh your Javascript Skills

Lecture 1: Introduction

Lecture 2: Lecture for this course

Lecture 3: Var, Let and Const

Lecture 4: Var, Let and Const – Hands On

Lecture 5: Logical OR and AND

Lecture 6: Logical OR and AND – Hands On

Lecture 7: Primitive Values vs Reference Type

Lecture 8: Primitive Values vs Reference Type – Hands On

Lecture 9: Shallow and Deep Copy

Lecture 10: Shallow and Deep Copy – Hands On

Lecture 11: Spread Operator, Rest Parameter, Destructuring

Lecture 12: Spread Operator, Rest Parameter, Destructuring – Hands On

Lecture 13: Class

Lecture 14: Class – Hands On

Lecture 15: This Object + Arrow Function

Lecture 16: This Object + Arrow Function – Hands On

Lecture 17: Promises and Async+Await

Lecture 18: Promises and Async+Await – Hands On

Lecture 19: Export & Import

Lecture 20: Summary

Chapter 3: Play with React Components!

Lecture 1: Introduction

Lecture 2: Setup Environment

Lecture 3: You can use Vite instead of craete-react-app

Lecture 4: Component & Props

Lecture 5: Style & Class

Lecture 6: List & Keys

Lecture 7: Conditional Rendering

Lecture 8: React Dev Tools

Lecture 9: Lifecycle of a Component

Lecture 10: (Solution) Assignment: Create a Simple UI

Lecture 11: Before we jump to Hooks!

Chapter 4: React Hooks: State Manipulation

Lecture 1: Introduction

Lecture 2: useState Hooks

Lecture 3: useState with Objects & StrictMode

Lecture 4: Controlled & Uncontrolled Components

Lecture 5: useReducer Hooks

Lecture 6: useReducer – Advance

Lecture 7: useReducer vs useState

Lecture 8: Context & useContext

Lecture 9: useReducer & useContext

Lecture 10: useSyncExternalStore

Lecture 11: (Solution) Assignment: My Book App

Lecture 12: Batching Updates

Chapter 5: React Refs: Unlocking the Power of DOM Manipulation

Lecture 1: Introduction

Lecture 2: useRef Hook!

Lecture 3: Manipulating DOM with Refs

Lecture 4: callback Refs

Lecture 5: Forwarding Ref (Add Ref to your component)

Lecture 6: useImperativeHandle Hook!

Lecture 7: (Solution) Survey Form App

Lecture 8: Display Name in React Dev Tools

Chapter 6: Unlock the power of side effects! How does it work?

Lecture 1: Introduction

Lecture 2: useEffect

Lecture 3: useEffect vs Class Components

Lecture 4: useLayoutEffect

Lecture 5: useInsertion Effect

Lecture 6: Reflow and Repaint

Lecture 7: Caution!

Lecture 8: (Solution) Assignment – Users App

Chapter 7: Performance & Optimizations + Understanding React Core Algorithm

Lecture 1: Introduction

Lecture 2: memo

Lecture 3: useMemo

Lecture 4: useCallback

Lecture 5: Transitions

Lecture 6: useDeferredValue

Lecture 7: Render & Commit Phase

Lecture 8: React Fiber

Lecture 9: Lazy & Suspense

Lecture 10: Understanding Suspense

Lecture 11: Profiler (React Dev Tools)

Lecture 12: Profiler Component

Chapter 8: More Hooks + Create your own!

Lecture 1: Introduction

Lecture 2: useId

Lecture 3: Create a Custom Hook!

Lecture 4: useDebugValue

Lecture 5: (Solution) Assignment – Create Custom Hook

Chapter 9: Thank You and Congratulations!

Lecture 1: Congratulations!