Aditi Kesharwani’s Post

🚀 JavaScript is 10x easier when you understand these concepts! When I started learning JS, everything felt confusing — callbacks, closures, promises… 😵💫 But once I understood these keywords, everything started to click! 💡 Here’s a list that every JavaScript developer should master 👇 💡 JavaScript Concepts You Can’t Ignore 🧠 Core Concepts 🔹 Closure — A function that remembers variables from its outer scope. 🔹 Hoisting — JS moves declarations to the top of the file. 🔹 Event Loop — Handles async tasks behind the scenes (like setTimeout). 🔹 Callback — A function passed into another function to be called later. 🔹 Promise — A value that will be available later (async placeholder). 🔹 Async/Await — Cleaner way to write async code instead of chaining .then(). 🔹 Currying — Break a function into smaller, chained functions. 🔹 IIFE — Function that runs immediately after it’s defined. 🔹 Prototype — JS’s way of sharing features across objects (object inheritance). 🔹 This — Refers to the object currently calling the function. ⚙️ Performance & Timing 🔹 Debounce — Delay a function until the user stops typing or clicking. 🔹 Throttle — Limit how often a function can run in a time frame. 🔹 Lexical Scope — Inner functions have access to outer function variables. 🔹 Garbage Collection — JS automatically frees up unused memory. 🔹 Shadowing — A variable in a smaller scope overwrites one in a larger scope. 🔹 Callback Hell — Nesting many callbacks leads to messy code. 🔹 Promise Chaining — Using .then() repeatedly to handle multiple async steps. 🔹 Microtask Queue — Where promises get queued (after main code, before rendering). 🔹 Execution Context — The environment in which JS runs each piece of code. 🔹 Call Stack — A stack where function calls are managed. 🔹 Temporal Dead Zone — Time between variable declaration and initialization with let/const. 🧩 Type & Value Behavior 🔹 Type Coercion — JS automatically converts types (e.g., "5" + 1 → "51"). 🔹 Falsy Values — Values treated as false (0, "", null, undefined, NaN, false). 🔹 Truthy Values — Values treated as true ("a", [], {}, 1, true). 🔹 Short-Circuiting — JS skips the rest if the result is already known (true || anything). 🔹 Optional Chaining (?.) — Safely accesses deep properties without errors. 🔹 Nullish Coalescing (??) — Gives the first non-null/undefined value. 🧱 Data & Memory 🔹 Set — Stores unique values. 🔹 Map — Stores key–value pairs. 🔹 Memory Leak — When unused data stays in memory and slows the app. 🔹 Event Delegation — One event listener handles many elements efficiently. 🔹 Immutability — Avoid changing existing values; return new ones instead. #JavaScript #WebDevelopment #Frontend #FullStack #CodingJourney #100DaysOfCode #LearnWithMe #WebDev #React #Programming

💛 #JSMadeEasy with Virashree 🧠 Understanding Execution Context & Call Stack in JavaScript When I started learning JavaScript, I used to wonder — 💭 “How does JS actually run my code line by line?” The answer lies in two magical words: ✨ Execution Context and 🧱 Call Stack Let’s make them super simple 👇 ⚙️ What is an Execution Context? Think of it as a container where your JS code runs. It decides: 🧩 Which variables and functions exist 📍 Where they live (scope) 🚀 How and in what order your code executes 🌍 1. Global Execution Context (GEC) This is created by default when your JS file starts running. It does 3 main things: 1️⃣ Creates a global object (window in browsers) 2️⃣ Sets up the this keyword 3️⃣ Allocates memory for variables & functions (this is where hoisting happens!) var name = "Virashree"; function greet() {  console.log("Hello " + name); } greet(); ✅ First, JS creates memory for name and greet. ✅ Then, it executes line by line — calling greet(). 2. Function Execution Context (FEC) Every time you call a function, a new mini-world(Execution Context) is created just for that function! function greet() {  var message = "Hello from function!";  console.log(message); } greet(); JS creates: - A new memory space for that function - Its own scope & variables - When done, it removes it from memory 🧱 The Call Stack — The Manager of All! - Imagine a stack of plates 🍽️ - The last plate you place on top is the first one you remove. - That’s exactly how the Call Stack works (LIFO rule — Last In, First Out) function one() {  two(); } function two() {  console.log("Inside two"); } one(); 🧩 JS Flow: 1️⃣ Global context created 2️⃣ one() pushed to stack 3️⃣ Inside it, two() pushed 4️⃣ two() finishes → removed 5️⃣ one() finishes → removed 6️⃣ Stack empty ✅ 💡 In short: - Every JS file starts with a Global Execution Context - Each function call creates a new context - The Call Stack manages them all in order 💬 Question for you: Have you ever seen that “Call Stack” section in browser DevTools? It’s this exact thing happening behind the scenes! ⚡ #javascript #frontenddevelopment #reactjs #webdevelopment #learninginpublic #womenintech #JSMadeEasy

🚨The Power & Evolution of JavaScript — The Language of the Web 💠A Brief History of JavaScript: JavaScript was created in 1995 by Brendan Eich while working at Netscape. The goal was simple yet revolutionary — to make web pages interactive and dynamic. Initially developed in just 10 days, it was named LiveScript before being officially called JavaScript to ride the popularity of Java at that time. Over the years, JS evolved from a simple scripting tool to one of the most powerful programming languages in the world, powering nearly every website today. 💠Diversity of JavaScript: JavaScript isn’t just a “web language” anymore — it has grown into a full ecosystem. You can now: >Build frontend apps with frameworks like React, Vue, and Angular >Develop backend services using Node.js >Create mobile apps with React Native >Even work on AI, game development, and IoT projects Its flexibility makes JavaScript a true “write once, run anywhere” technology — used by millions of developers across industries. 💠Demand in the Industry: JavaScript consistently ranks as the #1 most used programming language in the world (according to Stack Overflow Developer Surveys). Companies from startups to giants like Google, Meta, and Netflix rely heavily on JS-based frameworks and tools. With web apps, SaaS platforms, and mobile development continuously expanding, the demand for skilled JS developers keeps increasing every year. 💠TypeScript — JavaScript Evolved: TypeScript, created by Microsoft, is a superset of JavaScript that adds static typing. It helps developers catch errors before running the code, making projects more scalable and maintainable. Most modern frameworks (like Angular and Next.js) now use TypeScript by default — showing how the JS ecosystem continues to evolve toward reliability and productivity. 💠ES6 — The Modern JavaScript: Released in 2015, ES6 (ECMAScript 6) marked a major leap forward in JavaScript’s capabilities. It introduced features that made the language cleaner, faster, and more 💠developer-friendly, such as: >let and const (block-scoped variables) >Arrow functions ()=>{} >Template literals `${}` >Classes and Modules >Promises and Async operations These features made JavaScript modern, elegant, and ready for enterprise-level applications. So Finally❕ JavaScript has come a long way — from a simple browser script to the backbone of the modern digital world. If you’re starting your coding journey, JavaScript is the perfect place to begin — it opens the door to endless opportunities in frontend, backend, and beyond. . . . . . . . . . #JavaScript #WebDevelopment #FrontendDevelopment #LearnToCode #ReactJS #TypeScript #CodingJourney #TechLearning

🧁 Bun — The Toolkit That Makes JavaScript Fun Again When I first tried Bun, I thought it was just another npm alternative. Fast forward a few months — I can’t imagine working without it. Bun isn’t just a package manager. It’s an entire JavaScript toolkit — built from scratch in Zig, designed to make Node.js and TypeScript development ridiculously fast and simple. It’s like someone finally said, “What if one tool just did it all — and did it fast?” Let me explain why I’m genuinely impressed 👇 ⚡ 1. It’s unbelievably fast bun install isn’t just quick — it’s instant. bThe best part? It works with your existing package.json. You don’t have to migrate or relearn — it just works. And it generates a compact binary lockfile (bun.lockb), which makes reads and installs even faster. For local development and CI, that alone feels like a performance upgrade for your brain. 🧩 2. It’s not just a package manager Bun quietly packs a bundler, transpiler, and TypeScript compiler inside. That means you can build or bundle your project without configuring Webpack, Rollup, or esbuild. It handles TypeScript, JSX, JSON, and even static assets — right out of the box. No endless config files, no plugin rabbit holes. 🧪 3. It ships with its own test runner No more juggling Jest or Vitest configs. You can just run your tests natively inside Bun. It’s lightweight, built-in, and it understands TypeScript without any setup. For side projects, prototypes, and libraries — this is a dream. 🧰 4. Bun comes with useful built-in APIs This is the part that makes Bun feel thoughtful. It has modern, simpler alternatives to Node’s clunkier APIs — like file handling, HTTP serving, hashing, and environment management. You can spin up a local server, read or write files, and handle requests with far fewer lines of code — and all of it feels cleaner. The focus here is developer experience. Everything feels designed with “what if this was actually enjoyable?” in mind. 💡 5. TypeScript support that just works Bun natively supports .ts and .tsx — no tsc, no build step, no waiting. You can write and run TypeScript as easily as plain JS. For anyone who loves TypeScript but hates setup fatigue — this is gold. ❤️ Final thought Tools like Bun remind me why I love frontend and JavaScript — they bring back the joy of building. It’s fast, it’s smart, and it just gets out of your way. If you haven’t tried it yet, give it a spin. Just don’t be surprised if you never type npm install again 😅 #bun #javascript #typescript #frontend #webdevelopment #performance #opensource #developerexperience #engineering #learning

Ever wondered how JavaScript handles async operations with a single thread? 🤔 Here’s how JavaScript manages tasks efficiently without getting blocked — even when thousands run at once! 🧠 𝗪𝗵𝘆 𝗗𝗼𝗲𝘀 𝗡𝗼𝗱𝗲 𝗡𝗲𝗲𝗱 𝗮𝗻 𝗘𝘃𝗲𝗻𝘁 𝗟𝗼𝗼𝗽? JavaScript runs one task at a time — but real apps need to: ✅ Handle APIs, DB calls, file reads, timers ✅ Stay responsive ✅ Manage thousands of concurrent requests Node solves this using V8 + libuv: • V8 → Executes JS • libuv → Event Loop + Thread Pool for async ops To understand this magic, here are the 5 core components of JS Concurrency 👇 1️⃣ 𝗖𝗮𝗹𝗹 𝗦𝘁𝗮𝗰𝗸 (𝗘𝘅𝗲𝗰𝘂𝘁𝗶𝗼𝗻 𝗦𝘁𝗮𝗰𝗸) Executes code line-by-line in LIFO order. • Each function call is pushed to the stack • When done → popped out • Too many calls → Stack Overflow 💡 𝘛𝘩𝘪𝘴 𝘪𝘴 𝘵𝘩𝘦 “𝘴𝘪𝘯𝘨𝘭𝘦 𝘵𝘩𝘳𝘦𝘢𝘥” 𝘦𝘷𝘦𝘳𝘺𝘰𝘯𝘦 𝘵𝘢𝘭𝘬𝘴 𝘢𝘣𝘰𝘶𝘵. 2️⃣ 𝗖𝗮𝗹𝗹𝗯𝗮𝗰𝗸 𝗤𝘂𝗲𝘂𝗲 (𝗧𝗮𝘀𝗸/𝗘𝘃𝗲𝗻𝘁 𝗤𝘂𝗲𝘂𝗲) Stores async tasks like setTimeout, setInterval, DOM events, and async callbacks. When the Call Stack is free, the Event Loop moves tasks from this queue to execute. 3️⃣ 𝗠𝗶𝗰𝗿𝗼𝘁𝗮𝘀𝗸 𝗤𝘂𝗲𝘂𝗲 (𝗝𝗼𝗯 𝗤𝘂𝗲𝘂𝗲) Higher-priority queue that runs before the Callback Queue. Contains: ✅ Promises (.then, .catch, .finally) ✅ queueMicrotask() ✅ MutationObserver 🧠 Rule: After each task, the Event Loop clears Microtasks first. This is why Promises run before setTimeout(). 4️⃣ 𝗘𝘃𝗲𝗻𝘁 𝗟𝗼𝗼𝗽 — 𝗧𝗵𝗲 𝗦𝗰𝗵𝗲𝗱𝘂𝗹𝗲𝗿 It constantly checks: Step | What it does 1 | Is Call Stack empty? 2 | If yes → run all Microtasks 3 | Then pick next Callback task 4 | Repeat ✨ 𝘌𝘯𝘴𝘶𝘳𝘦𝘴 𝘢𝘴𝘺𝘯𝘤 𝘵𝘢𝘴𝘬𝘴 𝘥𝘰𝘯’𝘵 𝘣𝘭𝘰𝘤𝘬 𝘵𝘩𝘦 𝘴𝘪𝘯𝘨𝘭𝘦 𝘵𝘩𝘳𝘦𝘢𝘥. 5️⃣ 𝗧𝗶𝗺𝗲𝗿𝘀: 𝘀𝗲𝘁𝗧𝗶𝗺𝗲𝗼𝘂𝘁() & 𝘀𝗲𝘁𝗜𝗻𝘁𝗲𝗿𝘃𝗮𝗹() Used to schedule code after a delay. ⏳ Note: setTimeout(fn, 0) does not mean immediate execution — it runs after current code + microtasks. Example: setTimeout(() => console.log("A"), 0); console.log("B"); Output: B A ⚖️ 𝗘𝘅𝗲𝗰𝘂𝘁𝗶𝗼𝗻 𝗣𝗿𝗶𝗼𝗿𝗶𝘁𝘆 𝗶𝗻 𝗡𝗼𝗱𝗲.𝗷𝘀 Order of execution: 1️⃣ Synchronous Code 2️⃣ process.nextTick() (Node only – highest) 3️⃣ Microtasks 4️⃣ Macrotasks / Callback Queue (Timers) 5️⃣ I/O Callbacks 6️⃣ setImmediate 7️⃣ Close Callbacks (e.g., socket.on("close")) 📍 𝘱𝘳𝘰𝘤𝘦𝘴𝘴.𝘯𝘦𝘹𝘵𝘛𝘪𝘤𝘬() 𝘩𝘢𝘴 𝘵𝘩𝘦 𝘩𝘪𝘨𝘩𝘦𝘴𝘵 𝘱𝘳𝘪𝘰𝘳𝘪𝘵𝘺 𝘢𝘯𝘥 𝘤𝘢𝘯 𝘴𝘵𝘢𝘳𝘷𝘦 𝘵𝘩𝘦 𝘌𝘷𝘦𝘯𝘵 𝘓𝘰𝘰𝘱 𝘪𝘧 𝘮𝘪𝘴𝘶𝘴𝘦𝘥. #NodeJS #JavaScript #SoftwareEngineering #WebDevelopment #EventLoop #AsynchronousProgramming #SystemDesign #TechCommunity #ProgrammingConcepts #Developers #WebArchitecture

🚀 Understanding Promises in JavaScript — From Callback Hell to Clean Code ✨ Ever had JavaScript code that just… didn’t behave the way you expected? 😩 Maybe your functions ran out of order, or you had to wait for something before the next step could execute. Welcome to the world of asynchronous JavaScript — and the superhero that saves the day: Promises! 🦸♀️ 💡 What’s a Promise? A Promise in JavaScript represents a value that will be available sometime in the future. It can be in one of three states: ⏳ Pending — still waiting ✅ Fulfilled — everything worked fine ❌ Rejected — something went wrong 🤯 Callback Hell (Before Promises) Before ES6, we had to rely on nested callbacks for tasks like: 1️⃣ Fetching an image 2️⃣ Compressing it 3️⃣ Applying filters 4️⃣ Saving it This led to messy, hard-to-read code like this: 👇 getImage(function (img) {  resizeImage(img, function (resized) {   applyFilter(resized, function (filtered) {    saveImage(filtered, function () {     console.log("All done!");    });   });  }); }); This is called Callback Hell 🔥 — difficult to maintain and debug. 🪄 Promises to the Rescue! ES6 introduced Promises, allowing us to write asynchronous code that looks much cleaner 👇 getImage()  .then(resizeImage)  .then(applyFilter)  .then(saveImage)  .then(() => console.log("All done!"))  .catch((error) => console.error("Error:", error)); No more pyramid of doom! Each step runs only after the previous one finishes — just like a chain of well-behaved events. ⚙️ How It Works A Promise is created using the Promise constructor: const promise = new Promise((resolve, reject) => {  const success = true;  if (success) {   resolve("Done!");  } else {   reject("Something went wrong!");  } }); resolve() → Success ✅ reject() → Failure ❌ And you handle them with: .then() → for success .catch() → for errors .finally() → always runs at the end Promises make your async code: 🧠 Easier to read 🧩 Easier to manage 🧹 Free from callback clutter Mastering Promises = mastering modern asynchronous JavaScript ⚡ #JavaScript #WebDevelopment #MobileDevelopment #ReactNative #Coding #ES6 #Promises #AsyncAwait #Frontend

🌟 Call Stack vs Heap in JavaScript 🌟 Hey coder! Ever wondered how JavaScript remembers stuff while your code is running? Let’s break down the magic behind it — Call Stack and Heap. 1. Why do Call Stack & Heap even exist? 🤔 - Imagine your computer’s memory is like your workspace. You need one super tidy spot for quick notes (that’s the Call Stack), and a big, flexible storage box for bulky things like files and objects (that’s the Heap). - They help JavaScript keep track of what’s happening right now (calls, functions running) and remember bigger stuff like your objects and arrays without mixing everything up! 2. What exactly are they? 📦 - Call Stack: Think of it as a stack of plates 🍽️, where you can only add or remove the top plate. It keeps track of all the functions you’re running right now — last called, first finished! - Heap: This is a big, messy drawer 🗃️ where your objects, arrays, and functions live as long as needed. It’s unordered but roomy for all those complex, long-lasting items. 3. How do they work in JavaScript? 🎯 - When you run a function, JavaScript puts it on the Call Stack along with any small bits of info (like numbers or strings). - If your function creates objects or arrays, those live in the Heap, and the stack keeps a little pointer or reference to where they are. - Once a function finishes, it’s popped off the stack — that’s like clearing your desk of finished tasks so you can focus on new ones. 4. What about Garbage Collection (GC) in JavaScript? 🧹 - JavaScript has a built-in “clean-up crew” called Garbage Collector. - It watches for objects in the Heap that your code no longer points to from the Call Stack. - When it finds “orphaned” stuff nobody needs anymore, it sweeps it away to free up memory automatically — so you don’t have to worry about messy memory leaks! Quick Recap:- 🏃 Call Stack: Fast, orderly, handles running functions and simple data. 🏗️ Heap: Big, flexible, stores objects, arrays, and funky creatures 🐉. 🧹 Garbage Collector: Memory janitor who keeps your heap clean and efficient. 👩💻👨💻 Important Note 👩💻👨💻 - JavaScript’s Garbage Collector cleans up unused memory automatically, but to keep your app fast and efficient, you must also manage memory carefully. Avoid common pitfalls like forgotten event listeners, unnecessary globals, or circular references that lead to memory leaks. - Understanding how to use the stack and heap wisely helps you write smoother code — GC helps, but good coding habits are your best defence! Happy coding! Don’t worry if this feels tricky now — the more you code, the clearer it gets! 🎉 #JavaScriptMemory #CallStackVsHeap #BeginnerFriendly #ReactNative #MemoryManagement #CodeSmart #LearnJavaScript #WebDevelopment #CodingTips

Today, I officially started learning JavaScript (JS) — the language that brings websites to life! 🌐✨ Here’s what I explored and learned today 👇 💡 🔹 What is JavaScript? JavaScript is a high-level, interpreted programming language that allows us to make web pages interactive, dynamic, and user-friendly. It works hand-in-hand with: 👉 HTML – for structure 👉 CSS – for design 👉 JS – for behavior 📜 🔹 A Brief History of JavaScript: 🗓️ 1995 – Created by Brendan Eich at Netscape (originally named Mocha) ➡️ Renamed to LiveScript, then JavaScript 📘 1997 – Standardized as ECMAScript (ES1) ⚡ 2009 – Major update with ES5 (introduced JSON, Array methods) 🌟 2015 – ES6 revolution (added let, const, arrow functions, classes) 🔥 Now – Modern JS powers both frontend and backend with Node.js ⚙️ 🔹 Why JavaScript? ✅ Only language that runs natively in all browsers ✅ Easy to learn, fast to execute ✅ Huge community and frameworks (React, Angular, Vue) ✅ Supports full-stack development (Node.js, Express, etc.) ✅ Ideal for web apps, games, mobile apps, and even AI/ML 🌍 🔹 Where We Use JS: 💻 Web Applications 📱 Mobile Apps (React Native) 🧠 AI/ML (TensorFlow.js) 🎮 Game Development ☁️ Backend Services (Node.js) 🔌 IoT Devices 🧠 🔹 JavaScript Engines: ⚡ Chrome → V8 🔥 Firefox → SpiderMonkey 🍏 Safari → JavaScriptCore (Nitro) 🪟 Edge → V8 🌍 Node.js → V8 🧾 🔹 How to Write JavaScript in HTML: There are 3 ways to include JS: 1️⃣ Inline → <button onclick="alert('Hello!')">Click Me</button> 2️⃣ Internal → Use <script> tag inside HTML 3️⃣ External → Link an external .js file using <script src="script.js"></script> 🎯 Key Takeaway (Day 1): “JavaScript is not just for making things move on a webpage — it’s the bridge between design and functionality.” 🌉💻 I’m excited to continue this journey and dive deeper into concepts like variables, data types, and functions next! 💪 #Day1 #JavaScript #LearningJourney #WebDevelopment #Frontend #FullStack #Coding #Developer #TechJourney #HTML #CSS #JS #NodeJS special thanks to : 10000 Coders Harish M

Exploring the Power of Promises in JavaScript While working on my current project, I was implementing an asynchronous part in the backend and got a bit confused while handling Promises. That’s when I decided to dive deep into how Promises actually work — and trust me, understanding them properly makes writing async code so much cleaner and faster! In JavaScript, we often use callbacks to pass one function into another for asynchronous operations. However, callbacks can introduce two major problems if not handled properly: 1. Callback Hell – This happens when callbacks are nested inside other callbacks, making the code difficult to read and maintain. 2. Inversion of Control (IoC) – This occurs when we give control of our function to another function. For example, imagine two developers working on the same codebase. One developer writes a callback, and the other tries to implement it — but they don’t really know when, where, or how many times that callback will be executed. This uncertainty is what we call Inversion of Control. To solve the issues caused by callbacks, Promises were introduced. A Promise is a special type of object that returns immediately and acts as a placeholder for a future result. But what does “returns immediately” mean? It means that when a Promise is created, it doesn’t block the execution of the rest of the code — it starts running synchronously, but the result it represents might arrive later (asynchronously). So, a Promise can handle both synchronous and asynchronous operations! There are two important aspects of Promises: 1. How to create a Promise 2. How to consume a Promise --- Creating a Promise You can create a Promise using the Promise constructor: new Promise((resolve, reject) => {}); Here, resolve and reject are callback functions used to fulfill or reject the Promise. A Promise has two key properties: 1.value → holds the result of the operation 2.state → represents the current status There are three possible states of a Promise: 1. Pending → initial state 2. Fulfilled → when resolved successfully 3. Rejected → when something goes wrong For example: return new Promise((res, rej) => { setTimeout(() => { res("Task completed!"); }, 1000); }); Here, when res() is called after 1 second, the Promise changes its state from pending to fulfilled, and its value becomes "Task completed!". --- Internal Mechanism Apart from value and state, a Promise also maintains two internal arrays: 1.onFulfillment[] 2.onRejection[] These store the function handlers that get executed later — and they are managed inside the microtask queue, allowing smoother asynchronous execution. We can also chain further actions using .then(). The .then() method registers function handlers into the microtask queue and returns a new Promise, enabling chaining. --- I’ll continue this in the next post, where we’ll explore how to consume Promises effectively using .then() Stay tuned! #JavaScript #Promises #CodeBetter

Day 85 of #100DaysOfCode Weekend Review: JavaScript Libraries, Frameworks & React Fundamentals This weekend, I revisited the foundations that power most of modern frontend development, JavaScript libraries, frameworks, and React basics. Here’s what I covered Libraries vs Frameworks Libraries are focused and flexible. You call their functions when you need them, e.g., jQuery for DOM manipulation or React for UI components. Frameworks provide structure and rules. They call your code, not the other way around, e.g., Angular or Next.js. Frameworks are ideal for building full applications, while libraries give you the freedom to structure things yourself. Single Page Applications (SPAs) SPAs load once and dynamically update the page as users interact — no full reloads. Built with frameworks like React or Angular, they’re fast and smooth but come with tradeoffs: Accessibility issues for screen readers Navigation and bookmarking challenges Slower initial load React Essentials React is a JavaScript library for building reusable UI components. It works by keeping a virtual DOM and re-rendering components only when state or props change. Components are the core of React, small, reusable functions that return UI: function Greeting() { const name = "Anna"; return <h1>Welcome, {name}!</h1>; } Importing & Exporting Components React projects are modular, each component can be exported and imported across files: // City.js export default function City() { return <p>New York</p>; } // App.js import City from './City'; Setting Up a React Project with Vite Vite makes React project setup fast: npm create vite@latest my-react-app -- --template react cd my-react-app npm install npm run dev Your app runs at http://localhost:5173, and you’re ready to code. Passing Props Props (short for properties) are how data flows from parent to child components. They make components dynamic and reusable: function Child({ name }) { return <h1>Hello, {name}!</h1>; } You can also use the spread operator to pass multiple props easily. Conditional Rendering React lets you conditionally render content using: Ternary operators → {isLoggedIn ? "Welcome" : "Please log in"} Logical AND (&&) → {user && <h1>Hi, { http:// user.name }</h1>} if statements for more complex logic Rendering Lists When you have an array of data, you can render lists dynamically using map(): <ul> { http:// names.map ((name, index) => ( <li key={index}>{name}</li> ))} </ul> Always include a unique key to help React optimize rendering. Inline Styles You can style JSX elements directly using JavaScript objects: <h1 style={{ color: "blue", fontSize: "20px" }}>Hello!</h1> or conditionally: const styles = { color: isImportant ? "red" : "black", };