Before React: How Frontend Development Actually Worked (the jQuery Era)
Before component frameworks, the frontend was direct DOM manipulation with jQuery — and the exact problem that approach hits at scale is the reason React exists.
For most of the 2000s and early 2010s, "frontend development" meant jQuery: select an element, mutate it directly. `$('#cart-count').text(newCount)`. No component model, no framework opinion about structure — just direct, imperative instructions to the DOM. It's worth understanding exactly why that approach broke down, because the answer is the actual reason component frameworks exist.
What jQuery actually got right
jQuery solved a real, painful problem: cross-browser DOM API inconsistency. `$('.button').on('click', fn)` worked identically in every browser, when the underlying native APIs genuinely didn't. For its era, that was a legitimate, valuable abstraction — not a mistake to be embarrassed about.
Where it actually broke down
// Somewhere in file A:
$('#cart-count').text(count);
// Somewhere else, in file B, minutes or months later:
$('#cart-count').addClass('highlight').fadeOut().fadeIn();
// Question a new developer can't answer by reading either file alone:
// what does #cart-count actually look like right now?The problem isn't jQuery's API — it's that the *truth* about what's on screen lives nowhere. It's scattered across every place in the codebase that ever touched that element, in whatever order those touches happened to run. As an app grows past a few interactive elements, tracing "what does this element look like right now, and why" becomes genuinely combinatorial — you have to mentally replay every mutation, in the right order, to know.
The reframe that fixed it
React's actual pitch wasn't "a better jQuery." It was a different question entirely: instead of "how do I mutate the DOM to reach the new state," ask "given the current state, what should the DOM look like" — and let the library figure out the mutations. State becomes the single source of truth; the DOM becomes a rendered *result* of state, not a thing you imperatively poke at from a dozen different places. That reframe — UI as a function of state — is the actual idea underneath every component framework that followed, not just React.