Leanpub Header

Skip to main content

The way of React

Reinventing React from Scratch

A hands-on journey through the evolution of React. reinvent React from scratch — The entire journey is written as a conversation — Socratic, exploratory, and built on first principles.

Minimum price

$4.98

$14.98

You pay

$14.98

Author earns

$11.98
$

...Or Buy With Credits!

You can get credits with a paid monthly or annual Reader Membership, or you can buy them here.
PDF
EPUB
WEB
240
Pages
About

About

About the Book

Note 👉: This book is also free on https://github.com/sapjax/the-way-of-react.

What This Book Is About

"What I cannot create, I do not understand."

— Richard Feynman

In this book, you will reinvent React from scratch with your own hands.

Not learning how to use React's API — but retracing the entire evolutionary path through which React was invented. You will start from the most primitive document.createElement, experience every pain point firsthand, and naturally derive solutions from those pain points. In the end, you will find that these solutions are exactly the core architectural ideas behind React.

Each chapter follows the same pattern: feel the pain first, then derive the solution, then write it yourself. By the end, you will have a mini-react of about 400 lines — small but complete — containing Virtual DOM, Time Slicing, Fiber Reconciliation, synchronous Commit, and the core Hooks.

Writing Style: Socratic Dialogue

This book unfolds entirely in conversation form, driven by two characters:

  • Shifu (🧙‍♂️): A wise mentor who knows the history of frontend evolution inside out. He never gives you answers to memorize — he guides Po to derive the answers himself through layers of questions.
  • Po (🐼): A smart panda with no React experience but solid fundamentals, full of curiosity, and good at asking the right questions.

This narrative draws on two sources of inspiration:

The Socratic Method — guiding students to discover truth through questions rather than passive instruction. Shifu never says "React uses a Virtual DOM." Instead he asks: "If every state change requires you to redraw the whole UI, but you don't want to tear down the real DOM tree each time, what would you do?" — and Po derives the concept of Virtual DOM step by step using his own intuition.

The style of Operating Systems: Three Easy Pieces (OSTEP) — Remzi and Andrea Arpaci-Dusseau's OS textbook cleverly uses light conversation and carefully designed code to make highly complex operating system concepts approachable. OSTEP proves one thing: the deepest technical principles can be told in the most natural plain language. This book pursues the same reading experience — you don't need to sit up straight and "grind through it." Just follow Po and Shifu's conversation like listening to a story.

At the end of each chapter, you will take away a fully runnable HTML file under a few hundred lines — you can double-click it to open in a browser, modify the code, and verify everything you just learned. No npm, no webpack, no painful build tooling. Just pure JavaScript and your browser.

Who This Book Is For

This book assumes you have basic knowledge of JavaScript, HTML, and DOM manipulation.

You may have never touched React, or even used any frontend framework, and simply want to build a clear mental model of React from the ground up.

Or you may have used React heavily at work but know little about how it works internally, and want to lift the lid off this black box to see what's inside.

Either way, this book is written for you.

We will build React's mechanisms piece by piece. Every concept is derived from first principles in dialogue, with each step grounded in reason.

This is a self-contained journey. As long as you know JavaScript, you already have everything you need.

Beyond React

Today's frontend world is noisier than ever. SolidJS, Svelte, Qwik, Angular Signals — new frameworks and paradigms keep emerging.

In such an era, memorizing React's API is the worst learning strategy. Because APIs change.

What won't easily change are the engineering trade-offs hidden behind them:

  • Declarative vs. Imperative
  • Full re-render vs. Fine-grained updates
  • Runtime flexibility vs. Compile-time optimization (React Compiler / Forget)
  • Concurrent scheduling with time slicing vs. traditional synchronous rendering
  • The cost of client-side Hydration vs. the zero-bundle ideal of Server Components (RSC)

Once you understand these trade-offs, you understand not just React — you see through the design considerations of all UI frameworks. No matter what new framework appears in the future, you'll be able to instantly see through to its core ideas, because on the road to first principles, you've already built them yourself.

Author

About the Author

sapjax

This guy is mysterious.

Contents

Table of Contents

Preface: The Way

  1. What This Book Is About
  2. Writing Style: Socratic Dialogue
  3. Who This Book Is For
  4. Beyond React

Chapter 1: The Raw DOM — Where Everything Begins

  1. 1.1 Starting From Zero
  2. 1.2 Po’s Attempt (The Imperative Way)
  3. 1.3 Pain Point Analysis: Imperative Programming
  4. 1.4 Performance Trap: Reflow & Repaint
  5. 1.5 Lost State (State vs DOM)
  6. 1.6 Looking Back

Chapter 2: The Template Era — UI as a String

  1. 2.1 Describe, Don’t Instruct
  2. 2.2 A Simple Template Engine
  3. 2.3 Rewriting the Todo List with Templates
  4. 2.4 The Destroy-and-Rebuild Problem
  5. 2.5 Security Risk (XSS)
  6. 2.6 A Historical Note: Logic-less Templates (2009–2010)
  7. 2.7 One Step Further

Chapter 3: The Dawn of Data Binding

  1. 3.1 Seeking Balance
  2. 3.2 Data That Talks
  3. 3.3 Rewriting the Todo List with MVC
  4. 3.4 The Backlash of Complexity
  5. 3.5 A Historical Note: Backbone.js
  6. 3.6 Reaching the Crossroads

Chapter 4: The Big Idea — UI as a Function of State

  1. 4.1 The Desire for Simplicity
  2. 4.2 Rethinking “Refresh”
  3. 4.3 A Pure Mapping
  4. 4.4 Single Source of Truth
  5. 4.5 A Historical Note: The Birth of React (2011–2013)
  6. 4.6 Everything Is Ready

Chapter 5: Virtual DOM & Reconciliation

  1. 5.1 The Global Mental Model
  2. 5.2 Describing the UI: The h Function
  3. 5.3 The First Render: The mount Function
  4. 5.4 Reconciliation and the Diff Algorithm
  5. 5.5 The Hidden Danger of the Stack Reconciler

Chapter 6: Components & Composition

  1. 6.1 Splitting the Giant render
  2. 6.2 What Do Components Look Like
  3. 6.3 Upgrading the Engine
  4. 6.4 Props: The Bridge Between Components
  5. 6.5 Composition Over Inheritance
  6. 6.6 The Puzzle is Half Complete

Chapter 7: Class Components & Lifecycle

  1. 7.1 Giving Components Memory
  2. 7.2 Implementing setState
  3. 7.3 Lifecycle
  4. 7.4 The this Trap
  5. 7.5 Avoiding Waste: shouldComponentUpdate
  6. 7.6 The Dilemma of the God Component

Chapter 8: Patterns of Reuse

  1. 8.1 The Need for Reuse
  2. 8.2 Mixins: Mixing Logic In (2013-2015)
  3. 8.3 Higher-Order Components: Wrapping with Functions (2015-2018)
  4. 8.4 Render Props: Giving Rendering Power to the Caller (2017+)
  5. 8.5 Comparison at a Glance

Chapter 9: The Browser Freeze

  1. 9.1 The Bottomless Pit of the Stack
  2. 9.2 The Tyrannical Main Thread
  3. 9.3 Trying to Yield Control

Chapter 10: The Fiber Architecture — Building a Brand New Mental Model

  1. 10.1 The Main Thread Crisis
  2. 10.2 The Grand Strategy: Time Slicing and Two Phases
  3. 10.3 Double Buffering: The Draft and The Blueprint
  4. 10.4 Breaking Free: The Fiber Linked List
  5. 10.5 The Engine’s Blueprint (WorkLoop)

Chapter 11: Reconciliation & Commit — Filling in the Engine’s Blueprint

  1. 11.1 Standardizing the Node Format (Refactoring the h function)
  2. 11.2 Initializing the Engine State
  3. 11.3 Unveiling the First Black Box: performUnitOfWork
  4. 11.4 Unveiling the Second Black Box: commitRoot
  5. 11.5 The Changing of the Guard

Chapter 12: Hooks — The Memory of Functions

  1. 12.1 Leaving the Old Baggage Behind
  2. 12.2 Functions Have “Amnesia”
  3. 12.3 First Attempt: Global Variable
  4. 12.4 Give Memory to Fiber — Each Component Has Its Own “Drawer Cabinet”
  5. 12.5 Making setState Trigger Updates
  6. 12.6 The Iron Rule of Hooks: Can’t Go Inside if
  7. 12.7 A Historic Moment: React Conf 2018
  8. 12.8 Try It Yourself

Chapter 13: Effects and Memoization — Bringing Order to Time

  1. 13.1 The Side Effect Problem
  2. 13.2 Isolate Side Effects to After Commit
  3. 13.3 Escape the Reactive Cage (useRef)
  4. 13.4 Caching Computed Results (useMemo)
  5. 13.5 All Rivers Flow to the Sea

Chapter 14: State Management and the Cross-Layer Bridge

  1. 14.1 The Pain of Prop Drilling
  2. 14.2 Centralizing State Logic: useReducer
  3. 14.3 Global State: createStore (Mini-Redux)
  4. 14.4 The Context API in the Fiber Era
  5. 14.5 The Landscape and Future of State Management
  6. 14.6 Extended Reading: React vs Signals (SolidJS)
  7. 14.7 Comparison Overview

Chapter 15: From Concurrent to Server — React’s Ultimate Form

  1. 15.1 The Last Piece
  2. 15.2 Concurrency and Priority Scheduling
  3. 15.3 Suspense: Graceful Waiting
  4. 15.4 Limitations of SPAs
  5. 15.5 SSR: Back to the Server
  6. 15.6 SSG and ISR: The Static Temptation
  7. 15.7 React Server Components (RSC)
  8. 15.8 Looking Back: You’ve “Reinvented” React
  9. 15.9 The Final Chapter: Principle and Tool

Appendix A: Mini-React vs React — What We Simplified

  1. What Else Does Real React Handle? (Differences)
  2. Complete Mini-React (Fiber) Source Code

The Leanpub 60 Day 100% Happiness Guarantee

Within 60 days of purchase you can get a 100% refund on any Leanpub purchase, in two clicks.

Now, this is technically risky for us, since you'll have the book or course files either way. But we're so confident in our products and services, and in our authors and readers, that we're happy to offer a full money back guarantee for everything we sell.

You can only find out how good something is by trying it, and because of our 100% money back guarantee there's literally no risk to do so!

So, there's no reason not to click the Add to Cart button, is there?

See full terms...

Earn $8 on a $10 Purchase, and $16 on a $20 Purchase

We pay 80% royalties on purchases of $7.99 or more, and 80% royalties minus a 50 cent flat fee on purchases between $0.99 and $7.98. You earn $8 on a $10 sale, and $16 on a $20 sale. So, if we sell 5000 non-refunded copies of your book for $20, you'll earn $80,000.

(Yes, some authors have already earned much more than that on Leanpub.)

In fact, authors have earned over $14 million writing, publishing and selling on Leanpub.

Learn more about writing on Leanpub

Free Updates. DRM Free.

If you buy a Leanpub book, you get free updates for as long as the author updates the book! Many authors use Leanpub to publish their books in-progress, while they are writing them. All readers get free updates, regardless of when they bought the book or how much they paid (including free).

Most Leanpub books are available in PDF (for computers) and EPUB (for phones, tablets and Kindle). The formats that a book includes are shown at the top right corner of this page.

Finally, Leanpub books don't have any DRM copy-protection nonsense, so you can easily read them on any supported device.

Learn more about Leanpub's ebook formats and where to read them

Write and Publish on Leanpub

You can use Leanpub to easily write, publish and sell in-progress and completed ebooks and online courses!

Leanpub is a powerful platform for serious authors, combining a simple, elegant writing and publishing workflow with a store focused on selling in-progress ebooks.

Leanpub is a magical typewriter for authors: just write in plain text, and to publish your ebook, just click a button. (Or, if you are producing your ebook your own way, you can even upload your own PDF and/or EPUB files and then publish with one click!) It really is that easy.

Learn more about writing on Leanpub