CF

Understanding React | Don’t Imitate Understand

17h 3m 45s
English
Paid

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.

About the Author: Anthony Alicea

Anthony Alicea thumbnail

Anthony Alicea is a US software engineer and educator best known for JavaScript: Understanding the Weird Parts — one of the canonical paid courses on JavaScript's underlying mental model (execution context, scope chain, prototype inheritance, the call stack) and one of the most widely-recommended deep-dives into the language for developers ready to move past surface syntax.

The course catalog extends into TypeScript (the deep type-system material rather than the syntax tour), React, Node.js, and the broader JavaScript ecosystem. The teaching style is unusually rigorous about the language fundamentals — Anthony's courses are taught at the level of someone who wants you to understand why JavaScript behaves the way it does, not just memorise the rules.

The CourseFlix listing under this source carries 7 Anthony Alicea courses spanning that range. Material is paid and aimed at developers ready to deepen their craft on the JavaScript / TypeScript stack.

Watch Online 164 lessons

This is a demo lesson (10:00 remaining)

You can watch up to 10 minutes for free. Subscribe to unlock all 164 lessons in this course and access 10,000+ hours of premium content across all courses.

View Pricing
0:00
/
#1: Introduction
All Course Lessons (164)
#Lesson TitleDurationAccess
1
Introduction Demo
01:49
2
Setup
01:54
3
A Basic React App
02:08
4
The React Source Code
02:07
5
The DOM and Declarative Programming
00:21
6
HTML and Trees
02:01
7
HTML, The Browser, and the DOM
04:03
8
DOM Manipulation
06:33
9
Conceptual Aside: Imperative vs. Declarative Programming
03:01
10
The DOM and Imperative Programming
03:13
11
The DOM and Declarative Programming
04:09
12
React Elements
00:27
13
Conceptual Aside: Recursion
04:18
14
Conceptual Aside: POJOs
12:53
15
Creating React Elements
11:37
16
React Element Trees
05:26
17
Conceptual Aside: DOM Element References
01:32
18
React Elements and DOM Elements
06:04
19
React DOM Updates
12:12
20
Components
06:02
21
Components and Reusability
11:08
22
Conceptual Aside: Pure Functions
05:19
23
Props
12:25
24
Template Logic
14:12
25
Element Properties
07:19
26
JSX
00:22
27
Conceptual Aside: Markup and Tree Creation Shorthand
01:57
28
Conceptual Aside: Transformation
01:49
29
React Elements and JSX
19:41
30
JSX and Thinking In Elements
12:01
31
Conceptual Aside: HTML Authoring
02:48
32
Fragment and HTML Authoring
10:04
33
Fiber and Reconciliation
00:42
34
Root Creation and render
08:58
35
Conceptual Aside: Trees and Linked Lists
04:23
36
Fiber, Fiber Nodes, and Fiber Trees
06:58
37
Conceptual Aside: Tree Reconciliation and the Tree Edit Distance Problem
03:45
38
Work-In-Progress Nodes
09:29
39
Reconciliation and Work
05:49
40
Execution Contexts
00:22
41
Conceptual Aside: Execution Contexts and the Event Loop
03:43
42
Fiber and Custom Execution Contexts
04:15
43
Units of Work and The Work Loop
03:01
44
Conceptual Aside: Equality
03:35
45
Beginning, Completing, Bailing Out and Pausing Work
07:02
46
Lanes and Priority
02:36
47
React DOM and Rendering
00:15
48
Committing Work and The Renderer
02:56
49
Mounting, Updating, and Unmounting
04:49
50
Events
00:24
51
DOM Events
11:37
52
React Event Objects
07:53
53
Synthetic Event Properties and Methods
05:44
54
State
00:17
55
Conceptual Aside: State Machines
06:37
56
Conceptual Aside: Pure Functions (again)
02:42
57
UI: A Function of State
02:47
58
Conceptual Aside: Reducers
06:32
59
Actions and State
08:57
60
Hooks and State
00:25
61
Fibers, Hooks, and State
04:05
62
Conceptual Aside: Queues
03:55
63
Update Queues
02:47
64
State and Re-renders
02:39
65
useReducer (Part 1)
07:49
66
useReducer (Part 2)
06:05
67
useState (Part 1)
04:17
68
useState (Part 2)
10:48
69
Rules of Hooks
07:44
70
useState (Part 3)
10:38
71
Conceptual Aside: Shallow Equality and Object.is
08:11
72
Immutable State
07:47
73
Adding Your Own Side Effects: useEffect
00:16
74
Conceptual Aside: Pure Functions and Side Effects
01:32
75
Adding Your Own Effects
11:47
76
Dependencies
08:07
77
A Game of Ping Pong
02:35
78
Unmounting and Effects
09:55
79
Fetching Data...or not
10:27
80
Conceptual Aside: Stale Closures
04:09
81
useEffect and Stale Closures
09:52
82
What Not to Do
10:26
83
useRef and forwardRef
00:24
84
useRef
04:27
85
useRef and the DOM
05:16
86
forwardRef
04:16
87
Custom Hooks
00:25
88
Extracting Custom Hooks
12:31
89
Component Design
00:22
90
Real World Complexity and Loops
18:31
91
Lifting State Up
28:52
92
&&, 0, and Ternary Operators
12:28
93
Children
06:02
94
useContext
00:51
95
Prop Drilling
04:29
96
Context
39:23
97
Context with Caution
02:21
98
useId and Key
00:31
99
useId
08:49
100
Key
15:29
101
memo, useMemo, and useCallback
00:19
102
Conceptual Aside: Memoization
07:32
103
memo
16:01
104
useMemo
20:16
105
useCallback
10:33
106
React Forget
01:38
107
useContext and Reducer
00:22
108
useContext + Reducer
27:23
109
3rd Party State Management
06:15
110
Toolchains
00:50
111
Conceptual Aside: Toolchains
03:50
112
Conceptual Aside: ES Modules
06:02
113
Create React App
01:53
114
Vite
18:46
115
Frameworks
03:51
116
Strict Mode
00:33
117
Adding Strict Mode
03:34
118
Extra Re-render
10:28
119
Extra Effect Re-run
09:14
120
Forms
00:18
121
Reorganizing Our App
15:05
122
Uncontrolled Inputs
05:29
123
Controlled Inputs
13:44
124
form
08:00
125
textarea, select, and More
11:17
126
3rd Party Form Help
01:58
127
Future Form Features
02:13
128
React Dev Tools
00:17
129
Using Dev Tools
03:22
130
useDebugValue
01:47
131
CSS and Components
00:24
132
CSS and React
03:16
133
Toolchains and CSS
04:11
134
CSS Modules and more
04:12
135
Class Project
00:24
136
Spelling Bee
01:59
137
HTML Authoring
03:22
138
Getting the Data
06:22
139
Header
08:49
140
Honeycomb
14:34
141
Shuffle
09:30
142
Words and Letters
12:10
143
Word List
14:50
144
Score
06:07
145
Highlighted Letter
06:09
146
Final Thoughts
03:30
147
Meta-Frameworks
00:21
148
NextJS
03:42
149
Remix
02:26
150
Suspense
00:31
151
Suspense and Frameworks
03:45
152
Suspense and Remix
10:16
153
React Server Components
00:53
154
Server Components
11:55
155
Client Components and 'use client'
05:29
156
RSC Payload
07:59
157
Composing Client and Server Components
07:30
158
Conclusion
01:37
159
UPDATE - 001 - use and Fetching Data (React 19+)
00:26
160
UPDATE - 002 - use and Fetching Data (Part 1)
08:58
161
UPDATE - 003 - use and Fetching Data (Part 2)
07:26
162
UPDATE - 004 - ref as a prop (React 19+)
02:24
163
UPDATE - 005 - use and Context (React 19+)
05:11
164
UPDATE - 006 - use, Reducer, and Context (React 19+)
01:31
Unlock unlimited learning

Get instant access to all 163 lessons in this course, plus thousands of other premium courses. One subscription, unlimited knowledge.

Learn more about subscription

Related courses

  • Advanced Animating React with Framer Motion thumbnailUpdated 2y ago

    Advanced Animating React with Framer Motion

    By: Level Up Tutorials (Scott Tolinski)
    Welcome to Advanced Animating React with Framer Motion! In this series, we will dive into more advanced concepts as well as discuss what is new in Framer Motion
    2h 57m5/5
  • Build and Deploy a Lovable Clone thumbnailUpdated 9mo ago

    Build and Deploy a Lovable Clone

    By: Antonio Erdeljac (Code With Antonio)
    Unlock the potential of AI in application development with this comprehensive course, where you will build and deploy an innovative AI platform from scratch.
    10h 34m
  • Build and Deploy an AI Automation SaaS thumbnailUpdated 3mo ago

    Build and Deploy an AI Automation SaaS

    By: Antonio Erdeljac (Code With Antonio)
    Master the creation of AI-SaaS: developing Nodebase, automating processes, AI integration, and implementing monetization. A practical guide from idea to launch.
    11h 59m

Frequently asked questions

What are the prerequisites for this course?
The course is designed for both beginners and experienced React developers. However, a basic understanding of JavaScript and web development concepts would be beneficial for grasping the material effectively. Familiarity with HTML and CSS is also recommended as the course involves working with the DOM and declarative programming.
How does this course differ from other React courses?
Unlike many courses that focus solely on building applications, this course emphasizes understanding React at a deeper level by exploring its internals and source code. It covers topics such as React Elements, Fiber, reconciliation, and the event loop, offering insights into how React truly operates under the hood.
What specific tools or platforms will I learn about in this course?
The course involves working with the React source code and explores concepts like React Elements, Fiber, reconciliation, and the DOM. It does not focus on specific third-party tools or platforms but rather the core React library and its internal workings.
What is the time commitment for completing this course?
The course consists of 164 lessons, covering various topics related to React internals. While the total runtime is not specified, students should expect to invest a significant amount of time to thoroughly work through each lesson and understand the material.
What projects or applications will I build during the course?
The course focuses on understanding the internals of React rather than building specific projects. Students will explore how React works by examining the React source code and concepts like React Elements, reconciliation, and the Fiber architecture.
What topics are not covered in this course?
The course does not cover the use of third-party libraries or tools beyond React itself. It also does not focus on advanced topics like server-side rendering, state management libraries beyond React's built-in capabilities, or testing frameworks.
How will this course benefit my career in web development?
By understanding how React works internally, developers can improve their debugging skills and write more efficient React applications. This deep understanding can also benefit those looking to advance in roles that require extensive knowledge of React or contribute to React's development community.