React journey continues — and today's lesson was all about Components. 🧱 A few days ago I talked about JSX. Then the DOM and Virtual DOM. Today? Components made my brain light up in the best way. Here's what I learned: A component is just a JavaScript function that returns JSX. That's it. ```jsx function AnimalFacts() {  return <p>Fun fact about animals!</p>; } ``` But what surprised me the most? You can use it like an HTML tag: ```jsx <AnimalFacts /> ``` That one line renders your entire component. Mind = blown. 🤯 The analogy that made it all click for me? LEGO bricks 🧱 Each component is its own brick — built separately, snapped together to make something bigger. And the best part? They're REUSABLE. One component can work for a dolphin, a lobster, and a starfish! Self taught, learning in public, and taking it one concept at a time. 💪 If you're on a similar journey, let's connect! And if you're experienced — what's YOUR favourite analogy for explaining components? Drop it below 👇 #React #JavaScript #Frontend #Components #LearningInPublic #100DaysOfCode #SelfTaught

Hey network! 👋 I’ve been diving into learning JavaScript recently and wanted to share my latest practice project: a classic Simon Says Game! 🎮 Building this was a fantastic way to get hands-on experience with Vanilla JS, specifically focusing on DOM manipulation, event handling, and sequence logic. It was a fun challenge keeping track of the memory arrays and user inputs! 💻 Check out the code here: https://lnkd.in/gwGmr_37 🔗 Let's connect: https://lnkd.in/gtzKeBxq Thoughts and feedback are always welcome! #JavaScript #WebDevelopment #Frontend #CodingJourney #LearningToCode #Projects

Ever wondered how JavaScript handles all those asynchronous tasks without freezing up? 🤔 It's all thanks to the magical event loop! This clever mechanism keeps things running smoothly behind the scenes. Think of it like a tireless waiter at a busy restaurant, constantly checking on your requests. ☕️ The call stack handles immediate tasks, while the callback queue waits for those async operations to finish. Then, the event loop zips them back into the call stack for processing! It's a beautiful dance that keeps your web pages interactive. 🕺💃 #JavaScript #EventLoop #WebDevelopment #Coding

🚀 Just built a Number Guessing Game using JavaScript! This project helped me practice: ✅ DOM Manipulation ✅ Event Handling (click & Enter key) ✅ Conditional Logic ✅ Game State Management 🎮 Features: - Random number between 1–100 - Limited attempts - Feedback (Too High / Too Low) - Win counter & restart option I’m currently improving my JavaScript skills and building small projects daily to get better 🚀 Next step: Moving towards React and building more interactive apps! 💻 Feedback is welcome 🙌 #JavaScript #WebDevelopment #Frontend #CodingJourney #100DaysOfCode

Real talk — useEffect almost broke my brain today. 😅 My React journey continues, and I came across one of the trickiest hooks so far. useEffect. At first I felt completely lost. The Codecademy lesson talked about cleanup functions, dependency arrays, side effects — and honestly? My head was spinning. But after stepping back and breaking it down in simpler terms, here's what finally made sense to me: useEffect lets you run code at SPECIFIC MOMENTS in your component's life. Three moments to remember: ```jsx // 1. Run AFTER EVERY render useEffect(() => { }); // 2. Run ONLY ONCE when the page loads useEffect(() => { }, []); // 3. Run WHEN a specific value changes useEffect(() => { }, [forecastType]); ``` The array at the end is called the dependency array — and it controls WHEN the code runs. The analogy that helped me? Think of it like a home security camera 📹 - No array — records 24/7 - Empty array — only records on day one - With a value — only records when that thing changes It's still not 100% clear to me yet — and that's okay. Some concepts take time to really click. 🙏 The lesson today wasn't just about useEffect though — it was about being honest with myself when something is hard, taking a break, and coming back to it instead of forcing it. Still learning, still building, still showing up every day. 💪 Is there a React concept that confused you when you first learned it? Drop it below 👇 #React #JavaScript #useEffect #Frontend #LearningInPublic #100DaysOfCode #SelfTaught

🚀 Day 45 of My Full Stack Development Journey Today I went deeper into JavaScript DOM & Events and built a fun mini project 🎮 Here’s what I explored: 🔹 Event Bubbling – Understanding how events propagate 🔹 Event Delegation – Writing efficient event handling 🔹 Built a Todo App using DOM 📝 🔹 Learned the concept behind the Simon Says Game 💡 Mini Project: Created a fully functional Simon Says Game 🎯 Features I implemented: 🔹 Game start & level system 🔹 Flashing buttons & sequence generation 🔹 User input handling & sequence matching 🔹 Score display & game reset This project helped me connect multiple concepts like events, DOM manipulation, and logic building into one real application. 💡 Key takeaway: Understanding event flow + delegation makes JavaScript much more powerful and efficient. Step by step, building real-world projects 🚀 #FullStackJourney #WebDevelopment #JavaScript #DOM #EventHandling #LearningInPublic #100DaysOfCode

🚀 Day 23 – Throttling Events in JavaScript Ever noticed your app lagging during scroll or resize? 🤔 That’s because some events fire hundreds of times per second! 💡 Today I explored Throttling — a simple yet powerful technique to control how often a function executes. 👉 Instead of running a function continuously, throttling ensures it runs at fixed intervals ⏱️ 🔥 Why it matters: ✔ Improves performance ✔ Prevents unnecessary function calls ✔ Makes UI smoother ⚡ Common Use Cases: 📜 Scroll events 📏 Window resize 🖱️ Mouse movement 🎯 Animations & tracking 🧠 Pro Tip (Angular Devs): Using @RxJS makes throttling super easy with throttleTime() 🔥 Small optimization… but a huge impact on performance! 💯 💬 What’s your go-to: Throttling or Debouncing? #Day23 #JavaScript #Angular #WebDevelopment #Frontend #Performance #RxJS #CodingJourney

Day 1 of #100DaysOfJavaScript 🚀 Today I built a simple Counter App using JavaScript. 🔧 Features: • Increment the number • Decrement the number • Reset back to zero 📚 What I learned: • DOM manipulation • Handling button click events • Updating UI dynamically with JavaScript ⚡ Challenges: Understanding how to properly update values in the DOM without refreshing the page. 🎯 Goal for tomorrow: Build another small interactive project and improve logic building. Starting small, but staying consistent 💪 #JavaScript #100DaysOfCode #WebDevelopment #CodingJourney #LearnInPublic

Day 46 – React Learning Journey Today’s focus was on understanding different ways to use functions in React event handling and how they impact code structure and flexibility. - Explored multiple approaches: Passing function references directly → onClick={handleClick} Using inline arrow functions → onDoubleClick={() => {...}} Handling mouse events → onMouseEnter, onMouseMove Working with input events and event objects → onChange={(e) => ...}- * Key Insight: Choosing the right way to use functions in events improves code readability, reusability, and performance. Understanding when to use direct references vs inline functions is essential for writing clean React code. - Every small concept like this builds a strong foundation for scalable frontend applications. github link : https://lnkd.in/gRbcs2Ue #Day46 #ReactJS #JavaScript #FrontendDevelopment #MERNStack #WebDevelopment #CleanCode #LearningInPublic

🚀 React Deep Dive — Components, Elements & Re-renders While exploring advanced React concepts, I came across a few ideas that completely changed how I think about rendering. 🔹 A Component is just a function that takes props and returns elements const A = () => <B /> 🔹 An Element is an object that describes what should appear on the screen const b = <B /> 🔹 A re-render is simply React calling the component function again 🔹 A component re-renders when its element object changes 🔹 When elements are passed as props, they don’t re-render just because the parent re-renders 🔹 children are just props — nothing special! They behave exactly like any other prop passed to a component 📚 Inspired by advanced React learning concepts #ReactJS #FrontendDevelopment #JavaScript #WebDevelopment #SoftwareEngineering #LearningInPublic