React Foundations: The Genealogy of Your Framework

"That blog post was pivotal in actually changing the broader opinion about React." — David Nolen, on how ClojureScript's Om changed React's trajectory

To understand Next.js, you must first understand React. And to understand React, you must understand where it came from—and who championed it when almost no one else would.

Jordan Walke and the Birth of React (2010-2013)

The Problem Facebook Was Facing

In 2010, Facebook was struggling with real-time updates to the News Feed. The code was becoming unwieldy, and updating the UI efficiently was a nightmare.

FaxJS: The First Prototype

The story begins when Jordan Walke, a software engineer at Facebook, created an early prototype called "FaxJS." This initial prototype, created in 2011, laid the groundwork for what would become React.

The concept focused on creating a virtual representation of the DOM that could efficiently update only the parts of the UI that changed. This approach was revolutionary because it eliminated the need for developers to manually manipulate the DOM, reducing bugs and improving performance.

The XHP Connection

React's component-based architecture was inspired by XHP, an HTML component library for PHP developed at Facebook.

XHP allowed developers to write HTML and XML elements directly in their PHP code, making it easier to create reusable UI components. Jordan Walke saw the potential in XHP and began work on a JavaScript version that would allow developers to write UI components using a similar syntax.

This is why JSX exists. Similar to XHP, React's JSX introduced the idea of treating HTML tags as first-class components, with an XML-like syntax embedded in JavaScript.

The Rules Behind the Idea

The founding principles were simple:

  1. Seamless Client-Server Rendering — Write once, render anywhere (client or server)
  2. Reactive — Views automatically updated on state changes (no bindings necessary)
  3. Performant — Fast rendering using string concatenation, small code size
  4. Structural — High-level components, functionally defined, declarative views

The Rollout

The initial reception was... not great. People thought JSX was ugly and weird. Why would you mix HTML into JavaScript?

David Nolen and the ClojureScript Awakening

The Turning Point Nobody Expected

Here's something most React tutorials never mention: React's adoption was dramatically accelerated by the ClojureScript community.

In December 2013, David Nolen introduced Om—a wrapper around React for ClojureScript users.

Om was supposed to just let ClojureScript developers use React. But something unexpected happened: Om was faster than React itself.

Why Om Was Faster

The primary reason was immutable data.

The bulk of React's work is reconciliation—comparing the virtual DOM to figure out what changed. With immutable data structures, you can skip most of this work. If the object reference is the same, nothing changed. Simple.

React's mutable JavaScript objects required deep comparisons. ClojureScript's immutable data structures made it trivial to memoize and shallow-compare.

The Blog Post That Changed Everything

According to David Nolen himself, "that blog post was pivotal in actually changing the broader opinion about React, it was really through my blog post that people started shifting and reassessing React and taking the time to really see how it works and trying it out."

His post, "The Future of JavaScript MVC Frameworks," demonstrated that React wasn't just another framework—it was a fundamentally different way of thinking about UI.

The Ripple Effect

Nolen observed the community response:

"You would see a JavaScript person say 'I read this Om post and well, ClojureScript is weird but where can I get these immutable data structures?'"

This excitement about immutable data led directly to:

The ClojureScript community doubled within six months of Om's release. And React's adoption curve bent upward.

The Evolution of React Patterns

Class Components (2013-2018)

The original way to write React. State lived in this.state. Lifecycle methods like componentDidMount controlled when things happened.

class Counter extends React.Component {
  state = { count: 0 };

  componentDidMount() {
    document.title = `Count: ${this.state.count}`;
  }

  render() {
    return <button onClick={() => this.setState({ count: this.state.count + 1 })}>
      {this.state.count}
    </button>;
  }
}

Hooks (2018-2020)

React 16.8 introduced Hooks, allowing functional components to have state and side effects. This was Dan Abramov's major contribution to React's evolution.

function Counter() {
  const [count, setCount] = useState(0);

  useEffect(() => {
    document.title = `Count: ${count}`;
  }, [count]);

  return <button onClick={() => setCount(count + 1)}>{count}</button>;
}

Hooks solved the "wrapper hell" of higher-order components and made logic reusable across components.

Server Components (2020-Present)

On December 21, 2020, the React team published an RFC that started the React Server Components discussion. This introduced a new kind of component—Server Components—that run ahead of time and are excluded from your JavaScript bundle.

This is where Next.js and React become deeply intertwined. The App Router (Next.js 13+) is essentially the production implementation of React Server Components.

Why This Matters for Vibe Coders

You're Not Just Using Next.js

When you use Next.js, you're using:

What AI Tools Don't Tell You

AI code generators can produce React components all day long. But they can't tell you:

The genealogy of your framework is not trivia—it's the foundation for making decisions that AI tools can't make for you.

The Key People to Know

Person Contribution Why It Matters
Jordan Walke Created React at Facebook The original vision of declarative UI
David Nolen Created Om, proved React's potential Validated React for the broader community
Dan Abramov Created Redux, then joined React team Shaped Hooks and Server Components
Sebastian Markbåge React core team, RSC architect The mind behind Server Components
Guillermo Rauch Created Next.js Made React production-ready
Tim Neutkens Next.js Tech Lead Leads Next.js and Turbopack development

Key Takeaways

Sources