Learning npm Fundamentals with React and Vite

Day 80 / 365 👨💻 Continued learning React tooling. 📦 Role of Rollup in production bundling 🔢 Understood version symbols (^, ~) in package.json 📤 Named vs default exports 📄 Why JSX files use .jsx extension #365DaysOfCode #React #JavaScript #Frontend

Javascript concept: == vs === This bug looked harmless… console.log(5 == "5"); // true But in production? It broke logic. console.log(5 === "5"); // false 💡 One habit that saved me: → Always use === #JavaScript #WebDevelopment #Frontend #Coding

Rewrote our company project from webpack 3 to Vite 8 🚀 Why: ⚡ Works significantly faster 🧩 Much simpler config setup 🔄 Updated project dependencies to more recent versions 🔥 Faster and more stable HMR (almost no full page reloads) 🧠 Native ES modules — easier to debug 📦 Smaller bundle size out of the box Issues: 🪟 Handling environment via window._env 🌍 Poor support for older browsers (pre-2016) 🧱 Not all webpack plugins have equivalents 🤯 Requires a bit of mindset shift (ESM, dev vs build differences) #frontend #javascript #webdevelopment #vite #webpack #performance #developerexperience #programming #webdev #softwareengineering #buildtools #frontenddevelopment #coding #devlife

🔥 Still clicking through your sidebar? There's a better way. Here are the VS Code tips and tricks that actually boost your dev experience — from multi-cursor magic to Zen Mode and custom snippets. Small changes, big difference. ⚡ Read the full guide at 👉 hamidrazadev.com Save this for later and share it with a dev friend who needs it! 🚀 #vscode #webdev #devtips #javascript #programminglife #codingtips #developers #frontenddev #productivityhacks #hamidrazadev

Day 86 / 365 👨💻 Light practice focused on strengthening basics. 🧩 Revisited React component structure ⚙️ Practiced small state updates with useState 🔁 Observed re-render behavior in simple examples 🧠 Focused on keeping logic clear and predictable #365DaysOfCode #React #JavaScript #Frontend

JavaScript basics that still matter: let vs var vs const var: • Function scoped • Can be redeclared let: • Block scoped • Can be updated const: • Block scoped • Cannot be reassigned Small concepts, big impact on clean code. Which one do you use the most? #JavaScript #CodingTips #Frontend

Day 81 / 365 👨💻 Recap of recent React tooling sessions. ⚙️ How @vitejs/plugin-react works ⚡ Role of esbuild and Babel (Fast Refresh) 📦 Rollup for production builds 🔢 Version symbols in package.json 📤 Named vs default exports #365DaysOfCode #React #JavaScript #Frontend

Most devs reach for a state management library too fast. Before you install Redux or Zustand, try this 👇🏾 // Manage related state together, not separately const [form, setForm] = useState({ name: '', email: '', password: '' }) const handleChange = (e) => { setForm(prev => ({ ...prev, [e.target.name]: e.target.value })) } One state object. One handler. Works for 90% of forms. Stop adding dependencies before you need them. Save this 🔖 #ReactJS #JavaScript #WebDevelopment #Fullstack #CodingTips

Day 106 / 365 👨💻 Continued with React practice. 🧩 Revisited component structure 🔁 Practiced state updates in small examples ⚙️ Improved code organization 🧠 Focused on getting comfortable with the flow #365DaysOfCode #React #JavaScript #Frontend

📌 Event Loop JavaScript is single-threaded The Event Loop manages asynchronous operations It continuously checks the Call Stack Microtasks (Promises) are executed before Macrotasks (e.g., setTimeout) 👉 Use case: Execution of asynchronous operations #JavaScript #EventLoop #Concurrency #NodeJS #Frontend