Penn Health Institute > Development > Web Development > React & TypeScript – The Practical Guide
4.73 out of 5
4.73
674 reviews on Udemy

React & TypeScript – The Practical Guide

Build type-safe React apps & use TypeScript to enhance your components, state management, Redux & side effects code.
Instructor:
Academind by Maximilian Schwarzmüller
7,307 students enrolled
English [CC]
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

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 immediately 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!

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 idea

  • Introduce you to the key TypeScript concepts you’ll need – when working with React & in general

  • Get you started with using TypeScript with React – for components, state & more

  • Explore more advanced, complex patterns & examples

  • Help you with building dynamic or even polymorphic components in a type-safe way

  • Teach you how to use TypeScript with React’s Context API

  • Explore how you can enhance code used with useReducer() with help of TypeScript

  • Cover data fetching & useEffect() with TypeScript

  • Use the popular Redux library in a type-safe way

  • Build or improve multiple demo projects so that can apply your knowledge

By 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

Introduction

1
Welcome To The Course!
2
Why React & TypeScript?
3
About The Course & Course Content
4
How To Get The Most Out Of The Course
5
Learning Community & Course Resources
6
Creating & Using React + TypeScript Projects

TypeScript Basics & Core Concepts

1
Module Introduction
2
TypeScript Setup & Using TypeScript
3
Working with Types: Type Inference & Explicit Type Annotations
4
Basic Primitive Types
5
Invoking The TypeScript Compiler
6
Combining Types Union Types (Alternative Types)
7
Working with Object Types
8
Working with Array Types
9
Adding Types to Functions - Parameter & Return Value Types
10
Defining Function Types
11
Creating Custom Types / Type Aliases
12
Defining Object Types with Interfaces
13
Interfaces vs Custom Types
14
Merging Types
15
Being Specific With Literal Types
16
Adding Type Guards
17
Type Guards & Type Narrowing - A Closer Look
18
Making Sense Of Generic Types
19
Summary

Using TypeScript with React - Essentials

1
Module Introduction
2
Creating a React + TypeScript Project
3
Understanding the Role of tsconfig.json
4
Building a First Component & Facing a Missing Type
5
Defining Component Props Types
6
Storing Props Types as a Custom Type or Interface
7
Defining a Type for Props with "children"
8
Component Props & The Special "key" Prop
9
Another Way Of Typing Components
10
Exercise: Creating a Header Component
11
Using useState() and TypeScript
12
Working with State & Outputting State-based Values
13
Another Exercise & Reusing Types Across Files
14
Passing Functions as Values - In A Type-Safe Way
15
Handling & Typing Events
16
Working with Generic Event Types
17
Using useRef() with TypeScript
18
Handling User Input In A Type-Safe Way
19
Summary

Advanced Component Types - Dynamic Components, Polymorphic Components & More

1
Module Introduction
2
Building a More Dynamic & Flexible Component
3
Problem: Flexible Components With Required Prop Combinations
4
Solution: Building Components with Discriminated Unions
5
Onwards To A New Project
6
Building a Basic Wrapper Component
7
Building Better Wrapper Components with ComponentPropsWithoutRef
8
Building a Wrapper Component That Renders Different Elements
9
Working with Type Predicates & Facing TypeScript Limitations
10
Building a Basic Polymorphic Component
11
Building a Better Polymorphic Component with Generics
12
Examples: More Component Ideas
13
Using forwardRef with TypeScript
14
Building Another Wrapper Component (Custom Form Component)
15
Sharing Logic with "unknown" & Type Casting
16
Exposing Component APIs with useImperativeHandle (with TypeScript)
17
Alternative: Avoiding Type Casting with "as"
18
Summary

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

1
Module Introduction
2
The Starting Project
3
Creating a Context & Fitting Types
4
Creating a Type-Safe Provider Component
5
Accessing Context Type-Safe With A Custom Hook
6
Getting Started with useReducer() & TypeScript
7
A Basic Reducer Function & A Basic Action Type
8
Changing State via the Reducer Function
9
Using Better Action Types
10
Wiring Everything Up & Finishing the App

Side Effects, useEffect() & Data Fetching with TypeScript

1
Module Introduction
2
Creating a First Side Effect
3
Using useEffect() with TypeScript
4
Managing An Interval With Refs & The Effect Cleanup Function
5
useEffect() & Its Dependencies
6
A Small Bug & Its Solution
7
Onwards to Data Fetching!
8
Building a Utility "get" Function with TypeScript
9
Fetching & Transforming Data
10
Alternative: Using the "zod" Library for Response Data Validation
11
Alternative: A Generic "get" Function
12
Handling Loading & Error States

Using Redux with TypeScript

1
Module Introduction
2
The Starting Project
3
Redux Setup
4
Creating a Redux Store & A First Slice
5
Setting a State Type
6
A First Reducer & Controlling the Action Payload Type
7
Adding Logic To The Reducer
8
Providing the Redux Store
9
Dispatching Actions & Adjusting the useDispatch Hook
You can view and review the lecture materials indefinitely, like an on-demand channel.
Definitely! If you have an internet connection, courses on Udemy are available on any device at any time. If you don't have an internet connection, some instructors also let their students download course lectures. That's up to the instructor though, so make sure you get on their good side!
4.7
4.7 out of 5
674 Ratings

Detailed Rating

Stars 5
471
Stars 4
160
Stars 3
23
Stars 2
3
Stars 1
4
62c8cf19ee66eff254e197c7818f88fd
Get course
Available in "Elite Learner Membership" plan Available in "ProSkill Access Plan" plan Available in "MasterClass Membership" plan

Includes

7 hours on-demand video
12 articles
1 lectures
Certificate of Completion