English | MP4 | AVC 1920×1080 | AAC 44KHz 2ch | 158 Lessons (16h 37m) | 2.72 GB
Even if you’ve been using React for years, your mental model is likely inaccurate. That’s because the best mental model is understanding how something really works.
React is wildly popular and well-established in the job market for web developers. However, to use and debug it well, you must understand how it actually works.
In this course, designed for both React beginners and experienced React devs you will come to deeply understand how React works under-the-hood by diving into React internals: the React source code itself.
Most courses teach you how to use React. In this course you will fully understand how React works, which will enable you to use and debug React well.
You will gain truly under-the-hood knowledge on topics such as the React Element Tree, the Fiber Tree, JSX, Rendering, Reconciliation, State, Hooks, Effects, Suspense, React Server Components, and more.
That knowledge will give you a clarity that will serve you well every day you use React, or React-based frameworks like Next.js or Remix.
Table of Contents
1 Introduction
2 Setup
3 A Basic React App
4 The React Source Code
5 The DOM and Declarative Programming –
6 HTML and Trees
7 HTML, The Browser, and the DOM
8 DOM Manipulation
9 Conceptual Aside Imperative vs. Declarative Programming
10 The DOM and Imperative Programming
11 The DOM and Declarative Programming
12 React Elements –
13 Conceptual Aside Recursion
14 Conceptual Aside POJOs
15 Creating React Elements
16 React Element Trees
17 Conceptual Aside DOM Element References
18 React Elements and DOM Elements
19 React DOM Updates
20 Components
21 Components and Reusability
22 Conceptual Aside Pure Functions
23 Props
24 Template Logic
25 Element Properties
26 JSX –
27 Conceptual Aside Markup and Tree Creation Shorthand
28 Conceptual Aside Transformation
29 React Elements and JSX Links to for this lecture
30 JSX and Thinking In Elements
31 Conceptual Aside HTML Authoring
32 Fragment and HTML Authoring
33 Fiber and Reconciliation –
34 Root Creation and render
35 Conceptual Aside Trees and Linked Lists
36 Fiber, Fiber Nodes, and Fiber Trees
37 Conceptual Aside Tree Reconciliation and the Tree Edit Distance Problem
38 Work-In-Progress Nodes
39 Reconciliation and Work
40 Execution Contexts –
41 Conceptual Aside Execution Contexts and the Event Loop
42 Fiber and Custom Execution Contexts
43 Units of Work and The Work Loop
44 Conceptual Aside Equality
45 Beginning, Completing, Bailing Out and Pausing Work
46 Lanes and Priority
47 React DOM and Rendering –
48 Committing Work and The Renderer
49 Mounting, Updating, and Unmounting
50 Events –
51 DOM Events
52 React Event Objects
53 Synthetic Event Properties and Methods
54 State –
55 Conceptual Aside State Machines
56 Conceptual Aside Pure Functions (again)
57 UI A Function of State
58 Conceptual Aside Reducers
59 Actions and State
60 Hooks and State –
61 Fibers, Hooks, and State Extra Notes
62 Conceptual Aside Queues
63 Update Queues
64 State and Re-renders
65 useReducer (Part 1)
66 useReducer (Part 2)
67 useState (Part 1)
68 useState (Part 2)
69 Rules of Hooks
70 useState (Part 3)
71 Conceptual Aside Shallow Equality and Object.is
72 Immutable State
73 Adding Your Own Side Effects useEffect –
74 Conceptual Aside Pure Functions and Side Effects
75 Adding Your Own Effects
76 Dependencies
77 A Game of Ping Pong
78 Unmounting and Effects
79 Fetching Data…or not
80 Conceptual Aside Stale Closures
81 useEffect and Stale Closures
82 What Not to Do
83 useRef and forwardRef –
84 useRef
85 useRef and the DOM
86 forwardRef
87 Custom Hooks –
88 Extracting Custom Hooks
89 Component Design –
90 Real World Complexity and Loops
91 Lifting State Up
92 &&, 0, and Ternary Operators
93 Children
94 useContext
95 Prop Drilling
96 Context
97 Context with Caution
98 useId and Key –
99 useId
100 Key
101 memo, useMemo, and useCallback –
102 Conceptual Aside Memoization
103 memo
104 useMemo
105 useCallback
106 React Forget
107 useContext and Reducer –
108 useContext + Reducer
109 rd Party State Management
110 Toolchains
111 Conceptual Aside Toolchains
112 Conceptual Aside ES Modules
113 Create React App
114 Vite
115 Frameworks
116 Strict Mode –
117 Adding Strict Mode
118 Extra Re-render
119 Extra Effect Re-run
120 Forms –
121 Reorganizing Our App
122 Uncontrolled Inputs
123 Controlled Inputs
124 form
125 textarea, select, and More
126 rd Party Form Help
127 Future Form Features
128 React Dev Tools Lesson Summary –
129 Using Dev Tools
130 useDebugValue
131 CSS and Components –
132 CSS and React
133 Toolchains and CSS
134 CSS Modules and more
135 Class Project –
136 Spelling Bee
137 HTML Authoring
138 Getting the Data Promises, Async, and Await free YouTube video on my channel
139 Header
140 Honeycomb
141 Shuffle
142 Words and Letters
143 Word List
144 Score
145 Highlighted Letter
146 Final Thoughts
147 Meta-Frameworks –
148 NextJS
149 Remix
150 Suspense –
151 Suspense and Frameworks
152 Suspense and Remix
153 React Server Components
154 Server Components
155 Client Components and ‘use client’
156 RSC Payload
157 Composing Client and Server Components
158 Conclusion
Resolve the captcha to access the links!