From Vanilla JS to React: React Makes More Sense When the Problem Comes First

I had an e-commerce project — plain HTML/JavaScript frontend, Node.js/Express backend. I took on a more interesting challenge: migrating the frontend from vanilla HTML/JS to React. Migrating code you already wrote and understand is one of the better ways to go deeper with React. You're not learning the syntax and the concepts at the same time — you already know what the code does, so you can focus entirely on why each React pattern exists. This is what that looked like. The original version Each page was a separate HTML file loaded its own JS modules. State lived in the DOM. Navigation caused full page reloads. The patterns were familiar: updateCartIcon() fetches the cart total from the backend and updates the cart icon in the banner — it had to be manually called in every place that could affect the cart count showHideMenuItems() checks if the user is logged in and toggles the visibility of login, signup, and logout buttons by directly setting element.style.display Any change to the s