Skip to main content

React Was Created by Facebook Engineer Jordan Walke, Inspired by XHP

Every mainstream framework has an origin story, and React's begins inside Facebook's ads team sometime around 2011. A software engineer named Jordan Walke had been tinkering with a PHP extension called XHP, which let you write HTML-like structures directly inside PHP. That project planted the seed for a JavaScript library that would go on to define an entire era of front-end development. Understanding where React came from explains a lot about why it works the way it does.

XHP was, in practical terms, a language extension for PHP that allowed developers to write XML and HTML fragments without dropping out of PHP into a template language. Walke found the model compelling: instead of building up large strings of markup, you composed elements as structured values. The key insight he carried over to the browser was that a user interface could be described declaratively, as a function of state, rather than imperatively through a series of DOM mutations. That single shift in thinking is the heart of React.

What made React different from the jQuery-style DOM manipulation that dominated the era was its approach to the DOM itself. Rather than telling the browser exactly which nodes to change, you described what the UI should look like for a given state, and React handled the rest. The virtual DOM and the reconciliation algorithm that came with it meant developers could write components and trust the library to apply the smallest set of real updates. For a senior developer, this was a huge relief: no more hand-written event listeners and state juggling scattered across the page.

News Feed was the first real deployment, followed by Instagram's web app in 2012. The library stayed internal at Facebook for more than a year before being open sourced at JSConf US in May 2013. That timing matters because it means the future that everyone now takes for granted, one where components, unidirectional data flow, and declarative UI are the default mental model, was forged behind closed doors first, tested against one of the most traffic-heavy properties on the internet before it ever reached the public.

As a working engineer, the practical takeaway from this history is about the power of constraint. React was not created to be the most elegant library in the world; it was created to solve a concrete performance and maintainability problem at enormous scale. That is why the API is deliberately small and opinionated. Components, props, and state are the primitive ideas, and nearly everything else, hooks, context, the reconciler, has been layered on top without disturbing that core.

It is also worth remembering that the ideas in XHP and React were not entirely new. Functional rendering and tree-based UI models existed in other communities. What Walke and the team did was package those ideas into a tool that a broad population of developers could adopt in a real codebase. The historical lesson is that adoption follows clarity more than novelty. A technology wins not because it is the first to have an idea, but because it makes that idea easy to reach for in everyday work.

Years later, when you write a functional component and render it from one line of JSX, you are standing on an insight from a PHP extension rarely remembered today. The component model, declarative rendering, and the ability to reason about the UI as a pure function of state all trace back to Jordan Walke's work at Facebook in 2011. Understanding that lineage helps you appreciate why React pushes you toward certain patterns and why those patterns so often lead to cleaner, more maintainable code.

We use cookies for ads and analytics.