History of React
Trace React's journey from an internal Facebook experiment to the open-source library that powers much of the modern web.
Introduction
React did not appear out of nowhere. It grew out of a real, painful engineering problem at Facebook, went through years of internal use and refinement, and only then was shared with the rest of the world. Knowing this history helps explain many of React's design choices — and shows that the library you are learning today is the product of over a decade of continuous evolution.
In this lesson, you will trace React's path from a single engineer's experiment to one of the most widely used UI libraries on the planet, including the major version changes that shaped the way React looks and behaves today.
- Who created React and why, at Facebook.
- How React was first used internally before it was public.
- What XHP was and how it influenced React's design.
- The major version milestones — React 15 through React 18.
- Where React stands today and what it has grown into.
The Problem at Facebook
In the early 2010s, Facebook's News Feed was becoming a serious engineering challenge. It needed to update constantly — new posts, likes, and comments arriving in real time — while staying responsive. The existing approach of manually updating the DOM and manaually tracking which parts of the UI were "dirty" was becoming difficult to maintain as the codebase grew. Small state changes could cascade into hard-to-track bugs, and the code that synchronized data with the DOM grew increasingly tangled.
Facebook needed a way to keep the UI reliably in sync with fast-changing data, without every engineer having to hand-write imperative DOM-update logic for every feature. That need is what set the stage for React.
Jordan Walke and the Birth of React
React was created by Jordan Walke, a software engineer at Facebook. He built an early prototype originally called "FaxJS," experimenting with the idea of generating DOM elements from reusable, declarative building blocks rather than mutating the DOM by hand.
2011 — News Feed
React was first used internally at Facebook to power the News Feed, one of the most update-heavy parts of the site.
2012 — Instagram
After proving itself on the News Feed, React was adopted to build Instagram's web application.
2013 — Open Source
Facebook released React publicly, letting the wider developer community use and contribute to it.
Since Then
React has grown into one of the most widely adopted UI libraries, with an enormous ecosystem built around it.
Inspiration from XHP
React's design was partly inspired by XHP, a PHP component library used internally at Facebook. XHP let engineers embed component-like markup directly inside PHP code, which made it easier to build reusable UI pieces and helped prevent certain classes of bugs (like cross-site scripting) common with raw string-based HTML generation.
That same idea — mixing markup with logic in a structured, component-oriented way — is exactly what led to JSX in React. Instead of building HTML strings by hand or wiring up templates separately from logic, React lets you describe UI and behavior together in one place.
Understanding the XHP connection explains why JSX looks the way it does — it is not a JavaScript feature, but a Facebook-born pattern for combining markup and logic that React brought to the JavaScript world.
Open-Sourcing React
In May 2013, Facebook open-sourced React at the JSConf US conference. The initial reaction from parts of the JavaScript community was mixed — JSX, in particular, looked unusual to developers used to keeping markup and logic strictly separate. But as more teams tried it, React's practical benefits for managing complex, frequently-updating UIs won over developers, and adoption grew quickly.
Being open source meant React could be inspected, questioned, and improved by anyone — not just Facebook engineers — which accelerated both its adoption and its ongoing development.
Major Version Milestones
Since 2013, React has gone through several major releases, each adding important capabilities while generally preserving backward compatibility with existing code.
React 15
A stabilization release that refined the rendering internals and cleaned up the API surface ahead of a bigger architectural change.
React 16 — Fiber & Hooks
Introduced the Fiber rendering engine (enabling incremental rendering) and, later in the 16.x line, Hooks — letting function components use state and lifecycle features.
React 17 — Gradual Upgrades
Focused on making React itself easier to upgrade incrementally, with no major new developer-facing features, acting as a bridge release.
React 18 — Concurrent Rendering
Introduced concurrent rendering capabilities and automatic batching of state updates, improving performance and responsiveness.
Before Hooks (introduced in React 16.8), only class components could hold state or run side effects. Hooks let function components do the same, making components simpler to write, read, and reuse.
React Today
Today, React is maintained by Meta alongside a massive open-source community of contributors. It powers the web experiences of Facebook and Instagram, and is used extensively by companies like Netflix and Airbnb to build fast, interactive interfaces at scale.
React's influence has also extended beyond the browser. React Native applies the same component model to build native mobile apps for iOS and Android, and frameworks like Next.js build on top of React to add routing, server-side rendering, and full-stack capabilities.
Maintained by Meta
React continues to be actively developed by Meta's engineering teams and the open-source community.
Powers Major Products
Facebook, Instagram, Netflix, Airbnb, and countless other products rely on React.
React Native
Extends React's component model to build native mobile applications.
Next.js
A full-stack framework built on top of React, adding routing and server rendering.
Example: How Far the Syntax Has Come
Early React code (using the original createClass API) looked noticeably different from the function-and-Hooks style used today. Seeing both side by side shows how much simpler React components have become.
Old Style (pre-Hooks, class component)
- class Greeting extends React.Component {
- render() {
- return <h1>Hello, {this.props.name}!</h1>;
- }
- }
Modern Style (function + Hooks)
- function Greeting({ name }) {
- return <h1>Hello, {name}!</h1>;
- }
Hello, Ava!Common Mistakes
- Assuming React was built as an academic side project — it was created to solve a real, large-scale engineering problem at Facebook.
- Confusing XHP (a PHP component library) with JSX (React's JavaScript syntax extension) — XHP was an inspiration, not the same technology.
- Thinking every React version introduced huge developer-facing changes — some releases, like React 17, deliberately focused on internals and upgrade stability.
- Believing Hooks replaced class components entirely — class components are still supported, though Hooks are the recommended modern approach.
Best Practices
- When reading older tutorials or codebases, recognize class-component syntax so it does not confuse you.
- Favor modern function components and Hooks for any new code you write.
- Check the React version a project uses before assuming which features (like Hooks or concurrent rendering) are available.
- Read release notes on react.dev when upgrading, since each major version can change recommended patterns.
- Remember that React Native and Next.js are separate projects built on top of React, not part of React itself.
Frequently Asked Questions
Who created React?
Jordan Walke, a software engineer at Facebook, created React. It was first used internally before being open-sourced in May 2013.
What was React first used for?
React was first used internally at Facebook in 2011 to power the News Feed, and was later used to build Instagram's web application in 2012.
What is XHP and how does it relate to React?
XHP was a PHP component library used at Facebook that let developers embed component-like markup directly in PHP code. It partly inspired the design of JSX in React.
What changed in React 16?
React 16 introduced the Fiber rendering engine for more flexible, incremental rendering, and later added Hooks, letting function components use state and side effects.
What did React 18 add?
React 18 introduced concurrent rendering features and automatic batching of state updates, improving performance and UI responsiveness.
Key Takeaways
- React was created by Jordan Walke at Facebook to solve real UI-synchronization problems at scale.
- It was used internally on the News Feed (2011) and Instagram (2012) before being open-sourced in May 2013.
- React's JSX syntax was partly inspired by XHP, a PHP component library used at Facebook.
- React 16 brought Fiber and Hooks; React 17 focused on gradual upgrades; React 18 introduced concurrent rendering and automatic batching.
- React is now maintained by Meta and a large open-source community, and has expanded into mobile (React Native) and full-stack (Next.js) development.
Summary
React's history shows a pattern that repeats throughout the library's life: a real problem, a focused solution, and continuous refinement guided by real-world use at massive scale. From an internal experiment on the News Feed to a foundation used across the industry, React's evolution has been steady and deliberate.
In this lesson, you learned where React came from, how XHP influenced its design, and how each major version — 15 through 18 — shaped the library into what it is today. Next, you will look at exactly why developers choose React over plain JavaScript or other frameworks.
- You know who created React and why.
- You understand React's roots in XHP and Facebook's internal needs.
- You can describe the major changes introduced in React 16, 17, and 18.
- You are ready to explore why developers choose React today.