React & TypeScript - The Practical Guide
Build type-safe React apps & use TypeScript to enhance your components, state management, Redux & side effects code.
About This Course
Welcome to "React & TypeScript - The Practical Guide"!
TypeScript is an amazing technology that helps developers write better code with less errors - simply because it lets 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!
By the end of the course, you'll be able to use TypeScript in your own React projects and write better, more type-safe code.
Why Learn TypeScript with React?
TypeScript catches errors at compile time rather than runtime, making your React applications more robust and maintainable. My goal is to ensure that you feel confident combining TypeScript with React, so that you can build type-safe applications, improve your existing projects, or simply enhance your portfolio as a developer - whatever your goal is: This course gets you there!
What's in This Course?
This course will teach you WHY using TypeScript in your React projects is a great idea and introduce you to all the key TypeScript concepts you'll need - when working with React & in general.
TypeScript Fundamentals
Learn the key TypeScript concepts you'll need when working with React. Understand types, interfaces, generics, and how they apply to React development.
Components & State
Get started with using TypeScript with React - for components, props, state & more. Learn how to type your components correctly from the start.
Advanced Patterns
Explore more advanced, complex patterns & examples. Build dynamic or even polymorphic components in a type-safe way for maximum flexibility.
Context, Redux & Data
Use TypeScript with React's Context API and the popular Redux library. Cover data fetching & useEffect() with proper TypeScript integration.
In Detail, You'll Learn
This course covers everything you need to build type-safe React applications with multiple demo projects where all concepts are applied step-by-step.
Core Concepts
Master these essential TypeScript + React skills:
- Why using TypeScript in React projects is a good idea
- Key TypeScript concepts for React & in general
- Using TypeScript with React components & props
- Type-safe state management with useState
- Working with events and event handlers
- TypeScript with React's Context API
Advanced Topics
Take your skills to the next level:
- Building dynamic & polymorphic components
- Advanced component patterns & examples
- Enhancing useReducer() with TypeScript
- Data fetching & useEffect() with TypeScript
- Using Redux in a type-safe way
- Building & improving multiple demo projects
Multiple Demo Projects Included!
This course includes multiple demo projects where you'll build or improve applications so that you can apply your knowledge! You'll work with real-world patterns and scenarios to ensure you're ready to use TypeScript in your own React projects.
Basic React Knowledge Required
See The Course In Action
Curriculum
- 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)
- 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)
- 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)
- 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)
- 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)
- 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)
Course Prerequisites
Here's what you need to get the most out of this course
- Basic React knowledge (components, JSX, state) IS required - more advanced concepts will be explained though.
- NO prior TypeScript knowledge is required - though basic knowledge will help (but the course includes an introduction module).
All pre-requisites are covered by courses in our "Academind Pro" Membership.
Your Instructor
Maximilian Schwarzmüller
Founder & Instructor
Self-taught developer with 3,500,000+ students and 900,000 YouTube subscribers. I co-founded Academind with Manuel Lorenz to help people master new skills and build amazing projects.
Join 2545 happy students!
Choose the plan that works best for you
Single-Course License
Full access to "React & TypeScript - The Practical Guide"
This is a one-time payment that grants access to this course only, not to any other courses.
Academind Pro Membership
Unlimited access to this and all other current & future courses!
This is a recurring payment. You can cancel anytime from your profile. For more info, contact Academind.
Continue Your Learning Journey
Expand your skills with these hand-picked courses that complement what you'll learn here.
