If you started web development with React, you might wonder:
What did developers use before React?
Before React became popular, a lot of websites were built using PHP, HTML, CSS, JavaScript, jQuery, and MySQL.
I’ve worked with both traditional and modern approaches, and one thing became clear to me:
Modern frontend development didn't replace the old web overnight. It evolved from problems developers were already trying to solve.
Let's look at that journey.
1. The PHP + MySQL Era
A common architecture looked like this:
Browser
↓
PHP Server
↓
MySQL Database
↓
PHP generates HTML
↓
Browser
For example, a product page might have PHP code like:
<?php
$product = getProduct($_GET['id']);
?>
<h1><?php echo $product['name']; ?></h1>
<p><?php echo $product['price']; ?></p>
The PHP code ran on the server.
The browser received the final HTML:
<h1>iPhone</h1>
<p>$999</p>
The browser didn't know that PHP generated it.
This approach was simple and worked very well for many types of websites.
2. But What Happened When the User Clicked Something?
Imagine a user opens:
/products
and clicks a product.
The browser requests:
/products/123
The server then:
- Receives the request
- Gets the product ID
- Queries the database
- Generates HTML
- Sends the response
- Browser loads the new page
Something like:
Click
↓
HTTP Request
↓
PHP
↓
Database
↓
HTML
↓
Browser
For a normal website, this was perfectly fine.
But as websites became more interactive, developers wanted a better experience.
3. JavaScript Started Taking More Responsibility
JavaScript allowed developers to change the page without asking the server to generate an entirely new page.
For example:
document.querySelector("#button")
.addEventListener("click", function () {
document.querySelector("#message").textContent = "Hello!";
});
Now the browser could update the UI itself.
This sounds normal today, but it was an important shift.
The browser wasn't just displaying HTML anymore.
It was becoming responsible for part of the application.
4. Then jQuery Became Popular
Writing browser-compatible JavaScript wasn't always pleasant.
jQuery made common tasks easier.
Instead of writing:
document.querySelector("#button")
.addEventListener("click", function () {
document.querySelector("#message").textContent = "Hello!";
});
developers could write:
$("#button").click(function () {
$("#message").text("Hello!");
});
jQuery was heavily used for:
- DOM manipulation
- Events
- AJAX requests
- Animations
- Form handling
- Cross-browser compatibility
A typical project could look like:
HTML
CSS
jQuery
PHP
MySQL
And honestly, many of these websites worked very well.
5. AJAX Changed the User Experience
One of the biggest changes was AJAX.
Instead of:
User action
↓
Full page reload
developers could do:
User action
↓
JavaScript
↓
AJAX request
↓
Server
↓
Response
↓
Update part of the page
For example:
$.ajax({
url: "/products",
success: function(data) {
$("#products").html(data);
}
});
Now only part of the page could change.
This made websites feel much more interactive.
6. But There Was a Problem
As applications became larger, frontend JavaScript became harder to maintain.
Imagine having:
Header
Menu
Modal
Shopping Cart
Filters
Product List
Notifications
User Profile
Forms
Tabs
And each component is changing the DOM using different JavaScript functions.
You might end up with code like:
$("#cart").html(...);
$("#menu").show();
$("#modal").hide();
$("#products").html(...);
$("#notification").text(...);
It can work.
But as the application grows, keeping track of what changed, when it changed, and why it changed becomes difficult.
This was one of the problems modern frontend frameworks tried to address.
7. Enter React
React introduced a different way of thinking about UI.
Instead of manually telling the browser:
"Change this element."
You describe what the UI should look like based on the current state.
For example:
function Counter() {
const [count, setCount] = useState(0);
return (
<button onClick={() => setCount(count + 1)}>
{count}
</button>
);
}
When the state changes, React takes care of updating the UI.
The developer mainly thinks about:
State
↓
UI
rather than manually managing every DOM operation.
8. Components Changed How We Build UI
Traditional development often started from pages.
React encouraged developers to think in components.
For example:
App
├── Header
├── Navigation
├── ProductList
│ ├── ProductCard
│ ├── ProductCard
│ └── ProductCard
├── Cart
└── Footer
A reusable component might look like:
function ProductCard({ product }) {
return (
<article>
<h2>{product.name}</h2>
<p>{product.price}</p>
</article>
);
}
Now the same component can be reused with different data.
This became particularly useful as applications became larger.
9. From Pages to Applications
The biggest change wasn't simply:
jQuery → React
The bigger change was how we thought about web applications.
Traditional approach
Browser
↓
Server
↓
HTML
↓
Browser
Modern application approach
React Application
↓
API
↓
Backend
↓
Database
The frontend and backend could now be developed more independently.
The backend could provide JSON:
{
"name": "iPhone",
"price": 999
}
And the frontend could decide how to display it.
10. What Happened to PHP?
PHP didn't disappear.
In fact, PHP is still widely used.
The difference is that there are now many different ways to build a web application.
For example:
PHP + MySQL
can still be a great choice for a traditional website.
Or you might have:
React
↓
REST API
↓
PHP / Node.js / .NET / Java
↓
Database
The frontend doesn't necessarily care what language the backend uses.
It communicates through the API.
11. What Happened to jQuery?
jQuery also didn't suddenly become useless.
There are still many existing websites and applications that use it.
But modern JavaScript now provides many features that previously made libraries like jQuery very useful.
For example:
document.querySelector()
can handle DOM selection.
And:
fetch("/api/products")
can make HTTP requests.
Modern browser APIs, better JavaScript support, and frontend frameworks reduced the need for jQuery in many new projects.
12. The Evolution in One Picture
You can roughly think about the evolution like this:
Traditional Web
↓
HTML + CSS + PHP
↓
JavaScript
↓
jQuery
↓
AJAX
↓
More Interactive Applications
↓
Frontend Frameworks
↓
React / Vue / Angular
↓
API-based Applications
↓
Modern Full-Stack Applications
Of course, real-world web development didn't follow one single straight line.
Different technologies evolved at the same time.
But this gives us a useful picture of the direction.
13. Does Modern Always Mean Better?
Not necessarily.
This is something developers sometimes forget.
If you need a simple marketing website with a few pages, using a large frontend application architecture may add unnecessary complexity.
A simple server-rendered website can still be a good solution.
On the other hand, if you're building a complex application with lots of interactive UI and shared state, a component-based frontend architecture can make development easier to organize.
The right technology depends on the problem.
14. What I Learned From This Evolution
For me, the most interesting part isn't that React replaced jQuery.
It's that the responsibility gradually moved toward the browser.
We went from:
Server generates most of the page
to:
Browser handles more of the application
And now we're seeing another shift with technologies such as server components, server-side rendering, static generation, edge computing, and full-stack frameworks.
So web development isn't finished evolving.
It's still changing.
Final Thought
If you're learning React today, don't only learn React.
Try to understand what problem React was created to solve.
Learn:
- How HTTP requests work
- How server-side rendering works
- How PHP applications worked
- How the DOM works
- How AJAX works
- How APIs work
- How JavaScript interacts with the browser
- Why component-based architecture became useful
Once you understand the journey, many modern frontend concepts become easier to understand.
The best way to understand the modern web is sometimes to look at the old web first.
Top comments (0)