English | MP4 | AVC 1920×1080 | AAC 44KHz 2ch | 100 lectures (7h 33m) | 1.11 GB
Build type-safe React apps & use TypeScript to enhance your components, state management, Redux & side effects code.
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.
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
Table of Contents
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 Creating & Using React + TypeScript Projects
6 Module Introduction
7 TypeScript Setup & Using TypeScript
8 Working with Types: Type Inference & Explicit Type Annotations
9 Basic Primitive Types
10 Invoking The TypeScript Compiler
11 Combining Types Union Types (Alternative Types)
12 Working with Object Types
13 Working with Array Types
14 Adding Types to Functions – Parameter & Return Value Types
15 Defining Function Types
16 Creating Custom Types / Type Aliases
17 Defining Object Types with Interfaces
18 Interfaces vs Custom Types
19 Being Specific With Literal Types
20 Merging Types
21 Adding Type Guards
22 Making Sense Of Generic Types
23 Summary
24 Module Introduction
25 Creating a React + TypeScript Project
26 Understanding the Role of tsconfig.json
27 Building a First Component & Facing a Missing Type
28 Defining Component Props Types
29 Storing Props Types as a Custom Type or Interface
30 Defining a Type for Props with “children”
31 Another Way Of Typing Components
32 Exercise: Creating a Header Component
33 Using useState() and TypeScript
34 Working with State & Outputting State-based Values
35 Another Exercise & Reusing Types Across Files
36 Passing Functions as Values – In A Type-Safe Way
37 Handling & Typing Events
38 Working with Generic Event Types
39 Using useRef() with TypeScript
40 Handling User Input In A Type-Safe Way
41 Summary
42 Module Introduction
43 Building a More Dynamic & Flexible Component
44 Problem: Flexible Components With Required Prop Combinations
45 Solution: Building Components with Discriminated Unions
46 Onwards To A New Project
47 Building a Basic Wrapper Component
48 Building Better Wrapper Components with ComponentPropsWithoutRef
49 Building a Wrapper Component That Renders Different Elements
50 Working with Type Predicates & Facing TypeScript Limitations
51 Building a Basic Polymorphic Component
52 Building a Better Polymorphic Component with Generics
53 Using forwardRef with TypeScript
54 Building Another Wrapper Component (Custom Form Component)
55 Sharing Logic with “unknown” & Type Casting
56 Exposing Component APIs with useImperativeHandle (with TypeScript)
57 Summary
58 The Starting Project
59 Module Introduction
60 Creating a Context & Fitting Types
61 Creating a Type-Safe Provider Component
62 Accessing Context Type-Safe With A Custom Hook
63 Getting Started with useReducer() & TypeScript
64 A Basic Reducer Function & A Basic Action Type
65 Changing State via the Reducer Function
66 Using Better Action Types
67 Wiring Everything Up & Finishing the App
68 Module Introduction
69 Creating a First Side Effect
70 Using useEffect() with TypeScript
71 Managing An Interval With Refs & The Effect Cleanup Function
72 useEffect() & Its Dependencies
73 Onwards to Data Fetching!
74 Building a Utility “get” Function with TypeScript
75 Fetching & Transforming Data
76 Handling Loading & Error States
77 The Starting Project
78 Module Introduction
79 Redux Setup
80 Creating a Redux Store & A First Slice
81 Setting a State Type
82 A First Reducer & Controlling the Action Payload Type
83 Adding Logic To The Reducer
84 Providing the Redux Store
85 Dispatching Actions & Adjusting the useDispatch Hook
86 Creating a Type-Safe useSelector Hook
87 Selecting & Transforming Redux Store Data
88 Finishing Touches & Summary
89 Your Task
Resolve the captcha to access the links!