React & TypeScript – The Practical Guide

Course Curriculum

Chapter 1: Introduction

Lecture 1: Welcome To The Course!

Lecture 2: Why React & TypeScript?

Lecture 3: About The Course & Course Content

Lecture 4: How To Get The Most Out Of The Course

Lecture 5: Learning Community & Course Resources

Lecture 6: Creating & Using React + TypeScript Projects

Lecture 7: Course Setup

Chapter 2: TypeScript Basics & Core Concepts

Lecture 1: Module Introduction

Lecture 2: TypeScript Setup & Using TypeScript

Lecture 3: Working with Types: Type Inference & Explicit Type Annotations

Lecture 4: Basic Primitive Types

Lecture 5: Invoking The TypeScript Compiler

Lecture 6: Combining Types Union Types (Alternative Types)

Lecture 7: Working with Object Types

Lecture 8: Working with Array Types

Lecture 9: Adding Types to Functions – Parameter & Return Value Types

Lecture 10: Defining Function Types

Lecture 11: Creating Custom Types / Type Aliases

Lecture 12: Defining Object Types with Interfaces

Lecture 13: Interfaces vs Custom Types

Lecture 14: Merging Types

Lecture 15: Being Specific With Literal Types

Lecture 16: Adding Type Guards

Lecture 17: Type Guards & Type Narrowing – A Closer Look

Lecture 18: Making Sense Of Generic Types

Lecture 19: Summary

Chapter 3: Using TypeScript with React – Essentials

Lecture 1: Module Introduction

Lecture 2: Creating a React + TypeScript Project

Lecture 3: Understanding the Role of tsconfig.json

Lecture 4: Building a First Component & Facing a Missing Type

Lecture 5: Defining Component Props Types

Lecture 6: Storing Props Types as a Custom Type or Interface

Lecture 7: Defining a Type for Props with "children"

Lecture 8: Component Props & The Special "key" Prop

Lecture 9: Another Way Of Typing Components

Lecture 10: Exercise: Creating a Header Component

Lecture 11: Using useState() and TypeScript

Lecture 12: Working with State & Outputting State-based Values

Lecture 13: Another Exercise & Reusing Types Across Files

Lecture 14: Passing Functions as Values – In A Type-Safe Way

Lecture 15: Handling & Typing Events

Lecture 16: Working with Generic Event Types

Lecture 17: Using useRef() with TypeScript

Lecture 18: Handling User Input In A Type-Safe Way

Lecture 19: Summary

Chapter 4: Advanced Component Types – Dynamic Components, Polymorphic Components & More

Lecture 1: Module Introduction

Lecture 2: Building a More Dynamic & Flexible Component

Lecture 3: Problem: Flexible Components With Required Prop Combinations

Lecture 4: Solution: Building Components with Discriminated Unions

Lecture 5: Onwards To A New Project

Lecture 6: Building a Basic Wrapper Component

Lecture 7: Building Better Wrapper Components with ComponentPropsWithoutRef

Lecture 8: Building a Wrapper Component That Renders Different Elements

Lecture 9: Working with Type Predicates & Facing TypeScript Limitations

Lecture 10: Building a Basic Polymorphic Component

Lecture 11: Building a Better Polymorphic Component with Generics

Lecture 12: Examples: More Component Ideas

Lecture 13: Using forwardRef with TypeScript

Lecture 14: Building Another Wrapper Component (Custom Form Component)

Lecture 15: Sharing Logic with "unknown" & Type Casting

Lecture 16: Exposing Component APIs with useImperativeHandle (with TypeScript)

Lecture 17: Alternative: Avoiding Type Casting with "as"

Lecture 18: Summary

Chapter 5: Advanced Type-Safe State with Context API & useReducer()

Lecture 1: Module Introduction

Lecture 2: The Starting Project

Lecture 3: Creating a Context & Fitting Types

Lecture 4: Creating a Type-Safe Provider Component

Lecture 5: Accessing Context Type-Safe With A Custom Hook

Lecture 6: Getting Started with useReducer() & TypeScript

Lecture 7: A Basic Reducer Function & A Basic Action Type

Lecture 8: Changing State via the Reducer Function

Lecture 9: Using Better Action Types

Lecture 10: Wiring Everything Up & Finishing the App

Chapter 6: Side Effects, useEffect() & Data Fetching with TypeScript

Lecture 1: Module Introduction

Lecture 2: Creating a First Side Effect

Lecture 3: Using useEffect() with TypeScript

Lecture 4: Managing An Interval With Refs & The Effect Cleanup Function

Lecture 5: useEffect() & Its Dependencies

Lecture 6: A Small Bug & Its Solution

Lecture 7: Onwards to Data Fetching!

Lecture 8: Building a Utility "get" Function with TypeScript

Lecture 9: Fetching & Transforming Data

Lecture 10: Alternative: Using the "zod" Library for Response Data Validation

Lecture 11: Alternative: A Generic "get" Function

Lecture 12: Handling Loading & Error States

Chapter 7: Using Redux with TypeScript

Lecture 1: Module Introduction

Lecture 2: The Starting Project

Lecture 3: Redux Setup

Lecture 4: Creating a Redux Store & A First Slice

Lecture 5: Setting a State Type

Lecture 6: A First Reducer & Controlling the Action Payload Type

Lecture 7: Adding Logic To The Reducer

Lecture 8: Providing the Redux Store