【精品视频课程】深入了解React 18 + Typescript (英文)

【精品课程】深入React 18 + Typescript

发布日期：5/2024
MP4 | 视频：h264，1920×1080 | 音频：AAC，44.1千赫
语言：英语 | 大小：4.15 GB | 时长：9小时39分钟

完全了解React 18与Typescript的工作原理

你将学到什么：
学习学习ReactJS所需的JavaScript技能
完全使用Typescript的ReactJS源代码库
学会以React的方式思考
理解React Fiber或Fiber架构
回流与重绘——React如何有效地使用这些？
优化您的React组件并对其进行配置文件
React中的呈现和提交阶段
高优先级和低优先级更新
挂起组件

要求：
对JavaScript/HTML/CSS有基本的了解
热衷于完全理解ReactJS
就这些。我们在课程中见！

描述：
本课程旨在为新老ReactJS开发人员打造，以便我们都能彻底了解React的工作原理。在创建本课程时，我进行了一些研究，甚至检查了来自GitHub的React源代码，以确保我完全理解它。基本上，这只是我教授如何使用ReactJS，并深入了解它背后的工作原理。了解它的背景工作原理将帮助开发人员更好地使用ReactJS编写源代码，因为他们完全了解它的工作方式。其他课程会教你如何使用ReactJS，但本课程将为你提供对React提供的每个概念和功能的更深入理解。例如，你知道什么是回流和重绘吗？什么是React Fiber？为什么我们有useEffect、useLayoutEffect和useTransitionEffect（这是很多效果！）？它们是同步还是异步的？在使用这些效果时，React多久会在DOM中绘制UI？什么是高优先级和低优先级更新，React是如何做到的？React为此做了什么技巧？React如何高效地创建VirtualDOM并尽可能地使用迷你动画的内存？React如何批处理更新？如果您在许多组件中有多个状态更新，会发生什么？React会渲染多少次？如果您已经了解我提到的那些内容，那么您可能不需要这门课程。如果你不知道，那就和我一起学习这些东西吧！让我们一起享受一些乐趣！
[Master Class] Deep Dive Into React 18 + Typescript

Published 5/2024
MP4 | Video: h264, 1920×1080 | Audio: AAC, 44.1 KHz
Language: English | Size: 4.15 GB | Duration: 9h 39m

Completely understand how React 18 works with Typescript

What you’ll learn
Learn Javascript Skills necessary to learn ReactJS
Fully Typescript codebase with ReactJS
Learn to think the React Way
Understand React Fiber or Fiber Architecture
Reflow & Repaint – How React uses this efficiently?
Optimize your React Components and Profile them
Render and Commit Phase in React
High and Low Priority Updates
Suspending Components

Requirements
Basic understanding of Javascript/HTML/CSS
Burning passion to understand ReactJS completely
That’s it. I’ll see you in the course 😉

Description
This course is built for new and old ReactJS developers so we can all have complete understanding how React works. I have done some reasearch while creating this course and even check react code from github just to make sure I understand it.Basically this is just me teaching how to use ReactJS as well as providing a deep understanding how it works in the background. Knowing how it works in the background will help developers to code better using ReactJS because they know how it works completely.Other course will teach you how to use ReactJS, but this course will give you a deeper understanding of each concepts and features that React offers. For example Do you know what Reflow and Repaint is? What is React Fiber? Why do we have useEffect, useLayoutEffect and useTransitionEffect (That’s a lot of effects! )? Are those synchronous or asynchronous?How often React paints the UI in the DOM when using those effects?What is high and low priority updates and how does React does that? What trick ReactJS does to do that? How React creates the VirtualDOM efficiently and use the minimal memory as much as possible?How React batch the updates? What if you have multiple state updates in a lot of components? How many times React will render?If you already know those things I have mentioned, then you probably don’t need this course. If you don’t, then join me learn those stuff! Let’s have some fun!

Overview
Section 1: Introduction

Lecture 1 Introduction

Lecture 2 Your Instructor

Lecture 3 Why React?

Lecture 4 Typescript Overview

Section 2: Refresh your Javascript Skills

Lecture 5 Introduction

Lecture 6 Lecture for this course

Lecture 7 Var, Let and Const

Lecture 8 Var, Let and Const – Hands On

Lecture 9 Logical OR and AND

Lecture 10 Logical OR and AND – Hands On

Lecture 11 Primitive Values vs Reference Type

Lecture 12 Primitive Values vs Reference Type – Hands On

Lecture 13 Shallow and Deep Copy

Lecture 14 Shallow and Deep Copy – Hands On

Lecture 15 Spread Operator, Rest Parameter, Destructuring

Lecture 16 Spread Operator, Rest Parameter, Destructuring – Hands On

Lecture 17 Class

Lecture 18 Class – Hands On

Lecture 19 This Object + Arrow Function

Lecture 20 This Object + Arrow Function – Hands On

Lecture 21 Promises and Async+Await

Lecture 22 Promises and Async+Await – Hands On

Lecture 23 Export & Import

Lecture 24 Summary

Section 3: Play with React Components!

Lecture 25 Introduction

Lecture 26 Setup Environment

Lecture 27 You can use Vite instead of craete-react-app

Lecture 28 Component & Props

Lecture 29 Style & Class

Lecture 30 List & Keys

Lecture 31 Conditional Rendering

Lecture 32 React Dev Tools

Lecture 33 Lifecycle of a Component

Lecture 34 (Solution) Assignment: Create a Simple UI

Lecture 35 Before we jump to Hooks!

Section 4: Data Hooks

Lecture 36 Introduction

Lecture 37 useState Hooks

Lecture 38 useState with Objects & StrictMode

Lecture 39 Controlled & Uncontrolled Components

Lecture 40 useReducer Hooks

Lecture 41 useReducer – Advance

Lecture 42 useReducer vs useState

Lecture 43 Context & useContext

Lecture 44 useReducer & useContext

Lecture 45 useSyncExternalStore

Lecture 46 (Solution) Assignment: My Book App

Lecture 47 Batching Updates

Section 5: Refs

Lecture 48 Introduction

Lecture 49 useRef Hook!

Lecture 50 Manipulating DOM with Refs

Lecture 51 callback Refs

Lecture 52 Forwarding Ref (Add Ref to your component)

Lecture 53 useImperativeHandle Hook!

Lecture 54 (Solution) Survey Form App

Lecture 55 Display Name in React Dev Tools

Section 6: useEffect

Lecture 56 Introduction

Lecture 57 useEffect

Lecture 58 useEffect vs Class Components

Lecture 59 useLayoutEffect

Lecture 60 Reflow and Repaint

Lecture 61 Caution!

Lecture 62 (Solution) Assignment – Users App

Section 7: Performance & Optimizations

Lecture 63 Introduction

Lecture 64 memo

Lecture 65 useMemo

Lecture 66 useCallback

Lecture 67 Transitions

Lecture 68 useDeferredValue

Lecture 69 Render & Commit Phase

Lecture 70 React Fiber

Lecture 71 Lazy & Suspense

Lecture 72 Understanding Suspense

Lecture 73 Profiler (React Dev Tools)

Lecture 74 Profiler Component

Section 8: More Hooks

Lecture 75 Introduction

Lecture 76 useId

Lecture 77 Create a Custom Hook!

Lecture 78 useDebugValue

Lecture 79 (Solution) Assignment – Create Custom Hook

Section 9: Thank You and Congratulations!

Lecture 80 Congratulations!

Anyone who wants to learn ReactJS and understand it completely

扫码免费下载