Why I Switched to React from HTML, CSS, and JS

In the beginning, I spent a lot of time learning HTML and CSS. (Not JavaScript — and honestly, that was my biggest mistake.)

While working with HTML and CSS, everything felt fun and smooth. You write code, and instantly see the results in the browser. That feedback loop was satisfying. I even created a few small frontend projects. But the moment I started building static websites that included even a bit of dynamic data… things got complicated fast.

For example: changing themes or managing data across the whole page manually started to feel like a headache.

That’s exactly why I switched to React.

Now, that’s the simple answer. But that’s not it.

As I mentioned earlier, my main reason for switching to React was to manage dynamic data more efficiently.

Over time though, I realized something important:

If your site doesn’t require too much user interaction or dynamic state changes, the traditional way (HTML + CSS + a little JS) is still the best. It’s leaner, faster, and more straightforward.

When the Traditional Way is Better:

• Your site will be lighter compared to using a library or framework.

• The initial load time will be faster.

• There’s no unnecessary re-rendering of the DOM.

• Fewer DOM updates = smoother performance.

So yes, if your site is mainly for static content delivery, there’s no need to over-engineer it.

A Real-World Example

Let’s say you want to build a simple feedback form.
Users can select a rating, click submit, and see a thank-you message with their chosen rating.

Here’s how it went for me:

Using HTML + CSS + JS:

To get everything working perfectly, I had to write:

• 65 lines of JavaScript

• 75 lines of CSS

• 55 lines of HTML

Almost 195 lines in total.

Now, using React + TailwindCSS:

import { useState } from "react";

export function Feedback() {
    const [giveRate, setGivenRate] = useState(0);
    const [show, setShow] = useState(false);

    return (
    <div>
        {!show ? (
            <div className="text-slate-200 border border-slate-400/20 bg-slate-600/10 rounded-xl shadow-md shadow-slate-950/30">
                <div className="p-4 ">
                    <h2 className="font-bold text-lg">Rate Us</h2>
                       <p className="opacity-70 text-sm">
                            Your ratings and feedback are valuable for us!
                       </p>
                </div>
                <hr className="border-slate-400/20" />
                <div className="p-4">
                    <ul className="flex gap-4">
                        {[1, 2, 3, 4, 5].map((rate) => (
                            <li
                                key={rate}
                                className={`size-12 flex justify-center items-center rounded-full cursor-pointer transition-colors 
                                            hover:bg-amber-400 hover:text-black
                                            ${rate <= giveRate ? "bg-amber-400 text-black" : "bg-black text-white"}`}
                                onClick={() => {setGivenRate(rate)}
                            >
                                {rate}
                            </li>
                        ))}
                    </ul>
                </div>
                <hr className="border-slate-400/20" />
                <div className="p-4 flex justify-center items-center">
                    <button
                        className="px-4 py-2 bg-blue-800 hover:bg-blue-600 rounded-md font-medium cursor-pointer"    
                        onClick={() => setShow(true)}
                    >
                        Submit
                    </button>
                </div>
            </div>
        ) : (
            <div className="text-slate-200 border border-slate-400/20 bg-slate-600/10 rounded-xl shadow-md shadow-slate-950/30">
                <div className="p-4">
                    <h2 className="font-bold text-lg">Thank..!</h2>
                    <p className="opacity-70 text-sm">We respect your feedback!</p>
                </div>
                <hr className="border-slate-400/20" />
                <div className="p-4">
                    <span>Your feedback is : {giveRate}</span>
                </div>
                <hr className="border-slate-400/20" />
                <div className="p-4 flex justify-center items-center">
                    <button
                        className="px-4 py-2 bg-blue-800 hover:bg-blue-600 rounded-md font-medium cursor-pointer"
                        onClick={() => setShow(false)}
                    >
                        Back
                    </button>
                </div>
            </div>
        )}
    </div>
)};

With React + TailwindCSS, I got the exact same functionality in just around 80 lines — all inside one file.

• I didn’t need to repeat classes.

• I didn’t need to manually remove/add DOM elements.

• I didn’t need to write complex event handlers or DOM selectors.

Final Thoughts

React really shines when your project involves dynamic data and lots of interaction.

But I still believe in using the right tool for the right job.

If you’re just showing static info, go with HTML + CSS + a bit of JS.
If you’re building something dynamic and interactive — React will save you from a world of pain.

Thanks for reading, and again — this is just my personal journey.
If you’ve had a different experience, I’d love to hear about it! 🙌