Custom Toast Notification System with JavaScript & React

React Calculator Project ⚛️ Built a calculator using React functional components and hooks. Focused on onClick event handling, state management, and handling edge cases like division by zero, with a clean and simple UI. 🔗 GitHub: https://lnkd.in/dWfHCAyZ #ReactJS #JavaScript #FrontendDevelopment #Projects #Learning

While starting to learn React, I decided to keep things simple. I built the same Todo List twice with the same UI design: First using pure JavaScript, Then rebuilding it with React. This helped me clearly see the difference between: • JavaScript DOM manipulation • React’s component-based thinking Project features: • Add new tasks • Delete tasks • Toggle task completion • Search tasks • Filter tasks (All / Completed / Not Completed) Small project, but a big learning step for me. Live Demo: JS version: https://lnkd.in/ebWQRNar React version: https://lnkd.in/eJt2Svj7 #React #JavaScript #FrontendDevelopment #WebDevelopment #LearningInPublic #TodoApp

🚫 Jumping into React too early cost me clarity. When I shifted to a JS-first approach, React stopped feeling complex. React isn’t a separate skill. It’s JavaScript applied to UI with rules around state and re-renders. Here’s what actually made the difference: 1️⃣ Closures Without understanding closures, hooks feel unpredictable. They explain: • Why stale state happens • Why dependencies matter in useEffect 2️⃣ Async JavaScript API calls aren’t React problems. They’re event loop problems. Once I understood promises and async flow, state updates became logical. 3️⃣ Array Methods .map() and .filter() power dynamic rendering. If you struggle with these, JSX becomes messy fast. 4️⃣ Scope & Execution Context • Re-renders are execution cycles • Event handlers are closures • State is captured context None of this is “React magic.” It’s JavaScript. React became easier the moment I stopped “learning React” and started mastering JavaScript fundamentals. Skill sequencing matters. If you're starting in frontend, build language depth before chasing frameworks. What JS concept made things click for you? #JavaScript #React #WebDevelopment #Frontend #LearningInPublic

𝐓𝐨𝐝𝐚𝐲 𝐈 𝐩𝐮𝐛𝐥𝐢𝐬𝐡𝐞𝐝 𝐦𝐲 𝐟𝐢𝐫𝐬𝐭 𝐧𝐩𝐦 𝐩𝐚𝐜𝐤𝐚𝐠𝐞 🎉 𝗖𝗵𝗲𝗰𝗸 𝗶𝘁 𝗼𝘂𝘁 𝗵𝗲𝗿𝗲: https://lnkd.in/dJAJZBG2 𝗪𝗵𝗮𝘁 𝗽𝗿𝗼𝗯𝗹𝗲𝗺 𝗜 𝗳𝗮𝗰𝗲𝗱? In React Native, we can’t create gradient text with just <Text />. Every time we need to use: • MaskedView • react-native-linear-gradient • absolute positioning • invisible text for layout sizing It’s repetitive, easy to mess up and honestly… not clean. Every new project, same setup again and again. 𝗦𝗼 𝘄𝗵𝗮𝘁 𝗜 𝗱𝗶𝗱? I created a simple reusable component. 𝗡𝗼𝘄 𝘆𝗼𝘂 𝗷𝘂𝘀𝘁: • Import the component • Pass colors, start, end • Or disable gradient with showGradient={false} • Use normal Text props That’s it. Clean. Reusable. Typed with TypeScript. No more repeating complex setup in every screen. 𝗛𝗼𝘄 𝘆𝗼𝘂 𝗰𝗮𝗻 𝗯𝗲𝗻𝗲𝗳𝗶𝘁? If you are building: • Landing screens • Premium UI • Highlighted titles • Branding text You can now add gradient text in seconds. No headache. No layout hacks. This is my first npm package, so your feedback means a lot. If you try it, let me know what I can improve. 𝗪𝗵𝗮𝘁 𝘀𝗺𝗮𝗹𝗹 𝗽𝗿𝗼𝗯𝗹𝗲𝗺 𝗶𝗻 𝗥𝗲𝗮𝗰𝘁 𝗡𝗮𝘁𝗶𝘃𝗲 𝗶𝘀 𝗮𝗻𝗻𝗼𝘆𝗶𝗻𝗴 𝘆𝗼𝘂 𝘁𝗵𝗲𝘀𝗲 𝗱𝗮𝘆𝘀 𝘁𝗵𝗮𝘁 𝘆𝗼𝘂 𝘄𝗶𝘀𝗵 𝗵𝗮𝗱 𝗮 𝘀𝗶𝗺𝗽𝗹𝗲 𝗿𝗲𝘂𝘀𝗮𝗯𝗹𝗲 𝘀𝗼𝗹𝘂𝘁𝗶𝗼𝗻? 👀 #ReactNative #JavaScript #OpenSource #MobileDevelopment #npm

Built a Dice Roll UI using React 🎲 A small project focused on component structure, state handling, and interactive UI behavior. Learning by building — one project at a time. Git Hub Link:https://lnkd.in/gJQUqAWp #ReactJS #FrontendDevelopment #JavaScript #WebDevelopment #BuildInPublic

Hook: JavaScript gives you wings, but TypeScript gives you a parachute. 🪂 If you’re building a small prototype, JavaScript is your best friend. It’s fast, flexible, and gets the job done. But as soon as your codebase starts to grow, the "runtime error" nightmare begins. The Breakdown: 🟡 JavaScript → High flexibility (Dynamic) → Lightning-fast prototyping → Risk: Errors only show up when the user hits them (Runtime) 🔵 TypeScript → High stability (Strongly typed) → Self-documenting code → Win: Errors are caught while you type (Compile-time) 📌 The Reality Check: At the end of the day, all TypeScript compiles down to JavaScript. You aren't replacing JS; you're just adding a layer of intelligence on top of it. If you plan on scaling, TypeScript doesn't waste time—it saves it by preventing bugs before they even happen. 💬 The Great Debate: Are you Team "Speed" (JS) or Team "Safety" (TS)? Let’s discuss in the comments! 👇 #SoftwareEngineering #WebDevelopment #JavaScript #TypeScript #Coding #TechTrends

🚀 Day 65 Mastering Event Handling in React Today I explored event handling in React and how it differs from plain JavaScript. This is a crucial concept for building interactive and responsive UIs. 🔹 React Events vs Plain JavaScript • JavaScript: Select elements → add event listeners manually • React: Attach events directly in JSX (onClick, onChange, onSubmit, onMouseOver, etc.) • React makes event handling cleaner, declarative, and easier to manage. 🔹 Handling Common Events in React 🖱️ Button Click (onClick) • Always pass a function reference, not an immediate call ✅ onClick={handleClick} ❌ onClick={handleClick()} • Immediate calls run during render — a common beginner mistake. •🐭 Mouse Events (onMouseOver) • Trigger actions when hovering over elements • Useful for tooltips, hints, or interactions •  Input Change (onChange) • Captures real-time input changes Access value using: event.target.value • Makes inputs controlled components 📩 Form Submission (onSubmit) • Forms reload the page by default Prevent this using: event.preventDefault() • Allows custom logic without refresh 🔹 Event Bubbling & Propagation React follows DOM event bubbling Use: event.stopPropagation() to prevent events from reaching parent elements Helpful in nested components. 🧪 Practical Example: Color Switcher App • Parent tracks total clicks • Child button changes background color • stopPropagation() prevents parent click firing • State updates UI dynamically • A great real-world example from React’s official docs 👌 📌 Best Practices I Learned • Always pass function references • Use preventDefault() for forms • Use stopPropagation() for nested events • Access input data via event.target.value • Regularly read official React documentation 🧠 Key Takeaway React event handling is simpler, safer, and more predictable than traditional JavaScript — once you understand function references and event flow. On to more hands-on React patterns 🚀 #ReactJS #JavaScript #FrontendDevelopment #LearningInPublic #WebDevelopment #Day65

🔐 React Password Generator This is a simple React project, but it uses very useful concepts. The project helped me understand how React manages state, updates the UI, and works with real-world features like copy-to-clipboard. Concepts used: -React Hooks (useState) -Controlled inputs -Event handling -Random number generation -Clipboard API 📂 GitHub Repo: https://lnkd.in/gu3fdw_f #ReactJS #FrontendDevelopment #JavaScript #LearningByDoing #WebDevelopment

🚀 𝗨𝗻𝗱𝗲𝗿𝘀𝘁𝗮𝗻𝗱𝗶𝗻𝗴 𝘁𝗵𝗲 𝗝𝗮𝘃𝗮𝗦𝗰𝗿𝗶𝗽𝘁 𝗘𝘃𝗲𝗻𝘁 𝗟𝗼𝗼𝗽 The image below visually explains how JavaScript handles asynchronous operations using the Event Loop — a core concept behind non-blocking behavior in JS. Here’s how it works 👇 🔹 Call Stack All synchronous code is executed here, one function at a time. 🔹 Web APIs Async tasks like setTimeout, fetch, and DOM events are handled outside the call stack. 🔹 Microtask Queue Promises and mutation observers go here. 👉 These are executed before the callback (task) queue. 🔹 Callback (Task) Queue Contains callbacks from timers and events. 🔁 Event Loop’s Job 1️⃣ Executes the Call Stack 2️⃣ Processes all Microtasks 3️⃣ Handles the Callback Queue This cycle keeps repeating, ensuring smooth execution without blocking the UI. 💡 Why this matters Understanding the Event Loop helps you: ◉ Write better async code ◉ Avoid unexpected execution order ◉ Debug promises, timers, and UI issues ◉ Build high-performance frontend applications If you work with JavaScript, React, or Node.js, mastering the Event Loop is a must 💪 💬 What part of the Event Loop confused you the most when you first learned it? #JavaScript #EventLoop #AsyncJavaScript #FrontendDevelopment #WebDevelopment #ReactJS #NodeJS #JSConcepts #TechLearning

🚀 30 Days — 30 React Mistakes Beginners Make 📅 Day 2/30 ❌ Mistake: Using Index as Key in Lists My list UI started behaving strangely after deleting an item 😵 Code 👇 {users.map((user, index) => ( <div key={index}>{user.name}</div> ))} Looks fine… but it’s not. 💡 Why This Is a Problem React uses key to identify elements between renders. When items are added or removed: Index changes React reuses wrong elements UI bugs appear ✅ Correct Way {users.map((user) => ( <div key={user.id}>{user.name}</div> ))} Use a unique and stable key (like id). 🎯 Lesson Index as key = future bug. Stable keys = stable UI. #ReactJS #JavaScript #Frontend #WebDevelopment #CodingJourney #DeveloperLife #LearnToCode #ReactDeveloper #TechContent #CodeNewbie