Class Central is learner-supported. When you buy through links on our site, we may earn an affiliate commission.

Zero To Mastery

Inside React: Learn How React Really Works

via Zero To Mastery Path

Go to class Write review

Overview

Coding today requires more than memorizing syntax (something AI can do for you). In this course you'll work directly with React's source code to understand how it really works so you can build with confidence.
  • Work directly with React's source code to understand how it really works
  • Build an accurate mental model of React
  • Learn what's important for crafting React code in the age of AI
  • Recognize common React pitfalls and debug with greater confidence
  • Make better architectural decisions while using AI to write the syntax
  • Work effectively with modern frameworks and adapt to new React features faster

Syllabus

  •   Section 0: Introduction
    • Introduction
    • Exercise: Meet Your Classmates and Instructor
    • Understanding Your Video Player
    • Set Your Learning Streak Goal
    • Course Resources
  •   Section 1: Inside React
    • Setup: Getting Ready to Learn
    • A Basic React App
    • The React Source Code
  •   Section 2: The Document Object Model (DOM) and Declarative Programming
    • Introduction
    • 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
    • Let's Have Some Fun (+ More Resources)
  •   Section 3: React Elements
    • Introducing React Elements
    • Conceptual Aside: Recursion
    • Conceptual Aside: POJOS (Plain Old Javascript Objects)
    • Creating React Elements
    • React Element Trees
    • Conceptual Aside: DOM Element References
    • React Elements and DOM Elements
    • React DOM Updates: React's Imperative Code
    • Components
    • Components and Reusability
    • Conceptual Aside: Pure Functions
    • Props: Function Arguments
    • Template Logic: Logic and Building Trees
    • Element Properties
    • Unlimited Updates
  •   Section 4: JSX (Java Script XML) - React
    • Introducing JSX
    • Conceptual Aside: Markup and Tree Creation Shorthand
    • Conceptual Aside: Transformation and Transpilation
    • React Elements and JSX
    • JSX and Logic
    • Conceptual Aside: HTML Authoring
    • Fragment and HTML Authoring
    • Implement a New Life System
  •   Section 5: Fiber and Reconciliation
    • Introducing Fiber and Reconciliation
    • Root Creation and Render
    • Conceptual Aside: Trees and Linked Lists
    • Fiber Nodes and Fiber Trees
    • Conceptual Aside: Tree Reconciliation and the Tree Edit Distance Problem
    • Work-in-Progress Nodes
    • Reconciliation and Work
    • Course Check-In
  •   Section 6: Execution Context
    • Introducing Execution Context
    • Conceptual Aside: Execution Contexts and the Event Loop
    • Fiber and Custom Execution Context
    • Units of Work and the Work Loop
    • Conceptual Aside: Equality
    • Beginning, Completing, Bailing Out, and Pausing Work
    • Lanes and Priority
  •   Section 7: React DOM and Rendering
    • Introducing React DOM and Rendering
    • Commiting Work and the Renderer
    • Mounting, Updating, and Unmounting
  •   Section 8: Events
    • Introducing Events
    • DOM Events
    • React Event Objects
    • Synthetic Event Properties and Methods
    • Exercise: Imposter Syndrome
  •   Section 9: State in Programming
    • Introducing State
    • Conceptual Aside: State Machines
    • Conceptual Aside: Pure Functions
    • User Interface (UI): a Function of State
    • Conceptual Aside: Reducers
    • Actions and State
  •   Section 10: Hooks and State
    • Introducing Hooks and State
    • Fiber, 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
  •   Section 11: Adding Your Own Side Effects: useEffect
    • Introduction
    • Conceptual Aside: Pure Functions and Side Effects
    • Adding Your Own Effects: useEffect
    • 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
    • Fetching Data - Part 1
    • Fetching Data - Part 2
  •   Section 12: useRef and forwardRef
    • Introduction
    • useRef
    • useRef and the DOM
    • forwardRef
    • Ref as a Prop
  •   Section 13: Custom Hooks
    • Introduction
    • Extracting Custom Hooks
  •   Section 14: Component Design
    • Introduction
    • Real World Complexity and Loops
    • Lifting State Up
    • &&, 0 and Ternary Operators
    • .children
  •   Section 15: Context and useContext Hooks
    • useContext
    • Prop Drilling
    • Context
    • Context with Caution
    • Use and Context
  •   Section 16: useID and Key
    • Introduction
    • useID
    • Key
  •   Section 17: Memo, useMemo, and useCallback
    • Introduction
    • Conceptual Aside: Memoization
    • Memo
    • useMemo
    • useCallback
    • React Forget
  •   Section 18: useContext and Reducer
    • Introduction
    • useContext + useReducer
    • Third Party State Management
    • Use, Reducer, and Context
  •   Section 19: Toolchains
    • Intoduction
    • Conceptual Aside: Toolchain
    • Conceptual Aside: ES Modules
    • Create-React-App
    • Vite
    • Frameworks
  •   Section 20: Strict Mode
    • Introduction
    • Adding Strict Mode
    • Extra Re-Render
    • Extra Effect Re-Run
  •   Section 21: Forms
    • Introduction
    • Reorganizing Our App
    • Uncontrolled Inputs
    • Controlled Inputs
    • Form
    • Textarea, Select, and More
    • Third Party Form Help
    • Future Form Futures
  •   Section 22: React Developer Tools
    • Introduction
    • Using Dev Tools
    • useDebugValue
  •   Section 23: CSS and Components
    • Introduction
    • CSS and React
    • Toolchains and CSS
    • CSS Modules and More
  •   Section 24: Class Project - Spelling Bee
    • Introduction
    • Spelling Bee
    • XTML Authoring
    • Getting the Data
    • Header
    • Honeycomb
    • Shuffle
    • Words and Letters
    • Word List
    • Final Thoughts
    • Score
    • Highlighted Letter
  •   Section 25: Meta-Frameworks
    • Introduction
    • Next.js
    • Remix
  •   Section 26: Suspense
    • Introduction
    • What is Suspense?
    • Suspense and Remix
  •   Section 27: React Server Components (RSC)
    • Introduction
    • Server Components
    • Client Components
    • RSC Payload
    • Composing Server and Client components
  •   Section 28: Conclusion
    • Congratulations!
  •   Section 29: Where To Go From Here?
    • Thank You!
    • Review This Course!
    • Become An Alumni
    • Learning Guideline
    • ZTM Events Every Month
    • LinkedIn Endorsements

Taught by

Tony Alicea

Reviews

Start your review of Inside React: Learn How React Really Works

Go to class

Never Stop Learning.

Get personalized course recommendations, track subjects and courses with reminders, and more.

Sign up for free
Someone learning on their laptop while sitting on the floor.