React Basics: JSX, Babel, and Component Structure

Instead of searching different icon packs, React Icons puts everything in one place and lets you import only what you actually use. ✅ 45K+ icons ✅ 30+ popular libraries ✅ clean React components ✅ easy customization See how it works: https://lnkd.in/g36vinsm #React #Frontend #JavaScript #WebDev #SitePoint

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

Day 94 / 365 👨💻 Kept building consistency with React practice. 🧩 Worked on a small component tweak 🔁 Observed how UI updates with state changes ⚙️ Fixed minor issues in logic 🧠 Focused on keeping code simple and readable #365DaysOfCode #React #JavaScript #Frontend

📝 UseDefault Custom Hook React Custom Hooks allow developers to create logic with a specific purpose that can be reused within different components in their projects. This code section is an example of a custom Hook. In this example, a function named useDefault returns a default value when the state is either null or undefined. #React #SoftwareDevelopment #ReactHook #JavaScript

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

Your website might be slow… and heavy JavaScript could be the reason. Large scripts block rendering and delay interaction. 👉 Less code = better performance #WebsiteSpeed #WebPerformance #JavaScript #PageSpeed #TechnicalSEO #WebDevelopment #Optimization #CoreWebVitals #Frontend #DigitalGrowth

🚀 Day 30 - 💡 JavaScript Tricky Question Explanation const arr = [4, 10, 2, 8]; const result = arr.find(num => num > 5) + arr.findIndex(num => num > 5); console.log(result); 👉 Output: 11 👉 Explanation: * find() returns the first value > 5 → `10` * findIndex() returns its index → `1` * Final result → `10 + 1 = 11` ⚡ Both stop at the **first match** #JavaScript #WebDevelopment #Frontend #CodingInterview #JSConcepts

Day 97 / 365 👨💻 Stayed consistent with React practice. 🧩 Tweaked a small component for better structure 🔁 Observed state changes and UI updates ⚙️ Simplified some existing logic 🧠 Focused on keeping things clean and understandable #365DaysOfCode #React #JavaScript #Frontend

🚀 Day 29 - 💡 JavaScript Tricky Question Explanation let a = [1,2,3]; delete a[1]; console.log(a); console.log(a.length); 👉 Output: ``` [1, empty, 3] 3 ``` 👉 Explanation: * `delete` removes the value but does NOT reindex the array * It creates a hole (empty slot) instead of shifting elements * So, `length` remains 3 ⚠️ Use `splice()` if you want to remove and shift elements #JavaScript #WebDevelopment #Frontend #CodingInterview #JSConcepts

What is a closure in JavaScript? A closure is a function that remembers variables from its outer scope even after that scope has finished executing. Why does this work? - `createCounter` runs once - It creates a variable `count` - The inner function “closes over” that variable - Even after `createCounter` finishes, `count` is still accessible Each time `counter()` runs: → it uses the same preserved state 💡 Closures are everywhere: - React hooks - Event handlers - Memoization - Encapsulation patterns They’re not just a concept — they’re part of how JavaScript manages state. #Frontend #JavaScript #React #WebDevelopment #SoftwareEngineering