CF

React & TypeScript - The Practical Guide

7h 22m 54s
English
Paid
Released
Added to CourseFlix

React & TypeScript - The Practical Guide is a 89-lesson 7 hours 22 minutes self-paced course by Academind Pro (Maximilian Schwarzmüller). 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).

Course facts

Lessons
89
Duration
7 hours 22 minutes
Language
English
Released
November 2023
Added to CourseFlix
March 2024
Instructor
Academind Pro (Maximilian Schwarzmüller)
Price
Premium

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 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.

Additional

https://github.com/academind/react-typescript-course-resources

Who teaches React & TypeScript - The Practical Guide? Academind Pro (Maximilian Schwarzmüller)

Academind Pro (Maximilian Schwarzmüller) thumbnail

Academind is the teaching brand of Maximilian Schwarzmüller (Max) and Manuel Lorenz, two German developers whose Udemy catalog has become one of the largest single-instructor presences on that platform. Max in particular is widely cited as one of the clearest teachers of the JavaScript framework landscape — his Angular, React, Vue, and Node.js courses have collectively taught millions of students.

The Academind Pro platform extends beyond Udemy with deeper, more comprehensive courses aimed at developers building real applications rather than picking up syntax. Course material covers the full modern web stack: React (including Next.js), Vue, Angular, Node.js, NestJS, TypeScript, Docker, AWS, React Native, Flutter, and the broader full-stack JavaScript ecosystem.

The CourseFlix listing under this source carries over 25 Academind Pro courses spanning that range. Material is paid; Academind Pro runs on per-course pricing on the original platform. Courses are taught in Max's signature thorough, build-an-application-with-me style — long-form, deeply project-based, and continuously updated as the underlying frameworks evolve.

What lessons are included in React & TypeScript - The Practical Guide?

This is a demo lesson (10:00 remaining)

Watch the first 10 minutes free. One payment unlocks all 89 lessons here and every other premium course. No auto-renew.

Watch all 89 lessons from $6.67/mo
0:00
/
#1: Welcome To The Course!
All Course Lessons (89)
#Lesson TitleDurationAccess
1
Welcome To The Course! Demo
01:27
2
Why React & TypeScript?
01:57
3
About The Course & Course Content
01:47
4
How To Get The Most Out Of The Course
03:00
5
Creating & Using React + TypeScript Projects
01:01
6
Module Introduction
01:14
7
TypeScript Setup & Using TypeScript
03:02
8
Working with Types: Type Inference & Explicit Type Annotations
07:47
9
Basic Primitive Types
01:08
10
Invoking The TypeScript Compiler
03:14
11
Combining Types Union Types (Alternative Types)
02:22
12
Working with Object Types
05:40
13
Working with Array Types
04:00
14
Adding Types to Functions - Parameter & Return Value Types
05:05
15
Defining Function Types
03:29
16
Creating Custom Types / Type Aliases
03:58
17
Defining Object Types with Interfaces
03:07
18
Interfaces vs Custom Types
04:25
19
Being Specific With Literal Types
04:22
20
Merging Types
03:06
21
Adding Type Guards
03:43
22
Making Sense Of Generic Types
12:21
23
Summary
00:36
24
Module Introduction
01:14
25
Creating a React + TypeScript Project
06:32
26
Understanding the Role of tsconfig.json
05:05
27
Building a First Component & Facing a Missing Type
05:48
28
Defining Component Props Types
04:06
29
Storing Props Types as a Custom Type or Interface
02:05
30
Defining a Type for Props with "children"
07:03
31
Another Way Of Typing Components
03:19
32
Exercise: Creating a Header Component
06:12
33
Using useState() and TypeScript
06:40
34
Working with State & Outputting State-based Values
05:50
35
Another Exercise & Reusing Types Across Files
07:32
36
Passing Functions as Values - In A Type-Safe Way
10:08
37
Handling & Typing Events
08:01
38
Working with Generic Event Types
04:25
39
Using useRef() with TypeScript
08:51
40
Handling User Input In A Type-Safe Way
05:09
41
Summary
01:43
42
Module Introduction
01:32
43
Building a More Dynamic & Flexible Component
11:09
44
Problem: Flexible Components With Required Prop Combinations
06:20
45
Solution: Building Components with Discriminated Unions
06:07
46
Onwards To A New Project
01:15
47
Building a Basic Wrapper Component
04:57
48
Building Better Wrapper Components with ComponentPropsWithoutRef
07:26
49
Building a Wrapper Component That Renders Different Elements
07:06
50
Working with Type Predicates & Facing TypeScript Limitations
10:52
51
Building a Basic Polymorphic Component
05:27
52
Building a Better Polymorphic Component with Generics
10:07
53
Using forwardRef with TypeScript
07:33
54
Building Another Wrapper Component (Custom Form Component)
03:46
55
Sharing Logic with "unknown" & Type Casting
10:11
56
Exposing Component APIs with useImperativeHandle (with TypeScript)
09:59
57
Summary
00:58
58
The Starting Project
01:40
59
Module Introduction
01:00
60
Creating a Context & Fitting Types
07:08
61
Creating a Type-Safe Provider Component
04:41
62
Accessing Context Type-Safe With A Custom Hook
06:34
63
Getting Started with useReducer() & TypeScript
03:16
64
A Basic Reducer Function & A Basic Action Type
06:29
65
Changing State via the Reducer Function
02:44
66
Using Better Action Types
05:48
67
Wiring Everything Up & Finishing the App
07:27
68
Module Introduction
00:47
69
Creating a First Side Effect
04:46
70
Using useEffect() with TypeScript
04:32
71
Managing An Interval With Refs & The Effect Cleanup Function
08:54
72
useEffect() & Its Dependencies
05:46
73
Onwards to Data Fetching!
02:11
74
Building a Utility "get" Function with TypeScript
07:01
75
Fetching & Transforming Data
13:28
76
Handling Loading & Error States
08:15
77
The Starting Project
02:59
78
Module Introduction
01:05
79
Redux Setup
01:19
80
Creating a Redux Store & A First Slice
05:18
81
Setting a State Type
02:41
82
A First Reducer & Controlling the Action Payload Type
03:29
83
Adding Logic To The Reducer
06:18
84
Providing the Redux Store
02:35
85
Dispatching Actions & Adjusting the useDispatch Hook
08:26
86
Creating a Type-Safe useSelector Hook
05:16
87
Selecting & Transforming Redux Store Data
03:37
88
Finishing Touches & Summary
09:01
89
Your Task
02:04
Watch the other 88 lessons

One payment unlocks this course and every other premium course. No auto-renew.

See plans

What courses are similar to React & TypeScript - The Practical Guide?

More courses by Academind Pro (Maximilian Schwarzmüller)

Frequently asked questions

What are the prerequisites for enrolling in this course?
To benefit fully from the course, students should have a basic understanding of JavaScript and React. Familiarity with modern JavaScript features such as ES6 syntax will be beneficial. Prior exposure to TypeScript is not required as the course covers TypeScript setup and usage from the ground up.
What kind of projects will I build during the course?
Throughout the course, students will work on various projects that involve creating React components with TypeScript. This includes building flexible and dynamic components, a basic wrapper component, and a polymorphic component. These projects help in understanding how to define component props types, use state and events with TypeScript, and create type-safe React applications.
Who is the target audience for this course?
The course is designed for developers who are familiar with React and want to integrate TypeScript into their development workflow. It is suitable for those looking to enhance their skills by learning how to catch and fix type-related errors early in the development process and who wish to understand complex type definitions in React applications.
How does this course differ from other React and TypeScript courses?
This course focuses on practical applications of TypeScript within React projects, emphasizing real-world scenarios like building dynamic components and handling complex type challenges. It provides hands-on exercises like creating a header component and using useState() with TypeScript, which might not be covered in other courses that focus more on theoretical aspects.
What specific TypeScript features are covered in the course?
The course covers a broad range of TypeScript features such as type inference, explicit type annotations, custom types, interfaces, type guards, generic types, and discriminated unions. It also delves into handling events, using useRef(), and working with TypeScript-specific tools like tsconfig.json.
What topics are not covered in this course?
The course does not cover advanced React features unrelated to TypeScript, such as server-side rendering or state management libraries like Redux. Additionally, it does not include in-depth backend integration or deployment strategies, focusing solely on TypeScript's role in front-end React applications.
How much time should I expect to commit to this course?
With 89 lessons in total, the course requires a substantial time commitment. Students should allocate enough time to go through each lesson and complete the practical exercises. The self-paced nature of the course allows for flexibility, but a regular study schedule is recommended to cover the material effectively.