React: The Component Revolution

#The Problem at Facebook

By 2011, Facebook’s web app was a tangled mess of jQuery event handlers and manual DOM manipulation. When the notification count badge showed different numbers in different parts of the page, the team knew something was fundamentally broken.

Jordan Walke built a prototype called FaxJS that took a radical approach: instead of mutating the DOM directly, describe what the UI should look like, and let the framework figure out the minimum changes needed.

#The Key Insight

function NotificationBadge({ count }) {
  return (
    <span className="badge">
      {count > 0 ? count : null}
    </span>
  );
}

React’s mental model is deceptively simple: UI is a function of state. When state changes, re-render. The virtual DOM diffing algorithm handles the rest. This shifted developers from thinking about DOM mutations to thinking about data flow.