Expanding Your Craft

Understanding React

Master React's internals and source code for deep understanding of how it really works.

17 hrs, self-paced
Popular Course

How This Course Is Different

Most React learning focuses on what to type, not why it works. That’s why bugs feel unpredictable, rules feel arbitrary, and debugging turns into trial and error, even for experienced developers.

This course is about building an accurate mental model of React.

Instead of memorizing patterns, you’ll understand how React actually works internally, so behavior becomes predictable, debugging gets faster, and your confidence improves.

Nicolás Omar González Passerino

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've studied with Tony Alicea.

Nicolás Omar González Passerino

Technical Lead | Sr. Front-End Developer, Globant

What You’ll Understand

We work directly from React’s source code to explain:

  • Why JSX exists and what it’s really abstracting you away from.
  • What Fiber is and why it exists.
  • How reconciliation actually works.
  • How React schedules work and updates.
  • How hooks works and why common “rules” exist in the first place.

These mental models apply whether you’re using React directly or working with Next.js, TanStack Start, Remix, React Router, or other React-based frameworks.

Why This Matters

React is a required skill in today’s job market, but many developers who use it daily still struggle to explain why it behaves the way it does.

That gap shows up as:

  • Inefficient code
  • Fragile fixes
  • Slow, stressful debugging
  • Struggles to guide or fix AI-generated code

Understanding React’s internals turns those problems into reasoning problems instead of guessing games.

How This Course Approaches React

You won’t imitate me typing. We won’t write a line of code that isn’t fully explained.

I’ve already done the work of reading React’s source code. In this course, we walk through it together, step by step, so you can finally understand React instead of memorizing it.

Whether you’re new to React or have years of experience, the goal is the same: React should feel predictable.

Self-Paced, Not A Project Course

Every module builds on the other to give you an accurate mental model and gain clarity.

However you don’t have to watch it all at once. Every module will teach you something concrete that will help you in your work.

This isn’t a “finish the project” course (there is a project at the end), but a learning course where you are actually educated on React, not given simply given code to parrot.

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.

That’s also why senior developers, leads, and architects tell me this course made Next.js, Server Components, and modern React patterns finally click, because they understood the foundation.

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.

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 approach React like a computer scientist, but I teach you the computer science part too. For example, React’s internal architecture uses the linked lists data structure a lot, so we talk linked lists and how React uses them.

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 representation of the reconciliation process inside React, showing current and work-in-progress branches of the tree which are compared to calculate what updates to make to the real DOM tree

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 17 hours of video and is split into 31 self-paced modules that build on each other. 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.

Team Seats Available

This course has been used by entire teams for team onboarding, shared learning, and unification by improving overall team skill.

When your team understands React from the same foundational mental model, you spend less time debating patterns and struggling with bugs, and more time building.

Purchase seats at a bundled discount using the “For My Team” option.

See How I Teach

I’ve made the first six hours public so you can see how I teach. That’s a lot for free! I do this because most developers enroll in the course once they see how a proper mental model of React impacts their day-to-day work and stress.

But I’ll bet you don’t need to watch all 6 hours to see how you’ll benefit.

Curriculum

Introduction
Setup
A Basic React App
The React Source Code
The DOM and Declarative Programming
HTML and Trees
HTML, The Browser, and the DOM
DOM Manipulation
Conceptual Aside: Imperative vs. Declarative Programming
The DOM and Imperative Programming
The DOM and Declarative Programming
React Elements
Conceptual Aside: Recursion
Conceptual Aside: POJOs
Creating React Elements
React 19 Files
React Element Trees
Conceptual Aside: DOM Element References
React Elements and DOM Elements
React DOM Updates
Components
Components and Reusability
Conceptual Aside: Pure Functions
Props
Template Logic
Element Properties
JSX
Conceptual Aside: Markup and Tree Creation Shorthand
Conceptual Aside: Transformation
React Elements and JSX
React 19 Babel Setup
JSX and Thinking In Elements
Conceptual Aside: HTML Authoring
Fragment and HTML Authoring
Fiber and Reconciliation
Root Creation and render
Conceptual Aside: Trees and Linked Lists
Fiber, Fiber Nodes, and Fiber Trees
Conceptual Aside: Tree Reconciliation and the Tree Edit Distance Problem
Work-In-Progress Nodes
Reconciliation and Work
Execution Contexts
Conceptual Aside: Execution Contexts and the Event Loop
Fiber and Custom Execution Contexts
Units of Work and The Work Loop
Conceptual Aside: Equality
Beginning, Completing, Bailing Out and Pausing Work
Lanes and Priority
React DOM and Rendering
Committing Work and The Renderer
Mounting, Updating, and Unmounting
Events
DOM Events
React Event Objects
Synthetic Event Properties and Methods
State
Conceptual Aside: State Machines
Conceptual Aside: Pure Functions (again)
UI: A Function of State
Conceptual Aside: Reducers
Actions and State
Hooks and State
Fibers, Hooks, and State
Conceptual Aside: Queues
Update Queues
State and Re-renders
useReducer (Part 1)
useReducer (Part 2)
useState (Part 1)
useState (Part 2)
Rules of Hooks
useState (Part 3)
Conceptual Aside: Shallow Equality and Object.is
Immutable State
Adding Your Own Side Effects: useEffect
Conceptual Aside: Pure Functions and Side Effects
Adding Your Own Effects
Dependencies
A Game of Ping Pong
Unmounting and Effects
Fetching Data...or not
Conceptual Aside: Stale Closures
useEffect and Stale Closures
What Not to Do
use and Fetching Data (React 19+)
use and Fetching Data (Part 1)
use and Fetching Data (Part 2)
useRef and forwardRef
useRef
useRef and the DOM
forwardRef
ref as a prop (React 19+)
Custom Hooks
Extracting Custom Hooks
Component Design
Real World Complexity and Loops
Lifting State Up
&&, 0, and Ternary Operators
Children
useContext
Prop Drilling
Context
Context with Caution
use and Context (React 19+)
useId and Key
useId
Key
memo, useMemo, and useCallback
Conceptual Aside: Memoization
memo
useMemo
useCallback
React Compiler
useContext and Reducer
useContext + Reducer
3rd Party State Management
use, Reducer, and Context (React 19+)
Toolchains
Conceptual Aside: Toolchains
Conceptual Aside: ES Modules
Create React App
Vite
Frameworks
Strict Mode
Adding Strict Mode
Extra Re-render
Extra Effect Re-run
Forms
Reorganizing Our App
Uncontrolled Inputs
Controlled Inputs
form
textarea, select, and More
3rd Party Form Help
React 19+ Form Features
React Dev Tools
Using Dev Tools
useDebugValue
CSS and Components
CSS and React
Toolchains and CSS
CSS Modules and more
Class Project
Spelling Bee
HTML Authoring
Getting the Data
Header
Honeycomb
Shuffle
Words and Letters
Word List
Score
Highlighted Letter
Final Thoughts
Things to Try
Meta-Frameworks
NextJS
Remix
Suspense
Suspense and Frameworks
Suspense and Remix
React Server Components
Server Components
Client Components and 'use client'
RSC Payload
Composing Client and Server Components
RSCs In Depth
Thank you (and your feedback)!
Conclusion

What Students Are Saying

Hear from students who have taken this course

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 Pham

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 course I have taken on React and I have taken a few to be honest. You have over delivered on this Tony. You are the only tutor I can truly say cares deeply about his students. You really want your students to understand these technologies and that means a lot.

Eyitayo Olaigbe

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.

Thank you for creating such an insightful and comprehensive course. Your explanations of core concepts like the react element tree, fiber tree, the reconciliation process, and so much more, have truly changed the way approach any React code. Thanks again!

Marco Haber

Outstanding explanation of ALL the react's fundamental aspects! Like with all Tony's courses, once you get it (as he says - you build the proper mental model ;-) ), it stays with you forever. This course and the rest of Tony's courses make you stand strong and adapt quick in the changing environment. Thank you, Tony, so much for your hard work and extra effort you made for us!

Darius Jasaitis

As always, your content is king in this sea of AI slog and superficial tutorials! Even though I am an experienced developer, I always learn a ton of stuff and lots of concepts click when I watch your materials. Kind regards and keep up the awesome work!

Rodrigo R. Bento

Ready to enroll?

Start learning today and unlock your potential.

Don't Imitate Understand by Tony Alicea. Courses, coaching, and more to grow you from beginner to dev to lead to architect and beyond in the age of AI-assisted software development.

Copyright 2026 Pioneering Pathways, LLC. All Rights Reserved