I came into today knowing HTML, CSS, and enough JavaScript to make things move on a page. The kind of JS where you `getElementById`, attach a click handler, and call it a day. Today I jumped into the deep end of modern web dev — React, Next.js, TypeScript, Tailwind — and honestly, it's a different world. Here's everything I learned, broken down the way I wish someone explained it to me. ## From Vanilla JS to React — The Mental Shift In traditional web dev, you write HTML for structure, CSS for styling, and JavaScript to *reach into the page* and change things: ```javascript let count = 0; document.getElementById('btn').addEventListener('click', function() { count++; document.getElementById('counter').textContent = count; }); ``` You manage two things separately: the **data** (`count`) and the **DOM** (the actual page elements). Every time data changes, you manually find the right element and update it. React flips this entirely. You just describe what the page should look like for any given data, and React handles the updating: ```jsx function Counter() { const [count, setCount] = useState(0); return (

{count}

); } ``` No `getElementById`. No manual DOM updates. You change the data, React figures out what needs to change on screen. This is the shift from **imperative** (step-by-step instructions) to **declarative** (describe the end result). ## Components — Breaking Pages Into Pieces In traditional HTML, you have one big page. In React, you break it into self-contained, reusable pieces called **components**: ``` Traditional: React: One big HTML file →

Blog

Day 1: Next.js 15 Setup & Project Structure