🚀 𝗕𝘂𝗶𝗹𝘁 𝗮 𝗗𝗲𝘀𝗶𝗴𝗻𝗲𝗿 𝗟𝗮𝗻𝗱𝗶𝗻𝗴 𝗣𝗮𝗴𝗲... 𝗕𝘂𝘁 𝗪𝗶𝘁𝗵𝗼𝘂𝘁 𝗝𝗦𝗫 😮 Today I completed a banner (hero) section + navbar using React via CDN, and honestly, this approach changed how I see React completely. While most beginners jump straight into JSX and frameworks, I took a step back and built everything using React.createElement(). No build tools. No JSX. Just pure JavaScript and React fundamentals. 💡Why this approach? I wanted to understand what’s really happening under the hood instead of relying on abstractions. 🧠 What I learned deeply: 🔹 How React elements are actually created and structured 🔹 How children and props are passed manually 🔹 How component composition works without syntactic sugar 🔹 How ReactDOM renders and updates the UI 🔹 The mental model behind the Virtual DOM 🎯 What I built: ✨ A clean and modern Designer Landing Page banner ✨ A structured Navbar with CTA (Book a Call) ✨ A Hero section with:  • Left vertical designer label   • Center content (headline + stats counters)   • Right-side image composition   • Scroll indicator 🛠️ Tech Stack: React (CDN) | Vanilla JS | CSS | SCSS ⚡ Challenges I faced: ❌ Managing nested elements without JSX readability ❌ Handling multiple children arrays inside "createElement" ❌ Keeping the structure clean and scalable ❌ Debugging UI hierarchy manually ❌ Reusing components without modern tooling But overcoming these made everything click 💡 Live: https://lnkd.in/gP3d8U4a Repo: https://lnkd.in/ge5rSn83 Profile: https://lnkd.in/dZNGV9UM 🔥 Big takeaway: JSX is convenient… but understanding React without it is powerful. This exercise helped me see React as JavaScript first, framework second. 💬 Next step: Moving into JSX, Hooks, and modern tooling with a much stronger foundation. #webdevelopment #webdev #frontenddeveloper #learninpublic #buildinpublic #creativecoding #programming #javascript #function #import #export #react #virtualDOM #components #project #assignment

Built a real DOM-based project today......a To-Do List And honestly, it taught me more than I expected. Here’s what it does: - You can type a task and add it using a button - Or simply press Enter on the keyboard to add it instantly - Each task gets added dynamically to the list - Task counters update in real time (In Progress + Completed) - You can delete tasks anytime - You can also mark tasks as completed and track progress What seemed like a “simple project” actually pushed me to understand how everything connects behind the scenes: - How DOM updates work in real time - How events like clicks and keyboard inputs interact with JavaScript - How dynamic UI changes without refreshing the page Even a basic To-Do app contains the core logic of real-world applications. Small steps. Real understanding. Constant building. 💻🔥 #WebDevelopment #JavaScript #DOM #FrontendDevelopment #BuildInPublic

Have you ever needed to touch the DOM directly while working in React? React is designed to be declarative. You describe the UI based on state, and the library handles the updates. But occasionally, you need what we call an 'escape hatch.' This is precisely where 'refs' come into play. They provide a way to access a DOM node or a React element directly, bypassing the standard re-render cycle. The most common reason to reach for a ref is to manage things like focus, text selection, or media playback. If you need a specific input field to focus the moment a page loads, you cannot easily do that with state alone. You need to reach into the DOM and call the native '.focus()' method. Beyond the DOM, refs are also perfect for storing any mutable value that needs to persist across renders without triggering a UI update. This includes things like timer IDs or tracking previous state values for comparison. However, with great power comes responsibility. Using refs is essentially stepping outside of the React ecosystem and taking manual control. If you can achieve your goal using props and state, you should. Overusing refs can make your components harder to debug and breaks the predictable flow of data that makes React so reliable. It is a tool for the edge cases, not the daily routine. Use it when you need to talk to the browser directly, but keep your core logic declarative. #ReactJS #SoftwareEngineering #WebDevelopment #Javascript #Frontend #CodingTips

🚀 Day 7 / 21 — Frontend Challenge Yesterday I built a basic Todo List… Today, I turned it into a smart productivity app 👇 Today I built: 👉 Advanced Todo App ⚡ 🧠 Flow I designed before coding: Refactored previous logic for better scalability Implemented LocalStorage to persist tasks Added task completion toggle system Built edit functionality with prompt modal Designed filter system (All / Completed / Pending) Improved UI feedback and interactions Optimized render logic for dynamic updates Focused on making it feel like a real-world app 🛠 Tech Used: HTML | CSS | JavaScript ✨ Features: • Add, Edit & Delete tasks • Mark tasks as completed ✅ • Filter tasks (All / Completed / Pending) • Data saved using LocalStorage 💾 • Real-time UI updates • Clean & responsive UI ⚡ Challenges Faced: Managing multiple states (completed, filtered, edited) while keeping the UI synced was tricky. Also, ensuring data persistence without breaking the flow required careful logic handling. 💡 Key Learning: Learned how to structure scalable JavaScript logic, manage application state, and build a more real-world interactive UI instead of just a basic project. 🔥 From Day 6 ➝ Day 7: Basic project ➝ Practical application 🚀 Consistency is turning small projects into powerful builds 💯 💬 What should I build next? (Thinking about Drag & Drop or Theme Toggle 😏) 🙏 Guidance by: @Keyur Gohil 📌 GitHub Repo: https://lnkd.in/dvRfEDER — #buildinpublic #frontenddeveloper #javascriptprojects #webdevelopment #codingjourney #100daysofcode #developers #programminglife #learninpublic #uidesign #productivity

React System Design – Day 10: Hooks and Their Rules Hooks are the backbone of modern React development. They let us write cleaner, more reusable, and more functional code. But with great power comes great responsibility — and React enforces some strict rules to keep things predictable.  The Two Golden Rules of Hooks Only call Hooks at the top level Don’t call them inside loops, conditions, or nested functions. This ensures React can preserve the correct state across re-renders. Only call Hooks from React functions Hooks must be used inside functional components or custom Hooks. Never call them in regular JS functions or class components.  Why These Rules Matter They guarantee consistent order of execution. They prevent bugs where state or effects get mismatched. They make debugging and reasoning about components much easier.  Commonly Used Hooks useState → Manage local state useEffect → Handle side effects useContext → Share data without prop drilling useReducer → Complex state management useMemo & useCallback → Performance optimizations  Takeaway: Mastering Hooks isn’t just about knowing them — it’s about respecting their rules. That’s what makes React apps scalable and maintainable. #React #SystemDesign #Frontend #Hooks #JavaScript #WebDevelopment

🚀 Leveling Up: Bridging Frontend & Data with React I’m excited to share a project I’ve been working on that helped me dive deeper into the world of React and API integration. As part of my journey to master full-stack development, I built a custom Music Dashboard that connects a static JSON API to a dynamic React frontend. This project wasn't just about code—it was about understanding how data flows from a source to a user interface seamlessly. I learned not to use "<a>" tag in the react , so that it as a react router, which has "<Link>" tag to navigate through various pages, wow its really a great lesson! instead of saving video , i embed a youtube link in my custom api,so that i can extract my video id from that link and use it in a react-youtube library! 🛠️ Key Learnings & Features: Custom JSON API: Structured and hosted a static API to manage song data and metadata. React Logic: Implemented advanced mapping and state management to render a responsive grid of "poster-style" cards. Video Integration: Integrated a "YouTube" player logic to handle dynamic video IDs, allowing for a seamless "Play" experience. Creative UI: Experimented with CSS blend modes (halftone overlays) and Grid layouts to create a unique, high-fidelity visual aesthetic. This project allowed me to combine my technical skills with my personal interests, integrating some of my favorite playlists into a functional application. 🔗 Check it out: Live Demo: https://lnkd.in/e6nBs2Bn GitHub Repository: https://lnkd.in/ea9qE4gx Always curious, always building. On to the next challenge! 💻✨ #WebDevelopment #ReactJS #Frontend #Programming #JavaScript #API #LearningByDoing #SoftwareEngineering #ProjectShowcase

🚀 React.memo — Prevent Unnecessary Re-renders Like a Pro In React, re-renders are normal… 👉 But unnecessary re-renders = performance issues That’s where React.memo helps. 💡 What is React.memo? React.memo is a higher-order component (HOC) 👉 It memoizes a component 👉 Prevents re-render if props haven’t changed ⚙️ Basic Example const Child = React.memo(({ name }) => { console.log("Child rendered"); return <h1>{name}</h1>; }); 👉 Now it only re-renders when name changes 🧠 How it works 👉 React compares previous props vs new props If same: ✅ Skips re-render If changed: 🔁 Re-renders component 🔥 The Real Problem Without memo: <Child name="Priyank" /> 👉 Even if parent re-renders 👉 Child also re-renders ❌ With React.memo: ✅ Child re-renders only when needed 🧩 Real-world use cases ✔ Large component trees ✔ Expensive UI rendering ✔ Lists with many items ✔ Components receiving stable props 🔥 Best Practices (Most developers miss this!) ✅ Use with stable props ✅ Combine with useCallback / useMemo ✅ Use in performance-critical components ❌ Don’t wrap every component blindly ⚠️ Common Mistake // ❌ Passing new function each render <Child onClick={() => console.log("Click")} /> 👉 Breaks memoization → causes re-render 💬 Pro Insight (Senior-Level Thinking) 👉 React.memo is not magic 👉 It works only if: Props are stable Reference doesn’t change 📌 Save this post & follow for more deep frontend insights! 📅 Day 21/100 #ReactJS #FrontendDevelopment #JavaScript #PerformanceOptimization #ReactHooks #SoftwareEngineering #100DaysOfCode 🚀

🚀 Day 15 of my #100DaysOfCode Challenge! 🚀 Excited to share my latest React project: Book Vibe! 📚 I've been diving deep into front-end development, and this project was a fantastic way to bring multiple concepts together into one polished application. Book Vibe is a fully responsive web app designed to help readers curate their book collections, track what they’ve read, and manage their wishlists. ✨ Key Features: Interactive Curation: Instantly add books to a "Read List" or "Wishlist" with smooth, persistent Toast notifications preventing duplicate entries. Dynamic Sorting: Users can sort their saved books by specific metrics like Number of Pages or Rating. Seamless Navigation: Built a clean tabbed interface to switch between lists without reloading, and a custom 404 error page to catch broken links gracefully. Fully Responsive: Carefully styled to look great on everything from mobile phones to ultra-wide desktop monitors. 🛠️ The Tech Stack: Core: React (v18), Vite Routing & State: React Router DOM (v6 Data Router API), Context API Styling & UI: Tailwind CSS, DaisyUI, React Icons Deployment: Netlify 🧠 Biggest Takeaways & What I Learned: This project pushed me to level up my state management. Moving away from prop drilling and effectively using the Context API made managing the global state of the reading lists across different components so much cleaner. I also gained some serious hands-on experience with deployment routing. Deploying a Single Page Application (SPA) with React Router meant diving into how server-side routing works, and configuring a _redirects file on Netlify to ensure users can refresh or visit direct URLs without hitting those dreaded 404 errors! I would love to hear your thoughts. If you have any feedback on the UI, the code structure, or how I can improve the sorting logic, please drop a comment below! 👇 🔗 Live Demo: [https://lnkd.in/gepCR4Vk] 💻 GitHub Repo: [https://lnkd.in/gN9DbC32] #ReactJS #TailwindCSS #WebDevelopment #Frontend #JavaScript #DaisyUI #ProgrammingHero #SoftwareEngineering #TechJourney

🚀 A clean frontend structure makes a project easier to build, manage, and scale. Here’s a simple frontend folder breakdown 👇 📡 API — Handles requests and communication with the backend. 🖼️ Assets — Stores static files like images, icons, and fonts. 🧩 Components — Contains reusable UI elements used across the app. 🌐 Context — Manages shared global state without prop drilling. 📂 Data — Keeps static data, constants, and mock content. 🪝 Hooks — Holds reusable custom React logic. 📄 Pages — Represents the main screens or routes of the application. 🔄 Redux — Manages complex global state in a predictable way. ⚙️ Services — Contains business logic and app-related operations. 🛠️ Utils — Includes helper functions used in different places. A good folder structure improves readability, teamwork, and scalability. 💡 #Frontend #WebDevelopment #ReactJS #JavaScript #Coding #SoftwareDevelopment #Developer

⚡ React.memo is NOT free. Most developers use it wrong. Here’s when it actually helps — …and when it silently makes things worse 👇 ✅ Use React.memo when: • A child component receives the same props often • The parent re-renders frequently (e.g. on every keystroke) • The child is expensive to render ❌ Skip React.memo when: • Props change every render anyway (new object/array inline) • The component is already fast • You haven’t profiled yet 💡 The real gotcha: // ❌ memo does nothing here — new array on every render <MemoChild items={[1, 2, 3]} /> // ✅ stable reference = memo works const items = useMemo(() => [1, 2, 3], []); <MemoChild items={items} /> 🧠 Why this happens: React.memo does a shallow comparison of props. ➡️ New object reference = treated as “changed” ➡️ Component re-renders anyway You just paid: 💸 Comparison cost 💸 Render cost 👉 Lose-lose. 📌 Rule of thumb: Profile first → optimize second #ReactJS #Performance #FrontendDev #WebDev