Pure Functions in JavaScript: Consistent Results without Side Effects

Day 2: Understanding JSX One of the first concepts you’ll encounter in React is JSX. 📌 What is JSX? JSX (JavaScript XML) is a syntax extension for JavaScript that allows us to write HTML-like code inside JavaScript. It makes React code more readable and easier to write UI components. 📌 Example without JSX const element = React.createElement( 'h1', null, 'Hello React' ); 📌 Example with JSX const element = <h1>Hello React</h1>; As you can see, JSX is much cleaner and easier to understand. 📌 Key Points about JSX ✅ Looks like HTML but it is actually JavaScript ✅ JSX must return one parent element ✅ You can use JavaScript expressions inside {} ✅ JSX gets converted into React.createElement() behind the scenes 📌 Example using JavaScript inside JSX const name = "React"; function App() { return <h1>Hello {name}</h1>; } Here {name} is a JavaScript expression inside JSX. #ReactJS #JSX #FrontendDevelopment #JavaScript #WebDevelopment #LearnInPublic

🧠 JavaScript is a "Brain" with no "Body." Most developers think console.log, setTimeout, and fetch are part of JavaScript. They aren't. 🤯 Standard JS (ECMAScript) is just a logic engine. It handles variables and loops, but it has no "voice"—it can’t talk to a screen or a network alone. To do anything real, it needs a Host Environment: 🌐 Browsers provide the "limbs" (DOM, Web APIs). ⚙️ Node.js provides the "muscles" (File System, HTTP). I just broke down the "Great JavaScript Identity Crisis" on my blog. Understanding this is the secret to mastering the Event Loop and async performance. Read the full breakdown here: 👇 https://lnkd.in/dSwe-qUb Thanks to Hitesh Choudhary Sir, Piyush Garg, Jay Kadlag #JavaScript #NodeJS #Backend #SoftwareArchitecture #Browser #webapi

Do we really need #JSX in React? When I started learning React Js, I thought that we need to write JSX syntax inside react, otherwise it will not work. What is JSX? - It stands for JavaScript XML, which lets you write HTML-like code inside JavaScript. Example: const element = <h1>Hello World</h1>; But browser doesn't understand JSX, then how it works? - Before reaching to the browser JSX is converted into Javscript using tools like Babel and browser executes Javascript code. Example: This (JSX) --> const element = <h1>Hello World</h1>; Becomes (Js) --> const element = React.createElement("h1", null, "Hello World"); Conclusion: At the end jsx is converted into javascript, so even if we write down javascript code instead of jsx it will work. Then why do we use JSX? Because JSX is: 1. Easier to read 2. Looks like HTML 3. Cleaner and less nested 4. Developer-friendly Without JSX, code becomes hard to manage as UI grows. Final Thought JSX is not a requirement; it’s a developer convenience :) I will be happy to know your views on it. #ReactJS #JavaScript #WebDevelopment #Frontend #LearningInPublic

💡 React Tip: Use Custom Hooks to Reuse Logic One pattern I use frequently in React projects is custom hooks. Instead of repeating API logic across components, I move it into a reusable hook. Example 👇 function useFetch(url) { const [data, setData] = useState(null); useEffect(() => { fetch(url) .then(res => res.json()) .then(setData); }, [url]); return data; } Usage: const users = useFetch("/api/users"); Benefits: • Cleaner components • Reusable logic • Easier testing Custom hooks are one of the most powerful patterns in React. What’s your favourite custom hook? #ReactJS #FrontendDevelopment #JavaScript

From Vanilla JS to React (A Guide to Folders, Components, and JSX 💻): Transitioning from Vanilla JS to React is more than just learning a new syntax; it’s about understanding a new way to organize a project. After diving into the ecosystem, I’ve broken down the essential "DNA" of a modern React app. Here is what’s happening behind the scenes: 📂 The Anatomy of Folders assets/: The storage room for your images, SVGs, and brand icons. components/: The "Lego blocks" of your UI. Breaking the interface into reusable pieces like SearchBar.jsx or WeatherCard.jsx makes the code scalable and clean. ⚙️ The Core Files index.html: The only HTML file you'll ever need. It’s the "blank canvas" where React paints the UI. main.jsx: The bridge. This file "hydrates" your HTML by injecting the React app into the DOM. JSX (JavaScript XML): The superpower that lets us write HTML-like structures directly inside our logic. 🛡️ Project Housekeeping package.json: The manifest. It tracks your Dependencies (libraries like Tailwind CSS or Axios) so anyone can recreate your project with a single npm install. node_modules/: The heaviest folder you'll never touch. It holds the actual code for all your libraries. .gitignore: The gatekeeper. It ensures we don't upload thousands of library files or sensitive API keys to GitHub. Building in React is about thinking in systems. Every folder and file has a purpose in creating a fast, modular user experience. 💻✨ #ReactJS #WebDevelopment #Frontend #SoftwareEngineering #CodingJourney #Javascript #Vite

🚀 How does Node.js actually run JavaScript? JavaScript was originally designed to run inside browsers. So how did it become powerful enough to run servers and handle thousands of concurrent connections? I recently created a video where I deep dive into the internal architecture of Node.js and explain what happens behind the scenes when we run: "node index.js" watch here : https://lnkd.in/gSAm7Nha In this video, I cover: 🔹 Why Node.js was created 🔹 Why JavaScript was chosen for a server runtime 🔹 The role of the V8 Engine in executing JS 🔹 How libuv enables asynchronous I/O 🔹 The Thread Pool and how Node handles heavy tasks 🔹 A clear explanation of the Event Loop 🔹 How Node.js executes your JavaScript code step by step Understanding these concepts really changes the way you think about writing backend code in Node.js. Big thanks to my mentors Hitesh Choudhary Piyush Garg and TAs ( Akash Kadlag Jay Kadlag Suraj Kumar Jha , Anirudh Jwala and Nikhil sir ) from the Web Dev Cohort for their continuous guidance and support while learning these concepts. If you are learning Node.js or backend development, this video will help you understand what’s happening under the hood. I’d love to hear your feedback and suggestions for improving the explanation. 🙌 #NodeJS #JavaScript #BackendDevelopment #WebDevelopment #SystemDesign #LearnInPublic

Most JavaScript developers use async features every day — setTimeout, fetch, Promises — but the behavior can still feel confusing until the Event Loop becomes clear. JavaScript runs on a single thread using a Call Stack. When asynchronous operations occur, they are handled by the runtime (browser or Node.js), and their callbacks are placed into a queue. The Event Loop continuously checks: 1️⃣ Is the Call Stack empty? 2️⃣ Is there a callback waiting in the queue? If the stack is empty, the next callback moves into the stack and executes. Example: setTimeout(() => console.log("A"), 0); console.log("B"); Output: B A Even with 0ms, the setTimeout callback runs after the current call stack clears. Understanding this small detail explains a lot of “unexpected” async behavior in JavaScript. Curious to hear from other developers here — What concept made the event loop finally “click” for you? #javascript #webdevelopment #nodejs #eventloop #asyncjavascript #reactjs #softwareengineering

𝗗𝗮𝘆 𝟭𝟵/𝟵𝟬 : 𝗘𝘅𝗽𝗹𝗼𝗿𝗶𝗻𝗴 𝘁𝗵𝗲 𝗞𝗲𝘆 𝗙𝗲𝗮𝘁𝘂𝗿𝗲𝘀 𝗼𝗳 𝗥𝗲𝗮𝗰𝘁 𝗝𝗦! React JS is an open-source JavaScript library that's become a go-to for building modern web applications.  Here are some of the key features that make React JS so popular among develops  𝟭. 𝗖𝗼𝗺𝗽𝗼𝗻𝗲𝗻𝘁-𝗕𝗮𝘀𝗲𝗱 𝗔𝗿𝗰𝗵𝗶𝘁𝗲𝗰𝘁𝘂𝗿𝗲 Build reusable and independent UI components, making code more modular and maintainable.  𝟮. 𝗩𝗶𝗿𝘁𝘂𝗮𝗹 𝗗𝗢𝗠 Improves performance by updating only the changed parts of the UI instead of reloading the entire page  𝟯. 𝗝𝗦𝗫 (𝗝𝗮𝘃𝗮𝗦𝗰𝗿𝗶𝗽𝘁 𝗫𝗠𝗟) Allows writing HTML-like syntax inside JavaScript, making UI development more intuitive.  𝟰. 𝗨𝗻𝗶𝗱𝗶𝗿𝗲𝗰𝘁𝗶𝗼𝗻𝗮𝗹 𝗗𝗮𝘁𝗮 𝗙𝗹𝗼𝘄  Ensures better control over data and makes applications easier to manage and debug.  𝟱. 𝗗𝗲𝗰𝗹𝗮𝗿𝗮𝘁𝗶𝘃𝗲 𝗨𝗹 Focus on “what to show” rather than “how to update”, making code predictable and easier to debug. React is widely used to build 𝗦𝗶𝗻𝗴𝗹𝗲 𝗣𝗮𝗴𝗲 𝗔𝗽𝗽𝗹𝗶𝗰𝗮𝘁𝗶𝗼𝗻𝘀 (𝗦𝗣𝗔) for faster and smoother user experiences. Check out the infographic below to learn more about these features in detail. #ReactJS #WebDevelopment #JavaScript #Frontend #Programming #90DaysOfCode

One thing that becomes clear when moving from Vanilla JavaScript to React is how much more intentional the file structure becomes. In Vanilla JavaScript, many small projects can be built with just: index.html style.css script.js However, React applications benefit from a more structured approach. While converting one of my Vanilla JavaScript projects into React using Vite, I found a pattern that keeps the codebase organized and scalable. A typical structure separates responsibilities into different areas: • Components – reusable UI elements such as buttons, navigation bars, dropdowns, and carousels. These are usually written with props or children to maximize reusability. • Sections / Pages – these represent the major sections or routes of the application, such as HeroSection or ContactPage. • Services – responsible for interacting with external systems like APIs. These files usually contain pure JavaScript logic and return data to the rest of the application. • Hooks – act as the bridge between services and components, managing application logic such as loading states, error handling, and successful data responses. One small detail that stood out while using Vite is how environment variables are accessed: "import.meta.env" This differs from Create React App, which uses "process.env". Structuring applications this way helps keep UI components focused on rendering, while data logic and side effects are handled elsewhere. It's a simple approach, but one that makes React projects significantly easier to maintain as they grow.

Day 19: Custom Hooks in React If you want to write clean, reusable, and professional React code, you must understand Custom Hooks. 📌 What is a Custom Hook? A Custom Hook is a JavaScript function that starts with use and allows you to reuse React logic (state + effects) across multiple components. 👉 Example: useFetch, useAuth, useLocalStorage 📌 Why Custom Hooks are useful? Without custom hooks, we often repeat the same logic again and again ❌ Custom hooks help us: ✅ Reuse logic ✅ Keep components clean ✅ Reduce duplicate code ✅ Improve maintainability 📌 Example: Custom Hook (useCounter) import { useState } from "react"; function useCounter(initialValue = 0) { const [count, setCount] = useState(initialValue); const increase = () => setCount(prev => prev + 1); const decrease = () => setCount(prev => prev - 1); const reset = () => setCount(initialValue); return { count, increase, decrease, reset }; } export default useCounter; 📌 Using the Custom Hook import useCounter from "./useCounter"; function CounterApp() { const { count, increase, decrease, reset } = useCounter(5); return ( <div> <h1>{count}</h1> <button onClick={increase}>+</button> <button onClick={decrease}>-</button> <button onClick={reset}>Reset</button> </div> ); } 📌 Key Point Custom Hooks do not return JSX. They return logic (state + functions). 📌 Real-world Use Cases 🔥 Authentication Hook (useAuth) 🔥 API Fetch Hook (useFetch) 🔥 Theme Hook (useTheme) 🔥 LocalStorage Hook (useLocalStorage) #ReactJS #CustomHooks #FrontendDevelopment #JavaScript #WebDevelopment #LearnInPublic #CodingJourney