Faizan Ali’s Post

Why React Uses State Instead of Plain JavaScript Variables When you’re starting out with React, one of the first concepts you encounter is state. At first glance, you might wonder: Why can’t I just use a regular JavaScript variable to store my data? After all, JavaScript variables can hold values, and you can update them anytime. So why does React introduce this extra concept called state? Let’s break it down in a simple, developer-friendly way. In vanilla JavaScript, if you store a value in a variable and change it, the browser won’t magically update the UI. For example: let count = 0; count = count + 1; console.log(count); // 1 The value changes in memory, but nothing in the UI changes unless you manually select DOM elements and update them yourself (e.g., using document.getElementById().innerText = count). React, however, is designed around the concept of declarative UI. You describe what the UI should look like based on data, and React takes care of updating the DOM when that data changes. That’s where state comes in. When you update a st https://lnkd.in/gzHR-j2q

Why React Uses State Instead of Plain JavaScript Variables When you’re starting out with React, one of the first concepts you encounter is state. At first glance, you might wonder: Why can’t I just use a regular JavaScript variable to store my data? After all, JavaScript variables can hold values, and you can update them anytime. So why does React introduce this extra concept called state? Let’s break it down in a simple, developer-friendly way. In vanilla JavaScript, if you store a value in a variable and change it, the browser won’t magically update the UI. For example: let count = 0; count = count + 1; console.log(count); // 1 The value changes in memory, but nothing in the UI changes unless you manually select DOM elements and update them yourself (e.g., using document.getElementById().innerText = count). React, however, is designed around the concept of declarative UI. You describe what the UI should look like based on data, and React takes care of updating the DOM when that data changes. That’s where state comes in. When you update a st https://lnkd.in/gzHR-j2q

The Language Behind the Web: How JavaScript Works! JavaScript is the language behind the web, powering almost everything you see and interact with online. But beyond the code we write, there’s a complex system at work, parsing, compiling, and executing every instruction with precision. In this blog, we’ll explore how JavaScript truly works under the hood: how the engine runs your code, manages execution, handles asynchronous tasks, and cleans up memory. Understanding these internals will help you write smarter, more efficient code and see JavaScript from a whole new perspective. At its core, JavaScript is a single-threaded, interpreted (or just-in-time compiled) language that powers interactivity on the web. Being single-threaded, JavaScript executes one task at a time in a single main thread. Yet, it can handle network requests, animations, and user interactions without freezing the page. This is possible because, while JavaScript itself is synchronous, it achieves asynchronous behavior through callbacks, promises, and the event loop. https://lnkd.in/g_qzf-ew

The Language Behind the Web: How JavaScript Works! JavaScript is the language behind the web, powering almost everything you see and interact with online. But beyond the code we write, there’s a complex system at work, parsing, compiling, and executing every instruction with precision. In this blog, we’ll explore how JavaScript truly works under the hood: how the engine runs your code, manages execution, handles asynchronous tasks, and cleans up memory. Understanding these internals will help you write smarter, more efficient code and see JavaScript from a whole new perspective. At its core, JavaScript is a single-threaded, interpreted (or just-in-time compiled) language that powers interactivity on the web. Being single-threaded, JavaScript executes one task at a time in a single main thread. Yet, it can handle network requests, animations, and user interactions without freezing the page. This is possible because, while JavaScript itself is synchronous, it achieves asynchronous behavior through callbacks, promises, and the event loop. https://lnkd.in/g_qzf-ew

🚀 Day 28 of My Backend Development Journey Today I explored EJS (Embedded JavaScript Templates) — a simple yet powerful templating engine used in Node.js to create dynamic web pages. 🧠 What I learned: EJS allows embedding JavaScript directly into HTML. It’s mostly used with Express.js for rendering server-side views. Tags like <%= %> and <% %> make it easy to display variables, run loops, and conditionals. Perfect for generating dynamic content like user profiles, dashboards, etc. 💡 Example: <h1>Welcome <%= user.name %></h1> This small snippet dynamically displays user data inside HTML — simple and clean! Every day I’m realizing how powerful backend technologies are when combined with templating engines like EJS. #BackendDevelopment #NodeJS #ExpressJS #EJS #WebDevelopment #100DaysOfCode #LearningJourney

Day 8 of #React30 💡 JSX - The Secret Sauce of React Components 🧩 Ever wondered why React uses something that looks like HTML inside JavaScript? ⭐That’s JSX - and it’s what makes React code powerful yet easy to read. JSX stands for JavaScript XML, and it lets you write HTML-like syntax directly in JS, which Babel then converts into standard JavaScript that browsers can understand. ⭐JSX looks like HTML inside JavaScript... But it’s actually neither HTML nor just JS. It’s a syntax extension that makes UI logic readable 🧠 The Real Flow: 💡 JSX → React.createElement → React Element → HTML 🧠 Why React Uses JSX ✅ Easier to visualize UI structure ✅ Lets you write logic + layout together ✅ Helps React create Virtual DOM elements efficiently ✅ Cleaner and more readable than React.createElement() calls 💻 Example: function Greet() {  return <h1>Hello React! ⚛️</h1>; } 🧠 Transpiled version: React.createElement("h1", null, "Hello React! ⚛️"); That’s how React builds the Virtual DOM nodes faster JSX is just syntactic sugar for JavaScript! 💡 Key Takeaway: JSX bridges the gap between design and logic you write code that looks like UI, but runs like JavaScript ⚡ 🎯 Mini Challenge: Can you add a <p> tag in the above code that shows the current date dynamically? #ReactJS #React30 #FrontendDevelopment #WebDev #JavaScript #JSX #ReactComponents

💡 Do you know the shortest program in JavaScript? Yes — it’s an empty file! Even if there’s literally nothing in your JS file, the JavaScript engine still does important work behind the scenes. Here’s why: 1️⃣ Global Execution Context is Created JS first sets up a Global Execution Context (GEC). This is the space where global variables live, functions are defined, and the global object is connected. 2️⃣ Global Object is Initialized Browser: window → contains console, document, alert, setTimeout… Node.js: global → contains process, Buffer, require, setTimeout… This object is the foundation for all code, even if the file is empty. 3️⃣ this Refers to the Global Object Inside the global context: Browser → this === window Node → this === global Example: console.log(this); // window (browser) or [Object: global] (Node) 4️⃣ No Code = No Execution, But Environment Exists The engine checks for statements to run. If the file is empty, nothing executes — but all the setup has already happened. ✅ Takeaway: The program is syntactically valid (no errors) It’s functionally empty (nothing runs) Global environment is initialized (GEC, global object, this)

🌟 Day 10: Introduction to Asynchronous JavaScript 🚀 “JavaScript doesn’t wait… it multitasks!” 🔹 Synchronous vs Asynchronous JavaScript 🧩 Synchronous JS → Executes line by line, one task at a time. 🌀 Asynchronous JS → Can perform multiple tasks without waiting for one to finish. --- ⚡ Example: console.log("1️⃣ Start"); setTimeout(() => { console.log("2️⃣ Async Task (after 2s)"); }, 2000); console.log("3️⃣ End"); 🧠 Output: 1️⃣ Start 3️⃣ End 2️⃣ Async Task (after 2s) 👉 Even though the timeout is written second, it executes later because it’s asynchronous. --- 💡 Why it matters? Asynchronous JavaScript makes web apps fast, responsive, and user-friendly — essential for tasks like: Fetching data from APIs Handling user events Running background operations