+- Softwarez.Info - Software's World! (https://softwarez.info)
+-- Forum: Library Zone (https://softwarez.info/Forum-Library-Zone)
+--- Forum: Video Tutorials (https://softwarez.info/Forum-Video-Tutorials)
+--- Thread: React & Typescript - The Practical Guide (/Thread-React-Typescript-The-Practical-Guide)
React & Typescript - The Practical Guide - BaDshaH - 10-26-2023
![[Image: Q7b7-LUxb-ORt-It8c2i-Umv-Hrc-AXWg4-Fm4v.jpg]](https://i.postimg.cc/J0B0bcL8/Q7b7-LUxb-ORt-It8c2i-Umv-Hrc-AXWg4-Fm4v.jpg)
Published 10/2023
MP4 | Video: h264, 1920x1080 | Audio: AAC, 44.1 KHz
Language: English | Size: 2.86 GB | Duration: 7h 33m
Build type-safe React apps & use TypeScript to enhance your components, state management, Redux & side effects code.
[b]What you'll learn[/b]
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
[b]Requirements[/b]
Basic React knowledge of core concepts (components, JSX, state) is needed
NO prior TypeScript knowledge is required
[b]Description[/b]
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 ideaIntroduce you to the key TypeScript concepts you'll need - when working with React & in generalGet you started with using TypeScript with React - for components, state & moreExplore more advanced, complex patterns & examplesHelp you with building dynamic or even polymorphic components in a type-safe wayTeach you how to use TypeScript with React's Context APIExplore how you can enhance code used with useReducer() with help of TypeScriptCover data fetching & useEffect() with TypeScriptUse the popular Redux library in a type-safe wayBuild or improve multiple demo projects so that can apply your knowledgeBy 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
Overview
Section 1: Introduction
Lecture 1 Welcome To The Course!
Lecture 2 Why React & TypeScript?
Lecture 3 About The Course & Course Content
Lecture 4 How To Get The Most Out Of The Course
Lecture 5 Learning Community & Course Resources
Lecture 6 Creating & Using React + TypeScript Projects
Section 2: TypeScript Basics & Core Concepts
Lecture 7 Module Introduction
Lecture 8 TypeScript Setup & Using TypeScript
Lecture 9 Working with Types: Type Inference & Explicit Type Annotations
Lecture 10 Basic Primitive Types
Lecture 11 Invoking The TypeScript Compiler
Lecture 12 Combining Types Union Types (Alternative Types)
Lecture 13 Working with Object Types
Lecture 14 Working with Array Types
Lecture 15 Adding Types to Functions - Parameter & Return Value Types
Lecture 16 Defining Function Types
Lecture 17 Creating Custom Types / Type Aliases
Lecture 18 Defining Object Types with Interfaces
Lecture 19 Interfaces vs Custom Types
Lecture 20 Being Specific With Literal Types
Lecture 21 Merging Types
Lecture 22 Adding Type Guards
Lecture 23 Type Guards & Type Narrowing - A Closer Look
Lecture 24 Making Sense Of Generic Types
Lecture 25 Summary
Section 3: Using TypeScript with React - Essentials
Lecture 26 Module Introduction
Lecture 27 Creating a React + TypeScript Project
Lecture 28 Understanding the Role of tsconfig.json
Lecture 29 Building a First Component & Facing a Missing Type
Lecture 30 Defining Component Props Types
Lecture 31 Component Props & The Special "key" Prop
Lecture 32 Storing Props Types as a Custom Type or Interface
Lecture 33 Defining a Type for Props with "children"
Lecture 34 Another Way Of Typing Components
Lecture 35 Exercise: Creating a Header Component
Lecture 36 Using useState() and TypeScript
Lecture 37 Working with State & Outputting State-based Values
Lecture 38 Another Exercise & Reusing Types Across Files
Lecture 39 Passing Functions as Values - In A Type-Safe Way
Lecture 40 Handling & Typing Events
Lecture 41 Working with Generic Event Types
Lecture 42 Using useRef() with TypeScript
Lecture 43 Handling User Input In A Type-Safe Way
Lecture 44 Summary
Section 4: Advanced Component Types - Dynamic Components, Polymorphic Components & More
Lecture 45 Module Introduction
Lecture 46 Building a More Dynamic & Flexible Component
Lecture 47 Problem: Flexible Components With Required Prop Combinations
Lecture 48 Solution: Building Components with Discriminated Unions
Lecture 49 Onwards To A New Project
Lecture 50 Building a Basic Wrapper Component
Lecture 51 Building Better Wrapper Components with ComponentPropsWithoutRef
Lecture 52 Building a Wrapper Component That Renders Different Elements
Lecture 53 Working with Type Predicates & Facing TypeScript Limitations
Lecture 54 Building a Basic Polymorphic Component
Lecture 55 Building a Better Polymorphic Component with Generics
Lecture 56 Examples: More Component Ideas
Lecture 57 Using forwardRef with TypeScript
Lecture 58 Building Another Wrapper Component (Custom Form Component)
Lecture 59 Sharing Logic with "unknown" & Type Casting
Lecture 60 Alternative: Avoiding Type Casting with "as"
Lecture 61 Exposing Component APIs with useImperativeHandle (with TypeScript)
Lecture 62 Summary
Section 5: Advanced Type-Safe State with Context API & useReducer()
Lecture 63 Module Introduction
Lecture 64 The Starting Project
Lecture 65 Creating a Context & Fitting Types
Lecture 66 Creating a Type-Safe Provider Component
Lecture 67 Accessing Context Type-Safe With A Custom Hook
Lecture 68 Getting Started with useReducer() & TypeScript
Lecture 69 A Basic Reducer Function & A Basic Action Type
Lecture 70 Changing State via the Reducer Function
Lecture 71 Using Better Action Types
Lecture 72 Wiring Everything Up & Finishing the App
Section 6: Side Effects, useEffect() & Data Fetching with TypeScript
Lecture 73 Module Introduction
Lecture 74 Creating a First Side Effect
Lecture 75 Using useEffect() with TypeScript
Lecture 76 Managing An Interval With Refs & The Effect Cleanup Function
Lecture 77 useEffect() & Its Dependencies
Lecture 78 A Small Bug & Its Solution
Lecture 79 Onwards to Data Fetching!
Lecture 80 Building a Utility "get" Function with TypeScript
Lecture 81 Fetching & Transforming Data
Lecture 82 Alternative: Using the "zod" Library for Response Data Validation
Lecture 83 Alternative: A Generic "get" Function
Lecture 84 Handling Loading & Error States
Section 7: Using Redux with TypeScript
Lecture 85 Module Introduction
Lecture 86 The Starting Project
Lecture 87 Redux Setup
Lecture 88 Creating a Redux Store & A First Slice
Lecture 89 Setting a State Type
Lecture 90 A First Reducer & Controlling the Action Payload Type
Lecture 91 Adding Logic To The Reducer
Lecture 92 Providing the Redux Store
Lecture 93 Dispatching Actions & Adjusting the useDispatch Hook
Lecture 94 Creating a Type-Safe useSelector Hook
Lecture 95 Selecting & Transforming Redux Store Data
Lecture 96 Finishing Touches & Summary
Section 8: Practice Project: A "Book a Session" Management Application
Lecture 97 Your Task
Lecture 98 Your Task - Details
Lecture 99 Hints
Lecture 100 An Example Solution
React developers who want to improve the quality & type-safety of their codebase,TypeScript developers who want to apply their knowledge to React apps
Homepage