In Understanding React you will gain deep understanding, demolish imposter syndrome, and go inside React internals in this comprehensive video course.
by Tony Alicea
You're about to master React in a way that few others do. By truly understanding it, under-the-hood.
React is a required skill in the modern web development job market. But even devs experienced in React struggle with understanding it fully, and thus struggle with writing efficient code and debugging it quickly.
Everyone tries to learn! Maybe you've spent lots of time mimicing instructors, typing what they type like a robot parrot. The problem is that doesn't lead to true understanding.
In this course, you'll gain the most powerful tool a developer can have: an accurate mental model - which leads to unparalleled confidence and calm while coding.
I've read all of React's source code for you, and you're about to dive into it with me. Whether new or experienced, you're about to understand React.
★★★★★
"This should be a must-take course for any React developer (even more so for people like me, with 4 years of experience, and I learned A LOT here). Every section is carefully constructed to build on the previous one and build a greater knowledge of React. You cannot say you understand React until you have studied with Tony Alicea."
I've used, taught, and enjoyed other frameworks like Vue, Angular, Solid, and Qwik. But in today's job market, developers cannot and should not ignore React.
See the top line? That's React. React's popularity isn't waning. It's rising.
As a web developer, you need to understand React.
React can be fun and interesting to use...if you understand it.
But I Already Know React!
A lot of developers have experience using React, and have built things with it! But that's not the same thing as the cool confidence that comes from understanding how React works.
I've given talks on React and watched as a room full of devs currently using React drop their heads and start frantically writing notes as they see how React internals work. Why? Because there is great value in deeply understanding.
Understanding yields better coding choices and most strikingly faster, easier debugging. When you know how something works it's far easier to fix things when something goes wrong.
That's what you'll get in this course. I'm proud to say experienced React devs, after taking this course, have said that an accurate mental model has changed their dev life.
But I Don't Know React!
That's great! Then you don't have any incorrect mental models to undo.
This course will take you up from the very beginnings of the problems React was designed to solve, through JSX, how React works under-the-hood, and more.
It's also perfect for people who've never used React at all.
Don't Imitate, Understand
A lot of courses will use terms like "deep dive" and "under-the-hood", but not actually provide deep understanding.
I call the technique I use "don't imitate, understand". If you just parrot what the instructor is typing on the screen you might end up with a finished product. But as soon as you're dealing with challenges and problems in a real-world job, you'll realize the parroting didn't teach you all that much.
Instead of spending hours imitating me typing, we're going to dive deep together into React's source code to truly, deeply understand it.
We'll write plenty of code along the way, including project work. But we won't write a line of code we don't fully break down and understand.
JavaScript, Browsers, and Computer Science
As we dig into React's internals, we'll discuss the underlying algorithms and data structures you need to know to understand React.
We'll stop and spend time analyzing the vocabulary of React, making sure we don't use any terms that aren't clearly explained.
We'll approach React like a computer scientist. React is just other people's JavaScript code. So why did they write the code they wrote? Why does React work the way it does? What are the benefits? What are the pitfalls?
We'll also look at JavaScript and browser concepts that underpin React's choices and best practices. Things like immutability, object references, and the browser rendering engine. All of this to service using and debugging React well.
These topics will take rules that normally would be memorized (like the rules of Hooks, "pure" component functions, and things you can't do in JSX) and instead be able to derive those rules ourselves naturally by understanding how components and Hooks are structured and work inside React.
We'll write plenty of code along the way, including project work. But we won't write a line of code that we don't already fully understand.
The Fiber Tree: Deep React Internals
A foundation of our understanding of React will be the tree data structure.
Understanding React actually means understanding three trees. The DOM, the React Element Tree, and vitally, the Fiber Tree.
Understanding core React concepts like JSX, Hooks, reconciliation, and events properly all rely on understanding the Fiber Tree, as well as core data structures like Linked Lists and Queues. In this course we cover them all together.
100s of Animations
We won't just look at code. I've put together hundreds of animations so that you can visualize what the React is doing internally and fully understand it.
Then, we put that newfound mental model to use as we build your React knowledge piece-by-piece, and work through code examples together.
The Curriculum
The course contains 16.5 hours of video and is split into 30 modules. I've designed the course to be useful and accessible to developers new to React and will provide a deeper mental model and understanding to devs experienced in React.
You'll also get access to 80 zip files containing the code in the lectures so you can compare with your own.
And you can always ask questions in the lecture forums, where I answer personally.
The course covers a wide range of topics in a logical, progressive order. From JSX to Hooks to State and Context to React Server Components and so much more.
There's another thing I show you here that other courses don't. Rather than adding <div> elements everywhere, I show you how to think through marking up your React components with semantic, accessible HTML that improves your code's readability, maintainability, and SEO.
Here's the full curriculum for all 30 modules (select a module for more details):
Module 1Introduction
Lecture #1Introduction
Lecture #2Setup
Lecture #3A Basic React App
Lecture #4The React Source Code
Module 2The DOM and Declarative Programming
Lecture #5The DOM and Declarative Programming
Lecture #6HTML and Trees
Lecture #7HTML, The Browser, and the DOM
Lecture #8DOM Manipulation
Lecture #9Conceptual Aside: Imperative vs. Declarative Programming
Lecture #10The DOM and Imperative Programming
Lecture #11The DOM and Declarative Programming
Module 3React Elements
Lecture #12React Elements
Lecture #13Conceptual Aside: Recursion
Lecture #14Conceptual Aside: POJOs
Lecture #15Creating React Elements
Lecture #16React Element Trees
Lecture #17Conceptual Aside: DOM Element References
Lecture #18React Elements and DOM Elements
Lecture #19React DOM Updates
Module 4Components
Lecture #20Components
Lecture #21Components and Reusability
Lecture #22Conceptual Aside: Pure Functions
Lecture #23Props
Lecture #24Template Logic
Lecture #25Element Properties
Module 5JSX
Lecture #26JSX
Lecture #27Conceptual Aside: Markup and Tree Creation Shorthand
Lecture #28Conceptual Aside: Transformation
Lecture #29React Elements and JSX
Lecture #30JSX and Thinking In Elements
Lecture #31Conceptual Aside: HTML Authoring
Lecture #32Fragment and HTML Authoring
Module 6Fiber and Reconciliation
Lecture #33Fiber and Reconciliation
Lecture #34Root Creation and render
Lecture #35Conceptual Aside: Trees and Linked Lists
Lecture #36Fiber, Fiber Nodes, and Fiber Trees
Lecture #37Conceptual Aside: Tree Reconciliation and the Tree Edit Distance Problem
Lecture #38Work-In-Progress Nodes
Lecture #39Reconciliation and Work
Module 7Execution Contexts and Pausing Work
Lecture #40Execution Contexts
Lecture #41Conceptual Aside: Execution Contexts and the Event Loop
Lecture #42Fiber and Custom Execution Contexts
Lecture #43Units of Work and The Work Loop
Lecture #44Conceptual Aside: Equality
Lecture #45Beginning, Completing, Bailing Out and Pausing Work
Lecture #46Lanes and Priority
Module 8React DOM and Rendering
Lecture #47React DOM and Rendering
Lecture #48Committing Work and The Renderer
Lecture #49Mounting, Updating, and Unmounting
Module 9Events
Lecture #50Events
Lecture #51DOM Events
Lecture #52React Event Objects
Lecture #53Synthetic Event Properties and Methods
Module 10State
Lecture #54State
Lecture #55Conceptual Aside: State Machines
Lecture #56Conceptual Aside: Pure Functions (again)
Lecture #57UI: A Function of State
Lecture #58Conceptual Aside: Reducers
Lecture #59Actions and State
Module 11Hooks, State, and Reducers
Lecture #60Hooks and State
Lecture #61Fibers, Hooks, and State
Lecture #62Conceptual Aside: Queues
Lecture #63Update Queues
Lecture #64State and Re-renders
Lecture #65useReducer (Part 1)
Lecture #66useReducer (Part 2)
Lecture #67useState (Part 1)
Lecture #68useState (Part 2)
Lecture #69Rules of Hooks
Lecture #70useState (Part 3)
Module 12Conceptual Aside: Shallow Equality and Object.is
Lecture #71Conceptual Aside: Shallow Equality and Object.is
Lecture #72Immutable State
Module 13Adding Your Own Side Effects: useEffect
Lecture #73Adding Your Own Side Effects: useEffect
Lecture #74Conceptual Aside: Pure Functions and Side Effects
Lecture #75Adding Your Own Effects
Lecture #76Dependencies
Lecture #77A Game of Ping Pong
Lecture #78Unmounting and Effects
Lecture #79Fetching Data...or not
Lecture #80Conceptual Aside: Stale Closures
Lecture #81useEffect and Stale Closures
Lecture #82What Not to Do
Module 14useRef and forwardRef
Lecture #83useRef and forwardRef
Lecture #84useRef
Lecture #85useRef and the DOM
Lecture #86forwardRef
Module 15Custom Hooks
Lecture #87Custom Hooks
Lecture #88Extracting Custom Hooks
Module 16Component Design
Lecture #89Component Design
Lecture #90Real World Complexity and Loops
Lecture #91Lifting State Up
Lecture #92&&, 0, and Ternary Operators
Lecture #93Children
Module 17useContext
Lecture #94useContext
Lecture #95Prop Drilling
Lecture #96Context
Lecture #97Context with Caution
Module 18useId and Key
Lecture #98useId and Key
Lecture #99useId
Lecture #100Key
Module 19memo, useMemo, and useCallback
Lecture #101memo, useMemo, and useCallback
Lecture #102Conceptual Aside: Memoization
Lecture #103memo
Lecture #104useMemo
Lecture #105
Lecture #106React Forget
Module 20useContext and Reducer
Lecture #107useContext and Reducer
Lecture #108useContext + Reducer
Module 213rd Party State Management
Lecture #1093rd Party State Management
Module 22Toolchains
Lecture #110Toolchains
Lecture #111Conceptual Aside: Toolchains
Lecture #112Conceptual Aside: ES Modules
Lecture #113Create React App
Lecture #114Vite
Lecture #115Frameworks
Module 23Strict Mode
Lecture #116Strict Mode
Lecture #117Adding Strict Mode
Lecture #118Extra Re-render
Lecture #119Extra Effect Re-run
Module 24Forms
Lecture #120Forms
Lecture #121Reorganizing Our App
Lecture #122Uncontrolled Inputs
Lecture #123Controlled Inputs
Lecture #124form
Lecture #125textarea, select, and More
Lecture #1263rd Party Form Help
Lecture #127Future Form Features
Module 25React Dev Tools
Lecture #128React Dev Tools
Lecture #129Using Dev Tools
Lecture #130useDebugValue
Module 26CSS and Components
Lecture #131CSS and Components
Lecture #132CSS and React
Lecture #133Toolchains and CSS
Lecture #134CSS Modules and more
Module 27Class Project
Lecture #135Class Project
Lecture #136Spelling Bee
Lecture #137HTML Authoring
Lecture #138Getting the Data
Lecture #139Header
Lecture #140Honeycomb
Lecture #141Shuffle
Lecture #142Words and Letters
Lecture #143Word List
Lecture #144Score
Lecture #145Highlighted Letter
Lecture #146Final Thoughts
Lecture #147Things to Try
Module 28Meta-Frameworks
Lecture #148Meta-Frameworks
Lecture #149NextJS
Lecture #150Remix
Module 29Suspense
Lecture #151Suspense
Lecture #152Suspense and Frameworks
Lecture #153Suspense and Remix
Module 30React Server Components
Lecture #154React Server Components
Lecture #155Server Components
Lecture #156Client Components and 'use client'
Lecture #157RSC Payload
Lecture #158Composing Client and Server Components
Module 31Conclusion
Lecture #159Conclusion
Lecture #160Thank you (and your feedback)!
Upcoming ModulesReact 19 Content Coming Soon...
React 19 content will be added free for existing students!
What Others Are Saying
★★★★★
I highly recommend this course! Even for devs who have worked in React for years. Tony’s way of digging through the source code under the hood has completely changed my mental model. Incredibly valuable.
Heather M.
This is the best React course I have taken and I have taken a few to be honest. You have overdelivered on this Tony.
Eyitayo O.
A masterpiece of React course. Deep dive and truly understanding how things work is undoubtedly the mindset all developers must have. And Tony once again nailed it with this course.
Sy P.
Thank you Tony, for spending the time to approach React from a deeper perspective.
Nicolas G.
I have clear picture now how React is working under the hood. And also the last project was fun.
Matija R.
Remarkable course.
Nilkamal S.
Magnificent!
Miroslav M.
As a self-taught developer who transitioned from education to tech, his teaching style resonates with my teacher training – exploring the “why” instead of just the “how”, gradual build up of concepts, simple explanation of technical jargons, etc. The feeling of true understanding is a deep satisfaction that hacky tricks will not achieve.
Shelly C.
Watch The First 6 Hours For Free
I'm confident you will find this technique to be game-changing. I've seen it happen for students for a decade. It's how I've learned things during my 25 years of web dev.
I'm so confident it will help you, that I put the first 6 hours of the course for free on my YouTube channel. Feel free to watch here.
There's enough free training here, that even if you don't enroll in the full course you'll learn something about React that you didn't know before.
Meet Your Instructor
Hi, I'm Tony Alicea. I've been an application developer, database architect, UX designer, and tech educator for over 25 years.
Over 350,000 students have enrolled in my courses on Udemy, Pluralsight, and Teachable. I've been a speaker at conferences like React Summit, the biggest React conference in the world. You can read more about me and my courses on my site.
Join 1,313 Students and Gain Deep Understanding
An accurate mental model will forever benefit your dev career.
Understanding React
$149
Lifetime Access
Tax/VAT Included
INCLUDES
✓ 16.5 hours of deep dive video
✓ 30 modules (159 lessons)
✓ All source code
✓ Certificate of completion
✓ Questions answered by me personally
✓ Free future updates
Team Discounts
$356
Lifetime Access
Tax/VAT Included
💡 You'll receive special team links to enroll within 24 hours.
FAQs
How do team licenses work?
Within 24 hours of purchase you'll receive a list of links, one for each license. Each team member may then use their own link to enroll for free with their own login.
Do you offer Purchasing Power Parity (PPP) or student discounts?
Yes, I believe in PPP and student discounts. You can fill out a request form here. PPP coupons are sent out every couple of weeks.
Is this a subscription?
No. This is a one time purchase for lifetime access to the course and all future updates.