React and TypeScript [2021, ENG] torrent

Обучающие видео » Компьютерные видеоуроки и обучающие интерактивные DVD » Программирование (видеоуроки)

React and TypeScript

Год выпуска: 2021
Производитель: frontendmasters.com
Сайт производителя: https://frontendmasters.com/courses/react-typescript/
Автор: Steve Kinney
Продолжительность: 5 hours, 3 min
Тип раздаваемого материала: Видеоклипы
Язык: Английский
Описание: Learn to use TypeScript with React through building a series of React components. You’ll explore the types that come with React that allow you to infer the properties of your components, look at tips and advice for migrating your application from JavaScript to TypeScript, and learn advanced patterns for building flexible and type-safe components. Ship your React apps with more confidence and fewer bugs using TypeScript!
Published: May 25, 2021

Resources and Downloads

Course Website https://stevekinney.github.io/react-and-typescript/%60
Course Code https://github.com/stevekinney/react-and-typescript-projects
[spoiler="Содержание"]
Table of Contents
Introduction

Introduction
00:00:00 - 00:05:21
Introduction
Steve Kinney introduces the course, shares some personal history with React and TypeScript, and discusses advantages and disadvantages of TypeScript. Course materials and a brief course overview are also provided in this segment.

The Fundamentals

Local Setup
00:05:22 - 00:07:35
Local Setup
Steve demonstrates how to set up a local version of the course exercises to allow exercise completion without accessing individual code sandboxes.
propTypes
00:07:36 - 00:14:34
propTypes
Steve discusses using propTypes in TypeScript to set the intentions of a prop. Setting a propType will let TypeScript know what type to expect when a prop is in use. If the propType does not match TypeScript will throw an error.
Common Types
00:14:35 - 00:22:27
Common Types
Steve discusses the common prop types found in TypeScript including primitives, defining arrays, objects, IDs, keys, methods, and optional props. How to create a custom type is also covered in this segment.
Types vs Interfaces
00:22:28 - 00:27:21
Types vs Interfaces
Steve discusses similarities and differences between types and interfaces and answers a student's question regarding how to handle things that collect additional arguments in an array. A chart comparing the two is provided on the course website and in this segment.
Typing Children Exercise
00:27:22 - 00:29:41
Typing Children Exercise
Students are instructed to correctly type children without using the any type.
Typing Children Solution
00:29:42 - 00:34:47
Typing Children Solution
Steve livecodes the solution to the Typing Children Exercise. A students question regarding if there is a difference between using React.ReactNode versus React.ReactChild or React.Children is also covered in this segment.
Typing CSS Styling
00:34:48 - 00:39:36
Typing CSS Styling
Steve demonstrates TypeScript type checking in regards to CSS styling and how to pass in CSS styles as a prop. What happens when setting an optional property with a default is also demonstrated in this segment.
useState Hook
00:39:37 - 00:47:19
useState Hook
Steve demonstrates how to toggle a blur className using the useState hook. The useState hook in TypeScript will check the current state of the variable and change it to something new with the same type.

Interacting with Components

Set State Without a Default Value
00:47:20 - 00:59:19
Set State Without a Default Value
Steve discusses how to explicitly specify the type in useState without the TypeScript type checker throwing an error.
useEffect TypeScript Exercise
00:59:20 - 01:00:15
useEffect TypeScript Exercise
Students are instructed to use the error message given by TypeScript to correct the problem within the example's code.
useEffect TypeScript Solution
01:00:16 - 01:02:53
useEffect TypeScript Solution
Steve live codes the solution to the useEffect TypeScript exercise.
Typing Class-Based Components
01:02:54 - 01:14:14
Typing Class-Based Components
Steve discusses how to implement TypeScript in class-based components using a counter example. Two types are being passed into React.Component: the expected type for the prop received and the type of the state.
Typing Hooks & Component Exercise
01:14:15 - 01:14:45
Typing Hooks & Component Exercise
Students are instructed to add events to the hook-based example while adhering to TypeScript type checking.
Typing Hooks & Component Solution
01:14:46 - 01:17:55
Typing Hooks & Component Solution
Steve live codes the solution to the Typing Hooks and Component exercise.
Asynchronous Events Exercise
01:17:56 - 01:18:55
Asynchronous Events Exercise
Students are instructed to wire up the forms and events with some asynchronous data to load the requested number of dog facts.
Asynchronous Events Solution
01:18:56 - 01:28:40
Asynchronous Events Solution
Steve live codes the solution to the Asynchronous Events exercise.

Working with Reducers

Typing Reducers
01:28:41 - 01:46:07
Typing Reducers
Steve demonstrates how to implement and type useReducer to simplify determining state when multiple states are in use. Implementing TypeScript into the pizza calculator involves removing any declarations, setting the state, updating the actions, reducer, and Calculator component, and converting the output. A student's question regarding if a snowball effect could be encountered when changing the shape of a piece of data is also covered in this segment.
Reducers Exercise
01:46:08 - 01:47:09
Reducers Exercise
Students are instructed to add a reducer instead of using state in the counter exercise.
Reducers Solution
01:47:10 - 01:58:14
Reducers Solution
Steve live codes the solution to the Reducers exercise. A student's question regarding whether an enum could be used is also covered in this segment.
Adding Counter Action
01:58:15 - 02:03:08
Adding Counter Action
Steve demonstrates how to add a BasicCounterAction to the previous counter example that handles the increment and decrement functions. Implementing this function will satisfy the TypeScript type checker by setting the different types of actions being performed.

Color & Context

Context API
02:03:09 - 02:12:55
Context API
Steve demonstrates how to move state management to the Context API using a ThemeContext to create a light mode and dark mode for the application. When React renders a component that subscribes to the created Context object it will read the current context value from the closest matching Provider above it in the tree. A student's questions regarding what keys there are other than strings is also covered in this segment.
State Management with Context
02:12:56 - 02:22:33
State Management with Context
Steve demonstrates how to move the state management into a Context and resolve some of the errors thrown by TypeScript. This example uses an interface as opposed to types to illustrate the different syntax.
Reusable Props Interface
02:22:34 - 02:36:53
Reusable Props Interface
Steve live codes refactoring the color inputs to appease TypeScript. The hard coded input will be swapped out for what the user passes in and avoid errors with TypeScript because the input will conform to the type required.

Just Enough TypeScript

Generics
02:36:54 - 02:47:03
Generics
Steve discusses how using generics in TypeScript will allow more flexibility with assigning types in the type system. Generics can be used to assign variables to an object's type.
Generics Exercise
02:47:04 - 02:51:46
Generics Exercise
Students are instructed to take a basic version of the tap utility method and implement it with the types.
Generics Solution
02:51:47 - 02:56:07
Generics Solution
Steve live codes the solution to the Generics exercise.
Utility Types in React
02:56:08 - 03:05:05
Utility Types in React
Steve discusses some of the utility types built into React and TypeScript including keyof, unions, intersections, conditionals, exclude, extract, string manipulation, objects, pick, omit, React.HTMLProps, and React.ComponentProps.
Refactoring with Utility Types
03:05:06 - 03:12:09
Refactoring with Utility Types
Steve walks through refactoring the character cards from earlier in the course to use utility types. Some of the utility types used in this segment are keyof, Capitalize, and Exclude.
Utility Types Exercise
03:12:10 - 03:13:01
Utility Types Exercise
Students are instructed to make a type that excludes accountId and have the Friend component base it's props off of the currentUser component.
Utility Types Solution
03:13:02 - 03:15:21
Utility Types Solution
Steve live codes the solution to the Utility Types exercise.
Template Literals
03:15:22 - 03:19:22
Template Literals
Steve discusses the new feature in TypeScript 4.2 of using template literals with types. Using template literals will allow TypeScript to generate all of the composite types without having to individually define them. A challenge exercise of creating an alignment type using template literals is also provided in this segment.
Template Literals Continued
03:19:23 - 03:29:14
Template Literals Continued
Steve live codes creating composite types using template literals for the challenge in the previous segment and refactoring the color adjustment actions. A student's question regarding if one of the interpolations can be optional is also covered in this segment.

Higher Order Components

Higher Order Components
03:29:15 - 03:46:01
Higher Order Components
Steve demonstrates how to define higher order components with TypeScript, return a component while omitting the values being passed in, implement state management, and apply a generic to narrow down the accepted props. A brief walk through of refactoring the component to simplify the component is also covered in this segment.
Higher Order Components Exercise
03:46:02 - 03:46:34
Higher Order Components Exercise
Students are instructed to create a WithCurrentUser higher-order component that passes in the basic user information and accepts a manually passed salutation prop.
Higher Order Components Solution
03:46:35 - 03:52:02
Higher Order Components Solution
Steve live codes the solution to the Higher Order Components exercise.

Advanced Component Patterns

Limiting Props
03:52:03 - 04:00:48
Limiting Props
Steve demonstrates how to limit the props a component can take base on the state of other props. Limiting prop intake can help avoid errors with multiple optional props and safeguard the code against incorrect props being passed in.
Polymorphic Components
04:00:49 - 04:11:54
Polymorphic Components
Steve demonstrates how to create polymorphic components with an as property word and React.ElementType for more dynamic code in TypeScript. The props that are being overridden in the new polymorphic component should be omitted.
Polymorphic Components Exercise
04:11:55 - 04:12:40
Polymorphic Components Exercise
Students are instructed to create a polymorphic component text element that can be passed an as prop using the pattern from the previous example.
Polymorphic Components Solution
04:12:41 - 04:21:21
Polymorphic Components Solution
Steve live codes the solution to the Polymorphic Components exercise
Function Overloads
04:21:22 - 04:28:07
Function Overloads
Steve discusses function overloads and how they allow the ability to provide more than one type of signature to the same function.
Function Overloads Exercise
04:28:08 - 04:30:16
Function Overloads Exercise
Students are then instructed to make an add function that works with partial application.
Function Overloads Solution
04:30:17 - 04:42:07
Function Overloads Solution
Steve live codes the solution to the Function Overloads exercise.
Context API Edge Cases
04:42:08 - 04:58:23
Context API Edge Cases
Steve demonstrates how to solve for context API edge cases using generics to make an abstraction to solve for what to do if the context value isn't set yet. Updating the provider due to the different signature and hidden context object is also covered in this segment.
Migrating from JavaScript
04:58:24 - 05:02:58
Migrating from JavaScript
Steve discusses a recommended path for migrating from JavaScript to TypeScript to ease the transition. Setting a gentle set of TypeScript rules and the allowJs flag to avoid throwing errors at any types.

Wrapping Up

Wrapping Up
05:02:59 - 05:03:44
Wrapping Up
Steve wraps up the course by providing additional TypeScript courses to check out on Frontend Masters.
[/spoiler]
Файлы примеров: присутствуют
Формат видео: MP4
Видео: AVC, 1912x1080, 16:9, 30fps, ~1200kb/s
Аудио: AAC, 44.1kHz, ~244kb/s, stereo
[spoiler="Скриншоты"]

[/spoiler]