DEV Community

Cover image for Why I refused to learn React for my first project (And used Vanilla JS instead)
LEGEND GAMERR6
LEGEND GAMERR6

Posted on

Why I refused to learn React for my first project (And used Vanilla JS instead)

#webdev #react #vibecoding #javascript

Open Twitter/X, and every influencer is shouting the same thing at junior devs: [https://newupdateblog.netlify.app/#blog ]

"Learn React! Learn Next.js! Learn Tailwind!"

It’s easy to feel like you’re falling behind if you aren't using the latest framework. But for my very first serious project—a browser-based arcade shooter called Space Defender—I made a controversial choice.

I ignored the hype. I refused to npm install react. I built the whole thing in Vanilla JavaScript, HTML5 Canvas, and CSS.

Here is why that was the best decision of my coding journey.

  1. Frameworks Hide the "Magic" 🪄 When you start with React, you learn React, not JavaScript. You learn about Hooks, State, and Props, but you might not understand what is actually happening in the DOM.

By using Vanilla JS, I was forced to understand the raw mechanics of the web.

No State Management Libraries: I had to create my own global variables and game loops.

No Event Wrappers: I had to manually handle window.addEventListener('keydown') to move my spaceship.

No Components: I had to structure my code using simple functions and objects.

It was messy. It was hard. But now, when I finally do learn React, I will understand why it exists.

  1. The Power of the HTML5 Canvas 🎨 I realized that for a game, the DOM (divs and spans) is actually too slow. I needed raw performance. I discovered the element. It’s like a blank digital whiteboard where you can draw pixels 60 times per second.

Here is the simple logic that powers my game loop:

JavaScript
// The "Heart" of the Game
function gameLoop() {
// 1. Clear the screen
ctx.clearRect(0, 0, canvas.width, canvas.height);

// 2. Update positions (Math)
player.update();
bullets.forEach(bullet => bullet.update());

// 3. Draw everything (Art)
player.draw();
bullets.forEach(bullet => bullet.draw());

// 4. Repeat 60 times per second
requestAnimationFrame(gameLoop);
Enter fullscreen mode Exit fullscreen mode

}
If I had used React, I would have been fighting with re-renders. With Vanilla JS, I had total control over every single pixel.

  1. Debugging is Easier (Sometimes) 🐛 When my "bullets" started flying backwards, I didn't have to dig through a complex folder structure of components/ and assets/. I just opened script.js, found the Bullet class, and logged the velocity.

The Bug: I was subtracting Y-axis values instead of adding them. The Fix: One line of math.

  1. I Built a "Cheat Code" from Scratch Because I wasn't restricted by a framework's rules, I could easily hack in fun features. I added a listener so that if you press 'Z', the ship switches to Triple Shot Mode.

It’s a simple if statement, but seeing it work gave me a rush that following a "To-Do List Tutorial" never did.

Conclusion: Learn the Roots, then the Leaves 🌳
I am not saying React is bad. I plan to learn it next. But by building Space Defender in Vanilla JS, I gained confidence. I know that if React disappeared tomorrow, I could still build cool stuff.

My advice to other beginners: Stop worrying about the "Best Tech Stack." Just open index.html, link a script.js file, and build something weird.

🕹️ Try the Game
You can play the result of my weekend "Vibe Coding" session here: 👉
[https://newupdateblog.netlify.app/#blog]

(Pro Tip: Don't forget to press 'Z' for the secret weapon!)

I am a student developer building in public. Follow me for more updates on my journey from Hello World to Full Stack.

Top comments (0)