Autoplay
Autocomplete
Previous Lecture
Complete and Continue
React & TypeScript - The Practical Guide
Introduction
Welcome To The Course! (1:26)
Why React & TypeScript? (1:56)
About The Course & Course Content (1:46)
How To Get The Most Out Of The Course (2:59)
Learning Community & Course Resources
Creating & Using React + TypeScript Projects (1:00)
TypeScript Basics & Core Concepts
Module Introduction (1:13)
TypeScript Setup & Using TypeScript (3:01)
Working with Types: Type Inference & Explicit Type Annotations (7:46)
Basic Primitive Types (1:08)
Invoking The TypeScript Compiler (3:13)
Combining Types Union Types (Alternative Types) (2:21)
Working with Object Types (5:39)
Working with Array Types (3:59)
Adding Types to Functions - Parameter & Return Value Types (5:04)
Defining Function Types (3:28)
Creating Custom Types / Type Aliases (3:57)
Defining Object Types with Interfaces (3:06)
Interfaces vs Custom Types (4:24)
Being Specific With Literal Types (4:21)
Merging Types (3:05)
Adding Type Guards (3:42)
Type Guards & Type Narrowing - A Closer Look
Making Sense Of Generic Types (12:20)
Summary (0:35)
Using TypeScript with React - Essentials
Module Introduction (1:13)
Creating a React + TypeScript Project (6:31)
Understanding the Role of tsconfig.json (5:04)
Building a First Component & Facing a Missing Type (5:47)
Defining Component Props Types (4:05)
Storing Props Types as a Custom Type or Interface (2:04)
Defining a Type for Props with "children" (7:02)
Component Props & The Special "key" Prop
Another Way Of Typing Components (3:18)
Exercise: Creating a Header Component (6:11)
Using useState() and TypeScript (6:39)
Working with State & Outputting State-based Values (5:49)
Another Exercise & Reusing Types Across Files (7:31)
Passing Functions as Values - In A Type-Safe Way (10:07)
Handling & Typing Events (8:00)
Working with Generic Event Types (4:24)
Using useRef() with TypeScript (8:50)
Handling User Input In A Type-Safe Way (5:08)
Summary (1:42)
Advanced Component Types - Dynamic Components, Polymorphic Components & More
Module Introduction (1:31)
Building a More Dynamic & Flexible Component (11:08)
Problem: Flexible Components With Required Prop Combinations (6:19)
Solution: Building Components with Discriminated Unions (6:06)
Onwards To A New Project (1:14)
Building a Basic Wrapper Component (4:56)
Building Better Wrapper Components with ComponentPropsWithoutRef (7:25)
Building a Wrapper Component That Renders Different Elements (7:05)
Working with Type Predicates & Facing TypeScript Limitations (10:51)
Building a Basic Polymorphic Component (5:26)
Building a Better Polymorphic Component with Generics (10:06)
Examples: More Component Ideas
Using forwardRef with TypeScript (7:32)
Building Another Wrapper Component (Custom Form Component) (3:45)
Sharing Logic with "unknown" & Type Casting (10:10)
Exposing Component APIs with useImperativeHandle (with TypeScript) (9:58)
Alternative: Avoiding Type Casting with "as"
Summary (0:57)
Advanced Type-Safe State with Context API & useReducer()
The Starting Project (1:39)
Module Introduction (0:59)
Creating a Context & Fitting Types (7:07)
Creating a Type-Safe Provider Component (4:40)
Accessing Context Type-Safe With A Custom Hook (6:33)
Getting Started with useReducer() & TypeScript (3:15)
A Basic Reducer Function & A Basic Action Type (6:28)
Changing State via the Reducer Function (2:43)
Using Better Action Types (5:47)
Wiring Everything Up & Finishing the App (7:26)
Side Effects, useEffect() & Data Fetching with TypeScript
Module Introduction (0:46)
Creating a First Side Effect (4:45)
Using useEffect() with TypeScript (4:31)
A Small Bug & Its Solution
Managing An Interval With Refs & The Effect Cleanup Function (8:53)
useEffect() & Its Dependencies (5:45)
Onwards to Data Fetching! (2:10)
Building a Utility "get" Function with TypeScript (7:00)
Fetching & Transforming Data (13:27)
Alternative: Using the "zod" Library for Response Data Validation
Alternative: A Generic "get" Function
Handling Loading & Error States (8:14)
Using Redux with TypeScript
The Starting Project (2:58)
Module Introduction (1:04)
Redux Setup (1:18)
Creating a Redux Store & A First Slice (5:17)
Setting a State Type (2:40)
A First Reducer & Controlling the Action Payload Type (3:28)
Adding Logic To The Reducer (6:17)
Providing the Redux Store (2:34)
Dispatching Actions & Adjusting the useDispatch Hook (8:25)
Creating a Type-Safe useSelector Hook (5:15)
Selecting & Transforming Redux Store Data (3:36)
Finishing Touches & Summary (9:00)
Practice Project: A "Book a Session" Management Application
Your Task (2:03)
Your Task - Details
Hints
An Example Solution
Exposing Component APIs with useImperativeHandle (with TypeScript)
Lecture content locked
If you're already enrolled,
you'll need to login
.
Enroll in Course to Unlock