React & TypeScript - The Practical Guide by Udemy
Build type-safe React apps & use TypeScript to enhance your components, state management, Redux & side effects code.
Course Highlights
- 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
Skills you will learn!
Curriculum
7 Topics
Welcome To The Course!
Why React & TypeScript?
About The Course & Course Content
How To Get The Most Out Of The Course
Learning Community & Course Resources
Creating & Using React + TypeScript Projects
Course Setup
19 Topics
Module Introduction
TypeScript Setup & Using TypeScript
Working with Types: Type Inference & Explicit Type Annotations
Basic Primitive Types
Invoking The TypeScript Compiler
Combining Types Union Types (Alternative Types)
Working with Object Types
Working with Array Types
Adding Types to Functions - Parameter & Return Value Types
Defining Function Types
Creating Custom Types / Type Aliases
Defining Object Types with Interfaces
Interfaces vs Custom Types
Merging Types
Being Specific With Literal Types
Adding Type Guards
Type Guards & Type Narrowing - A Closer Look
Making Sense Of Generic Types
Summary
19 Topics
Module Introduction
Creating a React + TypeScript Project
Understanding the Role of tsconfig.json
Building a First Component & Facing a Missing Type
Defining Component Props Types
Storing Props Types as a Custom Type or Interface
Defining a Type for Props with "children"
Component Props & The Special "key" Prop
Another Way Of Typing Components
Exercise: Creating a Header Component
Using useState() and TypeScript
Working with State & Outputting State-based Values
Another Exercise & Reusing Types Across Files
Passing Functions as Values - In A Type-Safe Way
Handling & Typing Events
Working with Generic Event Types
Using useRef() with TypeScript
Handling User Input In A Type-Safe Way
Summary
18 Topics
Module Introduction
Building a More Dynamic & Flexible Component
Problem: Flexible Components With Required Prop Combinations
Solution: Building Components with Discriminated Unions
Onwards To A New Project
Building a Basic Wrapper Component
Building Better Wrapper Components with ComponentPropsWithoutRef
Building a Wrapper Component That Renders Different Elements
Working with Type Predicates & Facing TypeScript Limitations
Building a Basic Polymorphic Component
Building a Better Polymorphic Component with Generics
Examples: More Component Ideas
Using forwardRef with TypeScript
Building Another Wrapper Component (Custom Form Component)
Sharing Logic with "unknown" & Type Casting
Exposing Component APIs with useImperativeHandle (with TypeScript)
Alternative: Avoiding Type Casting with "as"
Summary
10 Topics
Module Introduction
The Starting Project
Creating a Context & Fitting Types
Creating a Type-Safe Provider Component
Accessing Context Type-Safe With A Custom Hook
Getting Started with useReducer() & TypeScript
A Basic Reducer Function & A Basic Action Type
Changing State via the Reducer Function
Using Better Action Types
Wiring Everything Up & Finishing the App
12 Topics
Module Introduction
Creating a First Side Effect
Using useEffect() with TypeScript
Managing An Interval With Refs & The Effect Cleanup Function
useEffect() & Its Dependencies
A Small Bug & Its Solution
Onwards to Data Fetching!
Building a Utility "get" Function with TypeScript
Fetching & Transforming Data
Alternative: Using the "zod" Library for Response Data Validation
Alternative: A Generic "get" Function
Handling Loading & Error States
12 Topics
Module Introduction
The Starting Project
Redux Setup
Creating a Redux Store & A First Slice
Setting a State Type
A First Reducer & Controlling the Action Payload Type
Adding Logic To The Reducer
Providing the Redux Store
Dispatching Actions & Adjusting the useDispatch Hook
Creating a Type-Safe useSelector Hook
Selecting & Transforming Redux Store Data
Finishing Touches & Summary
4 Topics
Your Task
Your Task - Details
Hints
An Example Solution
1 Topic
Bonus Lecture
React & TypeScript - The Practical Guide
Related Typescript Courses
Thank You!
Your review has been submitted successfully.