React & Typescript - The Practical Guide

Build type-safe React apps & use TypeScript to enhance your components, state management, Redux & side effects code.

What you'll learn

Learn how to build React apps with TypeScript

Get a structured introduction to TypeScript

Use both basic & advanced TypeScript concepts

Build dynamic & highly flexible components with React & TypeScript

Build advanced & highly dynamic components in a type-safe way

Use TypeScript with React's Context API & useReducer() Hook

Manage state and events with React and TypeScript

Use TypeScript with Redux for type-safe global state management

Requirements

Basic React knowledge of core concepts (components, JSX, state) is needed

NO prior TypeScript knowledge is required

Description

TypeScript is an amazing technology that helps developers write better code with less errors - simply because it let's you catch & fix type-related errors whilst writing the code (instead of when testing the application).But using TypeScript with React can sometimes be tricky. Especially when building more complex, dynamic components, defining the right types can be challenging.That's why I built this course!Because this course will teach you how to use TypeScript with React - and, of course, the course will introduce you to all the core concepts & patterns you need to work with components, state, side effects & more in a type-safe way!This course will:Teach you WHY using TypeScript in your React projects might be a good ideaIntroduce you to the key TypeScript concepts you'll need - when working with React & in generalGet you started with using TypeScript with React - for components, state & moreExplore more advanced, complex patterns & examplesHelp you with building dynamic or even polymorphic components in a type-safe wayTeach you how to use TypeScript with React's Context APIExplore how you can enhance code used with useReducer() with help of TypeScriptCover data fetching & useEffect() with TypeScriptUse the popular Redux library in a type-safe wayBuild or improve multiple demo projects so that can apply your knowledgeBy the end of the course, you'll be able to use TypeScript in your own (future) React projects and write better, more type-safe code.Course prerequisites:NO prior TypeScript knowledge is required - though basic knowledge will help (but the course includes an introduction module)Basic React knowledge (components, JSX, state) IS required - more advanced concepts will be explained though

Overview

Section 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

Section 2: TypeScript Basics & Core Concepts

Lecture 7 Module Introduction

Lecture 8 TypeScript Setup & Using TypeScript

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

Lecture 10 Basic Primitive Types

Lecture 11 Invoking The TypeScript Compiler

Lecture 12 Combining Types Union Types (Alternative Types)

Lecture 13 Working with Object Types

Lecture 14 Working with Array Types

Lecture 15 Adding Types to Functions - Parameter & Return Value Types

Lecture 16 Defining Function Types

Lecture 17 Creating Custom Types / Type Aliases

Lecture 18 Defining Object Types with Interfaces

Lecture 19 Interfaces vs Custom Types

Lecture 20 Being Specific With Literal Types

Lecture 21 Merging Types

Lecture 22 Adding Type Guards

Lecture 23 Type Guards & Type Narrowing - A Closer Look

Lecture 24 Making Sense Of Generic Types

Lecture 25 Summary

Section 3: Using TypeScript with React - Essentials

Lecture 26 Module Introduction

Lecture 27 Creating a React + TypeScript Project

Lecture 28 Understanding the Role of tsconfig.json

Lecture 29 Building a First Component & Facing a Missing Type

Lecture 30 Defining Component Props Types

Lecture 31 Component Props & The Special "key" Prop

Lecture 32 Storing Props Types as a Custom Type or Interface

Lecture 33 Defining a Type for Props with "children"

Lecture 34 Another Way Of Typing Components

Lecture 35 Exercise: Creating a Header Component

Lecture 36 Using useState() and TypeScript

Lecture 37 Working with State & Outputting State-based Values

Lecture 38 Another Exercise & Reusing Types Across Files

Lecture 39 Passing Functions as Values - In A Type-Safe Way

Lecture 40 Handling & Typing Events

Lecture 41 Working with Generic Event Types

Lecture 42 Using useRef() with TypeScript

Lecture 43 Handling User Input In A Type-Safe Way

Lecture 44 Summary

Section 4: Advanced Component Types - Dynamic Components, Polymorphic Components & More

Lecture 45 Module Introduction

Lecture 46 Building a More Dynamic & Flexible Component

Lecture 47 Problem: Flexible Components With Required Prop Combinations

Lecture 48 Solution: Building Components with Discriminated Unions

Lecture 49 Onwards To A New Project

Lecture 50 Building a Basic Wrapper Component

Lecture 51 Building Better Wrapper Components with ComponentPropsWithoutRef

Lecture 52 Building a Wrapper Component That Renders Different Elements

Lecture 53 Working with Type Predicates & Facing TypeScript Limitations

Lecture 54 Building a Basic Polymorphic Component

Lecture 55 Building a Better Polymorphic Component with Generics

Lecture 56 Examples: More Component Ideas

Lecture 57 Using forwardRef with TypeScript

Lecture 58 Building Another Wrapper Component (Custom Form Component)

Lecture 59 Sharing Logic with "unknown" & Type Casting

Lecture 60 Alternative: Avoiding Type Casting with "as"

Lecture 61 Exposing Component APIs with useImperativeHandle (with TypeScript)

Lecture 62 Summary

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

Lecture 63 Module Introduction

Lecture 64 The Starting Project

Lecture 65 Creating a Context & Fitting Types

Lecture 66 Creating a Type-Safe Provider Component

Lecture 67 Accessing Context Type-Safe With A Custom Hook

Lecture 68 Getting Started with useReducer() & TypeScript

Lecture 69 A Basic Reducer Function & A Basic Action Type

Lecture 70 Changing State via the Reducer Function

Lecture 71 Using Better Action Types

Lecture 72 Wiring Everything Up & Finishing the App

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

Lecture 73 Module Introduction

Lecture 74 Creating a First Side Effect

Lecture 75 Using useEffect() with TypeScript

Lecture 76 Managing An Interval With Refs & The Effect Cleanup Function

Lecture 77 useEffect() & Its Dependencies

Lecture 78 A Small Bug & Its Solution

Lecture 79 Onwards to Data Fetching!

Lecture 80 Building a Utility "get" Function with TypeScript

Lecture 81 Fetching & Transforming Data

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

Lecture 83 Alternative: A Generic "get" Function

Lecture 84 Handling Loading & Error States

Section 7: Using Redux with TypeScript

Lecture 85 Module Introduction

Lecture 86 The Starting Project

Lecture 87 Redux Setup

Lecture 88 Creating a Redux Store & A First Slice

Lecture 89 Setting a State Type

Lecture 90 A First Reducer & Controlling the Action Payload Type

Lecture 91 Adding Logic To The Reducer

Lecture 92 Providing the Redux Store

Lecture 93 Dispatching Actions & Adjusting the useDispatch Hook

Lecture 94 Creating a Type-Safe useSelector Hook

Lecture 95 Selecting & Transforming Redux Store Data

Lecture 96 Finishing Touches & Summary

Section 8: Practice Project: A "Book a Session" Management Application

Lecture 97 Your Task

Lecture 98 Your Task - Details

Lecture 99 Hints

Lecture 100 An Example Solution

React developers who want to improve the quality & type-safety of their codebase,TypeScript developers who want to apply their knowledge to React apps