JSX Compiles to JavaScript, React Updates DOM Efficiently

⚛️ Understanding JSX in React JSX allows us to write HTML-like syntax directly inside JavaScript, making UI code more readable and expressive. Instead of separating logic and markup, JSX lets them live together inside React components. Under the hood, JSX is not HTML — it gets transpiled into React.createElement, which React uses to build the Virtual DOM efficiently. ✅ Combines JavaScript logic with UI ✅ Easier to read and maintain ✅ Makes component-based development intuitive JSX is one of the reasons React feels so natural when building dynamic user interfaces. #React #JSX #JavaScript #FrontendDevelopment #WebDevelopment #ReactJS

𝗗𝗮𝘆 𝟬𝟮 𝗼𝗳 𝟙𝟝 – 𝗗𝗲𝗲𝗽 𝗗𝗶𝘃𝗶𝗻𝗴 𝗶𝗻𝘁𝗼 𝗥𝗲𝗮𝗰𝘁 Many developers use JSX every day, but very few stop to think about what JSX actually is and how it creates the UI we see on the screen. JSX is not HTML. It is simply a syntax that allows us to describe UI using JavaScript in a readable way. However, neither JavaScript nor the browser understands JSX directly. So what really happens behind the scenes? We use a tool called a 𝗧𝗿𝗮𝗻𝘀𝗽𝗶𝗹𝗲𝗿 (such as Babel or ESBuild). Its job is to convert JSX into plain JavaScript objects known as 𝗥𝗲𝗮𝗰𝘁 𝗘𝗹𝗲𝗺𝗲𝗻𝘁𝘀. Once JSX is transformed into React Elements, React passes them to the 𝗥𝗲𝗮𝗰𝘁 𝗥𝗲𝗻𝗱𝗲𝗿𝗲𝗿 (𝗥𝗲𝗮𝗰𝘁 𝗗𝗢𝗠). React DOM then creates a 𝗩𝗶𝗿𝘁𝘂𝗮𝗹 𝗗𝗢𝗠, compares changes efficiently, and updates only the required parts of the actual UI. The overall flow looks like this: 𝗝𝗦𝗫 → 𝗧𝗿𝗮𝗻𝘀𝗽𝗶𝗹𝗲𝗿 (𝗕𝗮𝗯𝗲𝗹 / 𝗘𝗦𝗕𝘂𝗶𝗹𝗱) → 𝗥𝗲𝗮𝗰𝘁 𝗘𝗹𝗲𝗺𝗲𝗻𝘁𝘀 → 𝗥𝗲𝗮𝗰𝘁 𝗥𝗲𝗻𝗱𝗲𝗿𝗲𝗿 → 𝗩𝗶𝗿𝘁𝘂𝗮𝗹 𝗗𝗢𝗠 → 𝗨𝗽𝗱𝗮𝘁𝗲𝗱 𝗨𝗜 Today’s post explains how JSX becomes real UI. This series focuses on understanding React from the inside out. More coming in 𝗗𝗮𝘆 𝟬𝟯. #ReactJS #JavaScript #WebDevelopment #FrontendDevelopment #LearningInPublic #15DaysOfReact #JSX #ReactRenderer

🚫 Stop using querySelector in React! In React, you shouldn’t manipulate the DOM like we do in plain JavaScript (querySelector, getElementById, etc.). Why? Because React uses a Virtual DOM and manages the real DOM for you. Direct DOM manipulation can lead to bugs and unexpected behavior. ✅ The right approach: useRef useRef gives you safe and direct access to a DOM element while staying aligned with React’s lifecycle. ✨ Benefits: Cleaner code Predictable components Easier maintenance Think in React way, not JavaScript way 😉 #React #JavaScript #WebDevelopment #Frontend #CleanCode #ReactHooks #Learning

Ever wondered why JavaScript prints output in a specific order, even when async code looks confusing? This visual clearly explains how the JavaScript Event Loop works behind the scenes: 🔹 Key Components • Call Stack – Executes synchronous code • Web APIs – Handles async operations (setTimeout, fetch, DOM events) • Microtask Queue – Promises (then, catch, finally) • Macrotask Queue – Timers (setTimeout, setInterval) • Event Loop – Decides what runs next 🔹 Execution Order Synchronous code runs first Microtasks (Promises) execute next Macrotasks (Timers) run after microtasks That’s why: Start → End → Promise → Timeout Understanding this flow is crucial for JavaScript, React, Node.js, and frontend interviews — and helps avoid real-world bugs related to async behavior. Strong fundamentals = confident debugging. #JavaScript #EventLoop #AsyncJavaScript #Promises #FrontendDevelopment #NodeJS #InterviewPreparation #WebDevelopment

Why do React components start with a capital letter? Because JSX is just syntax sugar — not magic. When you write: <User /> <div /> Babel transforms it into plain JavaScript: React.createElement(User, null) React.createElement("div", null) 🔑 Here’s the rule that matters: • Lowercase → treated as a string tag ("div", "span") • Capitalized → treated as a JavaScript reference (User) So React understands: • "div" → native DOM element • User → function component → invoke it and continue rendering Now the gotcha 👇 If you write: <user /> JSX becomes: React.createElement("user", null) React now assumes "user" is a host element, not your component. ⚠️ Capitalization isn’t a style choice. It’s how the JSX transform decides whether React should render a DOM node or call your component. Once you understand this, JSX feels far less “magical” — and a lot more predictable. 👉 Have you ever lost time debugging a React issue caused by something this small? #React #JavaScript #FrontendDevelopmen #WebDevelopment #JSX #ReactJS #SoftwareEngineering #CleanCode

Ever wondered why people say “React is declarative”? 🤔 Here’s the simplest way I understand it 👇 In traditional JavaScript, we tell the browser HOW to do things step by step: 👉 find this element 👉 update its text 👉 change its color 👉 handle edge cases React flips this mindset. In React, we just say WHAT the UI should look like for a given state. 🧠 “If the state is this → UI should look like this.” And React handles the how internally. This declarative approach makes code: ✅ easier to read ✅ easier to debug ✅ easier to scale Instead of fighting the DOM, we focus on logic and state, and React takes care of updating the UI efficiently using the Virtual DOM. Once this clicked for me, React started making a lot more sense 💡 If you’re learning React — this mindset shift is a game changer. #ReactJS #WebDevelopment #Frontend #JavaScript #LearningInPublic #DeveloperJourney

⏳ Who Runs First in JavaScript — Promise or Timer? If fetch() and setTimeout() both finish at the same time — which one goes into the call stack first? 🤔 To answer this, let' see how JavaScript actually schedules async work. JavaScript does one thing at a time. When something takes time (API calls, timers, promises), JavaScript delegates the work and continues executing without blocking. So… where does this delegated work go, and how does it come back? 👇 Let's dig more... Call Stack → Executes code one step at a time. Whatever is on top, runs first. Web APIs → Timers (setTimeout, setInterval), fetch, DOM events, console these are not part of JavaScript itself, but are provided by the JS runtime environment (browser / Node). Callback Queue / Microtask Queue → When async work completes: • setTimeout → callback is pushed to Callback Queue • Promises → callback is pushed to Microtask Queue Event Loop → The real hero, its only job is to keep checking: 👉 Is the call stack empty? If yes → move tasks from the queue to the stack (based on priority). What Priority and what about the question? If fetch() (promise) and setTimeout() complete at the same time 👉 Promise callbacks (Microtask Queue) always get priority over timers (Callback Queue). #JavaScript #FrontendDevelopment #WebDevelopment

DAY 6 | OF POSTING REACT CONTENT ⚛️ WHY DOES REACT BUILD UI USING FUNCTIONS — NOT HTML PAGES? 🤔 In React, a screen is not a page. It’s a JavaScript function. That function simply returns what should appear on the screen. This makes the UI: 👉 reusable 👉 easier to manage 👉 easy to change with data That’s the base idea React is built on. 💬 If you’re new to React, this mindset matters more than syntax. #ReactJS #ReactBasics #FrontendDevelopment #JavaScript #LearnInPublic #WebDevelopment #CodingJourney

🚀 Day 63/100 – Custom Hooks | Reusable Logic in React Custom Hooks are a powerful way to extract and reuse logic across React components. By moving shared behavior into hooks, code becomes cleaner, more modular, and significantly easier to maintain. Following the use naming convention ensures compatibility with React’s rules of hooks, while patterns like useFetch and useLocalStorage help eliminate duplication and improve consistency across projects. Key highlights: Creating reusable logic with custom hooks Following the use naming convention Improving code cleanliness and maintainability Reducing duplication with shared hook patterns 💡 Pro Tip: If you see the same logic repeated in multiple components, it belongs in a custom hook. #Day63 #100DaysOfCode #FullStackDevelopment #ReactJS #JavaScript #CustomHooks #WebDevelopment #FrontendDevelopment #DeveloperJourney

Day-3 Event Loop JavaScript Event Loop — The Real Reason Async Code Works JavaScript is single-threaded, yet it handles timeouts, promises, APIs, and user actions without blocking. How? 👉 The Event Loop .Let’s break it down simply 👇 🧠 JavaScript has: Call Stack – Executes synchronous code Web APIs – Handles async tasks (setTimeout, fetch, DOM events) Callback / Task Queue – setTimeout, setInterval Microtask Queue – Promises, MutationObserver Event Loop – The coordinator 🔁 🔄 How it actually works: 1️⃣ JS executes sync code in the Call Stack 2️⃣ Async code moves to Web APIs 3️⃣ When ready: Promises → Microtask Queue setTimeout → Callback Queue(Macrotasks Queue) 4️⃣ Event Loop checks: Is Call Stack empty? Run ALL microtasks first Then pick one task from callback queue ⚠️ Important Interview Rule: 👉 Microtasks always run before Macrotasks console.log("start"); setTimeout(() => console.log("timeout"), 0); Promise.resolve().then(() => console.log("promise")); console.log("end"); ✅ Output: start end promise timeout 💡 Because Promise → Microtask Queue and Microtasks have higher priority #JavaScript #EventLoop #AsyncJS #Frontend #WebDevelopment #JSInterview