How React Went From “We Hate This” to “We Love This”

Believe it or not, when React first came out, most developers didn’t like it.

At all.

They thought it was weird, complicated, and different from everything they were used to. So… how did React go from being unpopular to becoming the most used JavaScript library for building web apps?

To understand that, let’s rewind a bit.

🌐 Web Development Before React

Before React existed, the web looked very different. The main tools developers used were:

• jQuery
• Backbone.js
• Angular.js

Let’s quickly go over how each of them worked and what problems they had.

🧩 jQuery: The DOM Magician

jQuery was the most popular tool. It made it easy to change your web page (the DOM) and handle events like button clicks.

You could find an element on the page, change it, add text, or react to user actions all using short, simple code.

But over time, jQuery apps became messy. Your app’s state (its data) was stored in the DOM itself. And if your app was big, updating the UI became chaotic and hard to manage.

🧱 Backbone.js: A Bit More Organized

Backbone came in and said: “Hey, let’s separate data from the UI.”

Backbone introduced something called Models (which held your data) and Views (which handled your UI).

Whenever your Model changed, Backbone would automatically update the View. But it didn’t tell you how to write your Views you had to figure that part out on your own.

So while it helped structure your app a bit, it still left a lot of decisions up to the developer.

⚙️ Angular.js: All-In-One Framework

Then came Angular.js, which tried to give developers everything:

• Two-way data binding (your data and UI could update each other)
• Templates
• Routing
• Dependency injection
• Controllers

It was very opinionated, meaning Angular decided how you should build your app.

This was great for backend developers who were new to the frontend they didn’t have to make too many decisions.

But Angular’s two-way binding caused problems. Your app’s state could change from many different places, which made debugging and performance tough.

🔁 The Common Problem: Mutation

All these tools shared a similar pattern:

They had Models that stored data, and Views that watched for changes.

But they also allowed a lot of direct changes (mutations) to that data. And the more mutations you had, the harder your app became to understand and maintain.

⚛️ Then Came React

React had a simple but powerful idea:

Your UI should be a function of your state. (In math-speak: view = function(state))

In other words, instead of manually updating the UI when something changes, you just tell React what the UI should look like based on the current state and React handles the rest.

🧩 Components: The Game-Changer

React took it a step further. It introduced components small, reusable building blocks of UI.

Instead of one giant page, you could break your UI into smaller parts:

• A button
• A user profile
• A form input

Each component had its own logic and design. You could nest them and compose them just like functions.

💡 The JSX Controversy

To make writing UI inside components easier, React introduced JSX a syntax that looked like HTML but was actually written inside JavaScript.

Example:

function Greeting({ name }) {
  return <h1>Hello, {name}!</h1>;
}

At first, people hated JSX. They said: “HTML and JavaScript should be separate!”

But React had a different opinion: Instead of separating technologies (HTML/CSS/JS), why not separate features?

A component should contain everything it needs logic, layout, and sometimes even styles.

📦 From Imperative to Declarative

Before React, you had to write step-by-step instructions to update the UI.

React said:

“Just declare what you want, and we’ll figure out how to do it.”

This shift to declarative programming made apps easier to build, understand, and debug.

🚀 Fast Forward to Today

Since 2013, React has evolved a lot, but its core idea remains the same:

• Break your UI into components
• Make each component describe how it looks based on state
• Compose them together to build your app

Today, React isn’t just used for single-page apps. It’s used as a UI building block in many frameworks like:

• Next.js
• Remix
• Astro

These tools build on top of React and add things like:

• Server-side rendering
• Better performance
• Smarter routing

📚 Final Thoughts

React didn’t become popular overnight. It took years of evolution, community feedback, and real-world use.

But its main ideas components, one-way data flow, JSX made building web apps much easier.

And once you “get” how React works, everything just clicks.