Event Listeners in JavaScript: Cleaner Code with JavaScript

#react #3 ** What is JSX? How It Works?** 👉 JSX = JavaScript XML 👉 It is a syntax used in React that lets you write HTML-like code inside JavaScript 🔹 Example const element = <h1>Hello World</h1>; 👉 This looks like HTML 👉 But it is actually JavaScript 🤔 Why JSX is used? Without JSX: const element = React.createElement("h1", null, "Hello World"); 👉 Hard to read ❌ With JSX: const element = <h1>Hello World</h1>; 👉 Easy to read ✅ 👉 Looks like HTML ✅ ⚙️ How JSX Works Behind the Scenes JSX is not understood by browsers ❗ 👉 It is converted by Babel into: React.createElement("h1", null, "Hello World"); 👉 Then JavaScript engine (like V8) executes it 🔹 JSX Rules (Very Important) 1. Must return single parent return (   <div>     <h1>Hello</h1>     <p>World</p>   </div> ); 2. Use className instead of class <div className="box"></div> 3. Use {} for JavaScript    const name = "Amit"; <h1>Hello {name}</h1> 4. Self-closing tags <img src="img.png" /> <br /> 5. Inline styles use object <div style={{ color: "red" }}>Text</div> 🔹 JSX with JavaScript logic const isLoggedIn = true; <h1>{isLoggedIn ? "Welcome" : "Please Login"}</h1> 🧑🍳 Simple analogy 👉 JSX is like: Writing HTML inside JS But actually it becomes pure JS behind the scenes 🎯 Why JSX is powerful Easy to read Combines UI + logic Makes React code cleaner 🧾 Final Summary JSX = HTML-like syntax in React Not real HTML Converted to JS using Babel Makes UI code simple and readable 💡 One-line takeaway 👉JSX lets you write HTML-like code inside JavaScript, which gets converted into normal JavaScript #React #FrontEnd #SoftwareDevelopment

Ever tried mixing HTML inside JavaScript… and everything just broke? 🤯 Or got weird errors for something that “looks like valid HTML”? That’s where 𝗝𝗦𝗫 𝗶𝗻 𝗥𝗲𝗮𝗰𝘁 changes the game. 🚀 𝗝𝗦𝗫 𝗕𝗮𝘀𝗶𝗰𝘀 — 𝗪𝗿𝗶𝘁𝗶𝗻𝗴 𝗨𝗜 𝗶𝗻𝘀𝗶𝗱𝗲 𝗝𝗮𝘃𝗮𝗦𝗰𝗿𝗶𝗽𝘁 In React, we don’t write traditional HTML. Instead, we use 𝗝𝗦𝗫 (𝗝𝗮𝘃𝗮𝗦𝗰𝗿𝗶𝗽𝘁 𝗫𝗠𝗟) — a syntax that lets you write HTML-like code inside JavaScript. 👉 It makes UI code more readable and component-driven. 💡 𝗪𝗵𝗮𝘁 𝗶𝘀 𝗝𝗦𝗫 (𝗮𝗻𝗱 𝘄𝗵𝘆 𝘂𝘀𝗲 𝗶𝘁)? JSX is a syntax extension for JavaScript used in React to describe UI. Under the hood: ◦ JSX gets converted into React.createElement() ◦ It helps React understand what UI to render 👉 Why developers love it: ◦ Cleaner and more readable UI code ◦ Combines logic + UI in one place ◦ Reduces manual DOM manipulation 🔍 𝗘𝘅𝗮𝗺𝗽𝗹𝗲: 𝗦𝗶𝗺𝗽𝗹𝗲 𝗝𝗦𝗫 𝗖𝗼𝗺𝗽𝗼𝗻𝗲𝗻𝘁 𝑓𝑢𝑛𝑐𝑡𝑖𝑜𝑛 𝐺𝑟𝑒𝑒𝑡𝑖𝑛𝑔() {   𝑐𝑜𝑛𝑠𝑡 𝑛𝑎𝑚𝑒 = "𝑆ℎ𝑢𝑏ℎ𝑎𝑚"; 𝑟𝑒𝑡𝑢𝑟𝑛 (    <𝑑𝑖𝑣>     <ℎ2>𝐻𝑒𝑙𝑙𝑜, {𝑛𝑎𝑚𝑒} 👋</ℎ2>     <𝑝>𝑊𝑒𝑙𝑐𝑜𝑚𝑒 𝑡𝑜 𝑅𝑒𝑎𝑐𝑡 𝐽𝑆𝑋 𝑏𝑎𝑠𝑖𝑐𝑠!</𝑝>    </𝑑𝑖𝑣>   ); } 🧠 𝗪𝗵𝗮𝘁’𝘀 𝗵𝗮𝗽𝗽𝗲𝗻𝗶𝗻𝗴 𝗵𝗲𝗿𝗲? ◦ {name} → injects JavaScript inside JSX ◦ JSX looks like HTML, but it’s actually JavaScript ◦ The component returns UI that React renders to the DOM 👉 This is declarative UI — you describe what to show, not how to update it ⚠️ 𝗝𝗦𝗫 𝗥𝘂𝗹𝗲𝘀 𝗘𝘃𝗲𝗿𝘆 𝗗𝗲𝘃𝗲𝗹𝗼𝗽𝗲𝗿 𝗠𝘂𝘀𝘁 𝗞𝗻𝗼𝘄 1️⃣ 𝗥𝗲𝘁𝘂𝗿𝗻 𝗮 𝘀𝗶𝗻𝗴𝗹𝗲 𝗽𝗮𝗿𝗲𝗻𝘁 𝗲𝗹𝗲𝗺𝗲𝗻𝘁 𝑟𝑒𝑡𝑢𝑟𝑛 (   <𝑑𝑖𝑣>    <ℎ1>𝐻𝑒𝑙𝑙𝑜</ℎ1>    <𝑝>𝑊𝑜𝑟𝑙𝑑</𝑝>   </𝑑𝑖𝑣> ); 2️⃣ 𝗨𝘀𝗲 𝗰𝗹𝗮𝘀𝘀𝗡𝗮𝗺𝗲 𝗶𝗻𝘀𝘁𝗲𝗮𝗱 𝗼𝗳 𝗰𝗹𝗮𝘀𝘀 <𝑑𝑖𝑣 𝑐𝑙𝑎𝑠𝑠𝑁𝑎𝑚𝑒="𝑐𝑜𝑛𝑡𝑎𝑖𝑛𝑒𝑟"></𝑑𝑖𝑣> 3️⃣ 𝗔𝗹𝘄𝗮𝘆𝘀 𝗰𝗹𝗼𝘀𝗲 𝘁𝗮𝗴𝘀 <𝑖𝑚𝑔 𝑠𝑟𝑐="𝑖𝑚𝑎𝑔𝑒.𝑝𝑛𝑔" /> 4️⃣ 𝗨𝘀𝗲 𝗰𝘂𝗿𝗹𝘆 𝗯𝗿𝗮𝗰𝗲𝘀 𝗳𝗼𝗿 𝗝𝗮𝘃𝗮𝗦𝗰𝗿𝗶𝗽𝘁 <ℎ1>{2 + 2}</ℎ1> 5️⃣ 𝗜𝗻𝗹𝗶𝗻𝗲 𝘀𝘁𝘆𝗹𝗲𝘀 𝘂𝘀𝗲 𝗼𝗯𝗷𝗲𝗰𝘁𝘀 <𝑑𝑖𝑣 𝑠𝑡𝑦𝑙𝑒={{ 𝑐𝑜𝑙𝑜𝑟: "𝑏𝑙𝑢𝑒", 𝑓𝑜𝑛𝑡𝑆𝑖𝑧𝑒: "18𝑝𝑥" }}></𝑑𝑖𝑣> 🏗️ 𝗥𝗲𝗮𝗹-𝘄𝗼𝗿𝗹𝗱 𝘂𝘀𝗲 𝗰𝗮𝘀𝗲𝘀 JSX is used everywhere in React apps: ◦ Building reusable UI components ◦ Rendering dynamic data (API responses) ◦ Conditional rendering (login/logout UI) ◦ Mapping lists (products, users, posts) 📌 𝗞𝗲𝘆 𝗧𝗮𝗸𝗲𝗮𝘄𝗮𝘆𝘀 ✔ JSX makes UI code readable and expressive ✔ It combines JavaScript logic with HTML-like syntax ✔ Following JSX rules avoids common beginner mistakes Once you get comfortable with JSX… React starts to feel natural. 💬 Do you find JSX intuitive or confusing when you first learned it? 🚀 Follow Shubham Kumar Raj for more such content. #JavaScript #WebDevelopment #Frontend #CodingTips #100DaysOfCode #codinginterview #learnjavascript #programming #interviewprep #CareerGrowth #SowftwareEngineering #OpenToWork #ReactJS #FrontendDevelopment #Coding

🚀 Day 4 of #30DaysOfJavaScript (27 April 2026) Today I explored All Types of Functions in JavaScript (with definitions & examples) আজ আমি JavaScript-এর সব ধরনের Function শিখেছি (definition ও example সহ) 📌 Function (Definition | সংজ্ঞা) 👉 A function is a reusable block of code that performs a specific task. 👉 Function হলো reusable code block যেটা নির্দিষ্ট কাজ করে। 🔹 1. Function Declaration 👉 Defined using function keyword 👉 function keyword দিয়ে define করা হযfunction greet() { console.log("Hello"); } greet(); 🎯 Use: General reusable logic 🔸 2. Function Expression 👉 Function stored in a variable 👉 variable এর ভিতরে function রাখা হয়const greet = function() { console.log("Hi"); }; 🎯 Use: Dynamic function usage, callbacks ⚡ 3. Arrow Function (ES6) 👉 Short syntax using => 👉 shortcut way te function লেখা হয়const add = (a, b) => a + b; 🎯 Use: Clean & short code (React e beshi use) 🔁 4. Callback Function 👉 Function passed as argument to another function 👉 ekta function ke onno function er moddhe pathano hoy function greet(name, callback) { console.log("Hi " + name); callback(); } greet("Fahmida", () => console.log("Done")); 🎯 Use: Async কাজ, event handling 🧠 5. Anonymous Function 👉 Function without a name 👉 function er kono naam thake na setTimeout(function() { console.log("Hello"); }, 1000); 🎯 Use: One-time use, callbacks 🔄 6. IIFE (Immediately Invoked Function) 👉 Runs immediately after definition 👉 define korar sathe sathe run hoy (function() { console.log("Run instantly"); })(); 🎯 Use: Private scope, global variable avoid 🧩 7. Higher-Order Function 👉 Function that takes/returns another function 👉 function jeta onno function ke receive ba return kore function multiplier(x) { return function(y) { return x * y; }; } 🎯 Use: map, filter, reusable logic 🧱 8. Constructor Function 👉 Used to create objects with new 👉 object create korar jonno use hoy function User(name) { this.name = name; } const u1 = new User("Fahmida"); 🎯 Use: Object creation (OOP style) ⚠️ Common Mistakes 👉 Arrow function e this confusion 👉 Forgetting return 👉 Overusing anonymous functions 🔥 Learning 👉 Functions are the heart of JavaScript — everything from React components to APIs depends on them 👉 JavaScript-এর সবচেয়ে powerful concept হলো function #JavaScript #FullStackDeveloper #LearningInPublic #WebDevelopment #30DaysChallenge ়

Top Javascript #interview Questions 1. What is the difference between var, let, and const in JavaScript? 2. What are closures in JavaScript, and how do they work? 3. What is the this keyword in JavaScript, and how does it behave in different contexts? 4. What is a JavaScript promise, and how does it handle asynchronous code? 5. What is the event loop, and how does JavaScript handle asynchronous operations? 6. What is hoisting in JavaScript, and how does it work? 7. What are JavaScript data types, and how do you check the type of a variable? 8. What is the difference between null and undefined in JavaScript? 9. What is a callback function, and how is it used? 10. How do you manage errors in JavaScript? 11. What is the difference between setTimeout() and setInterval()? 12. How do JavaScript promises work, and what is the then() method? 13. What is async/await, and how does it simplify asynchronous code in JavaScript? 14. What are the advantages of using async functions over callbacks? 15. How do you handle multiple promises simultaneously? 16. What are higher-order functions in JavaScript, and can you provide an example? 17. What is destructuring in JavaScript, and how is it useful? 18. What are template literals in JavaScript, and how do they work? 19. How does the spread operator work in JavaScript? 20. What is the rest parameter in JavaScript, and how does it differ from the arguments object? 21. What is the difference between an object and an array in JavaScript? 22. How do you clone an object or array in JavaScript? 23. What are object methods like Object.keys(), Object.values(), and Object.entries()? 24. How does the map() method work in JavaScript, and when would you use it? 25. What is the difference between map() and forEach() in JavaScript? 26. What is event delegation in JavaScript, and why is it useful? 27. What are JavaScript modules, and how do you import/export them? 28. What is the prototype chain in JavaScript, and how does inheritance work? 29. What is bind(), call(), and apply() in JavaScript, and when do you use them? 30. How does JavaScript handle equality comparisons with == and ===? 31. What is the Document Object Model (DOM), and how does JavaScript interact with it? 32. How do you prevent default actions and stop event propagation in JavaScript? 33. What is the difference between synchronous and asynchronous code in JavaScript? 34. What is the difference between an event object and a custom event in JavaScript? 35. How do you optimize performance in JavaScript applications? 𝗦𝘁𝗮𝗿𝘁 𝘀𝗺𝗮𝗹𝗹 → 𝗕𝘂𝗶𝗹𝗱 → 𝗛𝗼𝗼𝗸 → 𝗙𝗲𝘁𝗰𝗵 → 𝗦𝘁𝘆𝗹𝗲 → 𝗧𝗲𝘀𝘁 → 𝗗𝗲𝗽𝗹𝗼𝘆. Follow Alpna P. for more related content! #ReactJS #ReactHooks #ReactDeveloper #ReactTips #ReactCommunity #FrontendDevelopment #WebDevelopment #JavaScript #JSX #TypeScript #CodingLife #DevTips #TechCommunity #LearnToCode #javascript #interview2025 #freshers #frontend #learnandgrow #webdevlopment #fundametals

🚀 Day 14 – Web Development Journey (Web APIs & JavaScript Modules) Today I learned about JavaScript Web APIs and Modules, which are essential for building real-world, interactive applications. 📌 1️⃣ Web APIs in JavaScript Web APIs are built-in browser features that allow JavaScript to interact with the browser and external systems. 🔹 DOM API – Used to access and modify HTML elements document.getElementById("title").innerHTML = "Hello"; 🔹 Fetch API – Used to get data from servers (APIs) fetch("https://lnkd.in/gaKDnp4J") .then(res => res.json()) .then(data => console.log(data)); 🔹 Local Storage API – Stores data in the browser localStorage.setItem("name", "Surya"); 🔹 Geolocation API – Gets user location navigator.geolocation.getCurrentPosition(pos => { console.log(pos.coords.latitude); }); 🔹 Timer API – Used for delays and repeated tasks setTimeout(() => console.log("Hello"), 2000); 📌 2️⃣ JavaScript Modules Modules help organize code into separate files and reuse functionality. 🔹 Named Exports // file: math.js export function add(a, b){ return a + b; } // file: main.js import { add } from './math.js'; console.log(add(2,3)); 🔹 Default Export // file: greet.js export default function greet(){ console.log("Hello"); } import greet from './greet.js'; greet(); 🔹 CommonJS (Node.js style) // export module.exports = add; // import const add = require('./math'); 📌 What I learned today • How Web APIs connect JavaScript with browser features • Practical use of DOM, Fetch, Storage, Geolocation, and Timer APIs • How Modules help organize and reuse code • Difference between Named, Default, and CommonJS modules These concepts are helping me understand how modern web applications handle data, structure code, and interact with users effectively. #Day14 #JavaScript #WebAPI #Modules #FrontendDevelopment #DailyLearning #SuryaPavanCodes #Learning #Growing #Basics #Suryajobfindingbegins #Technology #Fresher

How to build a before/after image reveal effect… (Without using JavaScript): 🚀 Ever seen those sliders where you compare two images by dragging? That’s called an image comparison effect, and it’s widely used in: → Photo editing tools → Landing pages → Case studies But here’s the catch: We used to rely heavily on JavaScript for this. --- 💥 What we used before (JavaScript approach): → Track mouse position (`mousemove`) → Calculate width dynamically → Update styles on every frame → Handle drag logic manually Something like this: ```id="jsold1" const container = document.querySelector(".compare"); const afterImage = document.querySelector(".after"); container.addEventListener("mousemove", (e) => {  const rect = container.getBoundingClientRect();  const x = e.clientX - rect.left;  const percent = (x / rect.width) * 100;  afterImage.style.clipPath = `inset(0 ${100 - percent}% 0 0)`; }); ``` 👉 Works… but feels heavy for such a simple UI. --- Now here’s the fun part: We don’t need JavaScript anymore. --- Here’s how to build it using pure CSS: 1️⃣ Stack both images inside a container: The trick is to place one image over the other. ```id="htmlstep1" <div class="compare">  <img src="before.jpg" />  <img src="after.jpg" class="after" /> </div> ``` --- 2️⃣ Make the container relative: This allows the top image to position correctly. ```id="cssstep2" .compare {  position: relative;  width: 400px;  overflow: hidden; } ``` --- 3️⃣ Position the top image: Place it exactly over the first one. ```id="cssstep3" .after {  position: absolute;  top: 0;  left: 0; } ``` --- 4️⃣ Hide it using clip-path: This is where the magic happens. ```id="cssstep4" .after {  clip-path: inset(0 100% 0 0);  transition: clip-path 0.6s ease; } ``` 👉 This makes the image invisible from the right side. --- 5️⃣ Reveal it on hover: ```id="cssstep5" .compare:hover .after {  clip-path: inset(0 0 0 0); } ``` 👉 Now the image smoothly reveals on hover. --- And if you want to go one step ahead, try this: ✨ Show both images at once: ```id="cssstep6" .compare:hover .after {  clip-path: inset(0 50% 0 0); } ``` ✨ Add a diagonal reveal: ```id="cssstep7" .after {  clip-path: polygon(0 0, 0 0, 0 100%, 0 100%); } .compare:hover .after {  clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%); } ``` --- Anyways: CSS is no longer just styling. It’s handling: → Interactions → Animations → UI behavior 👉 Things we used to depend on JavaScript for. And honestly… Sometimes CSS is all you need. #CSS #WebDevelopment #Frontend #UI #UX

In a Javascript L1 & L2 round the following questions can be asked from interviewer. 1. What is the difference between 'Pass by Value' and 'Pass by Reference'? 2. What is the difference between map and filter ? 3. What is the difference between map() and forEach() 4. What is the difference between Pure and Impure functions? 5. What is the difference between for-in and for-of ? 6. What are the differences between call(), apply() and bind() ? 7. List out some key features of ES6 ? 8. What’s the spread operator in javascript ? 9. What is rest operator in javascript ? 10. What are DRY, KISS, YAGNI, SOLID Principles ? 11. What is temporal dead zone ? 12. Different ways to create object in javascript ? 13. Whats the difference between Object.keys,values and entries 14. Whats the difference between Object.freeze() vs Object.seal() 15. What is a polyfill in javascript ? 16. What is generator function in javascript ? 17. What is prototype in javascript ? 18. What is IIFE ? 19. What is CORS ? 20. What are the different datatypes in javascript ? 21. What are the difference between typescript and javascript ? 22. What is authentication vs authorization ? 23. Difference between null and undefined ? 24. What is the output of 3+2+”7” ? 25. Slice vs Splice in javascript ? 26. What is destructuring ? 27. What is setTimeOut in javascript ? 28. What is setInterval in javascript ? 29. What are Promises in javascript ? 30. What is a callstack in javascript ? 31. What is a closure ? 32. What are callbacks in javascript ? 33. What are Higher Order Functions in javascript ? 34. What is the difference between == and === in javascript ? 35. Is javascript a dynamically typed language or a statically typed language 36. What is the difference between Indexeddb and sessionstorage ? 37. What are Interceptors ? 38. What is Hoisting ? 39. What are the differences let, var and const ? 41. Differences between Promise.all, allSettled, any, race ? 42. What are limitations of arrow functions? 43. What is difference between find vs findIndex ? 44. What is tree shaking in javascrip 45. What is the main difference between Local Storage and Session storage 46. What is eval() 47. What is the difference between Shallow copy and deep copy 48. What are the difference between undeclared and undefined variables 49. What is event bubbling 50. What is event capturing 51. What are cookies 52. typeOf operator 53. What is this in javascript and How it behaves in various scenarios 54. How do you optimize the performance of application 55. What is meant by debouncing and throttling 𝐠𝐞𝐭 𝐞𝐛𝐨𝐨𝐤 𝐰𝐢𝐭𝐡 (detailed 232 ques = 90+ frequently asked Javascript interview questions and answers, 90+ Reactjs Frequent Ques & Answers, 50+ Output based ques & ans, 23+ Coding Questions & ans, 2 Machine coding ques & ans) 𝐄𝐛𝐨𝐨𝐤 𝐋𝐢𝐧𝐤: https://lnkd.in/gJMmH-PF Follow on Instagram : https://lnkd.in/gXTrcaKP #javascriptdeveloper #reactjs #reactnative #vuejsdeveloper #angular #angulardeveloper

JavaScript is single-threaded. Yet it handles timers, API calls, and user clicks all at once without freezing. That confused me for a long time. Here's how it actually works. JavaScript runs on a single thread — meaning it can only do one thing at a time. One call stack, one execution. So the obvious question is: how does it handle setTimeout, fetch requests, and DOM events simultaneously without blocking everything? The answer is the runtime — and it's bigger than just JavaScript itself. When your code runs in the browser, it's not running alone. The browser gives JavaScript access to Web APIs — things like setTimeout, fetch, and event listeners. These don't run in JavaScript's call stack. The browser handles them separately in the background. JavaScript just says "hey, do this for me" and moves on. Here's where the event loop comes in. While the browser is handling that background work, JavaScript keeps executing whatever is next in the call stack. When the background task finishes — a timer expires, a fetch returns, a user clicks something — the result doesn't jump straight back into the call stack. It goes into a queue and waits. The event loop has one job: watch the call stack, and the moment it's empty, take the first item from the queue and push it in. That's the entire mechanism. Loop, check, push. Over and over. There are actually two queues worth knowing. The microtask queue — where Promises live — has higher priority. It gets fully emptied before the event loop touches the macrotask queue, where setTimeout and setInterval callbacks wait. That's why a resolved Promise always runs before a setTimeout with zero delay, even though they both feel "instant." So when you write async JavaScript, you're not really running things in parallel. You're scheduling work, trusting the runtime to hold it, and letting the event loop bring it back at the right moment. JavaScript doesn't multitask. It just knows exactly when to pause, delegate, and come back.

#js #8 **Why JavaScript Is Single Threaded Synchronous Language** 🧠 Statement: 👉 “JavaScript is single-threaded and synchronous” We’ll break this into parts so it’s easy to understand. 🧵 1. What is Single-Threaded? 👉 JavaScript has only ONE main thread That means: One call stack One task at a time Example: console.log("A"); console.log("B"); console.log("C"); 👉 Output: A B C ✔ It runs one by one, not in parallel. ⚙️ Why JavaScript is single-threaded? Originally designed for browsers. Browsers (like Google Chrome) need to: Update UI Handle clicks 👉 If multiple threads changed UI at same time: UI would break Data would be inconsistent ✔ So JavaScript uses one thread → safe & predictable ⏱️ 2. What is Synchronous? 👉 Synchronous means: Code runs line by line, and each line waits for previous one to finish Example: console.log("Start"); function slowTask() { for (let i = 0; i < 1; i++) {} } slowTask(); console.log("End"); 👉 Output: Start End (after delay) ✔ End waits until slowTask finishes 🔴 Problem with synchronous nature If something takes time: Everything stops ⛔ UI freezes 👉 Bad user experience 🔄 3. Then how does JavaScript handle async? Here’s the important twist 👇 👉 JavaScript is: ✔ Single-threaded ✔ Synchronous (by default) ❗ BUT supports async using system outside JS 🌐 Behind the scenes JavaScript uses: Browser APIs Event system → Event Loop 📦 Example console.log("Start"); setTimeout(() => { console.log("Async"); }, 2000); console.log("End"); 🔄 Execution flow Start → runs setTimeout → sent to browser End → runs immediately After 2 sec → callback comes back Event loop executes it Output: Start End Async 👉 So JS looks async, but actually: It delegates work Still runs one task at a time 🧑🍳 Simple analogy You (JS) 👨🍳: Cook one dish at a time (single-threaded) Follow order (synchronous) Ask assistant to do waiting tasks (async) 👉 JavaScript is: ✔ Single-threaded One task at a time ✔ Synchronous (by default) Executes line by line ✔ Non-blocking (with help) Uses event loop + browser APIs 👉 JavaScript is single-threaded and synchronous, but uses the event loop to handle asynchronous operations without blocking execution. #Javascript #ObjectOrientedProgramming #SoftwareDevelopment

🚀 Understanding JSX in React — Syntax & Rules Simplified! If you're working with React, JSX is everywhere. But JSX is not HTML—it’s JavaScript with a syntax extension. 💡 What is JSX? JSX (JavaScript XML) lets you write UI like this: const element = <h1>Hello, World!</h1>; 👉 Behind the scenes, React converts this into: React.createElement("h1", null, "Hello, World!"); ⚙️ How JSX works 👉 JSX is compiled into JavaScript 👉 It describes what the UI should look like 👉 React uses it to create Virtual DOM 🧠 Key Rules of JSX (Very Important!) 🔹 1. Return a single parent element // ❌ Wrong return ( <h1>Hello</h1> <p>World</p> ); // ✅ Correct return ( <> <h1>Hello</h1> <p>World</p> </> ); 🔹 2. Use className instead of class <div className="container"></div> 🔹 3. JavaScript inside {} const name = "React"; <h1>Hello {name}</h1> 🔹 4. Self-closing tags <img src="image.png" /> 🔹 5. Inline styles as objects <div style={{ color: "red" }}></div> 🧩 Real-world use cases ✔ Building UI components ✔ Rendering dynamic data ✔ Conditional UI rendering ✔ Mapping lists 🔥 Best Practices (Most developers miss this!) ✅ Keep JSX clean and readable ✅ Extract complex logic outside JSX ✅ Use fragments instead of unnecessary divs ❌ Avoid writing heavy logic inside JSX ⚠️ Common Mistake // ❌ Too much logic inside JSX return <h1>{user.isLoggedIn ? "Welcome" : "Login"}</h1>; 👉 Fine for small cases, but extract logic for complex UI 💬 Pro Insight JSX is not about writing HTML in JS— 👉 It’s about describing UI in a declarative way 📌 Save this post & follow for more deep frontend insights! 📅 Day 6/100 #ReactJS #FrontendDevelopment #JavaScript #JSX #WebDevelopment #SoftwareEngineering #100DaysOfCode 🚀