Learn JavaScript Basics Before Frameworks

🚀 Why Do We Need Hooks in React? In traditional JavaScript, imagine we create a button that updates a number displayed in multiple places on the UI. Every time the button is clicked, we would have to: Select each element separately Get its reference Manually update the textContent for every element If that number appears in 4–5 places, we would need to update all of them individually. This process quickly becomes messy and inefficient. This is where React Hooks changed everything. With the useState Hook, we can manage a single piece of state and React automatically updates every place in the UI where that state is used. Instead of manually manipulating the DOM multiple times, we just update the state once — and React takes care of the rest. This simple idea is what made React extremely powerful and scalable. Even organizations like Khan Academy realized how efficient UI management becomes with React. ✨ One Hook. One State. Multiple UI Updates. That’s the power of React Hooks. #ReactJS #ReactHooks #FrontendDevelopment #JavaScript #WebDevelopment #LearningInPublic #SoftwareEngineering #ReactDeveloper #CodingJourney

💡 Before React. Before Node. Before fancy frameworks. There is HTML, CSS, and JavaScript. And honestly? Most bugs I’ve seen in projects come from weak fundamentals — not advanced concepts. Here’s what strong basics actually mean: 🔹 HTML Understanding semantic tags, accessibility, proper structure. 🔹 CSS Knowing flexbox, positioning, box model, responsiveness — not just copying styles. 🔹 JavaScript Understanding closures, async/await, event loop, array methods — not just syntax. Frameworks change. Fundamentals don’t. The stronger your basics, the easier React, Node, or any tech becomes. Every time I improve my JS fundamentals, my React code improves automatically. #WebDevelopment #JavaScript #FrontendDeveloper #ReactJS #FullStackDeveloper #SheryiansCodingSchool

🚀 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

Unpopular Opinion: Junior Developers Should NOT Start With React This might sound controversial, but I see it often. Many beginners jump directly into frameworks like React or Next.js without understanding the problems those tools solve. Before React, you should understand: • How the DOM works • Event handling in JavaScript • State and data flow in vanilla JavaScript • Basic rendering logic Before using a framework, ask: Why was this framework created in the first place? React exists to solve problems like: Complex UI state management Efficient DOM updates (Virtual DOM & reconciliation) Component-based architecture Similarly, understanding concepts like Server-Side Rendering (SSR) makes frameworks like Next.js much easier to appreciate. The Same Applies to Styling Before using utility frameworks like Tailwind CSS, you should understand: Flexbox Grid Positioning The CSS box model Otherwise you end up copying classes without understanding layout behavior. The Real Point Frameworks are powerful. But they make far more sense when you understand the problems they were designed to solve. Strong fundamentals make learning any framework faster. Weak fundamentals make every framework confusing. Do you think beginners should start with fundamentals first, or jump straight into frameworks? #FrontendDeveloper #ReactJS #WebDevelopment #JavaScript #SoftwareEngineering #Developers #TechCareers

JavaScript is one of the most widely used languages in web development, but many developers focus more on frameworks than on understanding its core concepts. Here are 3 JavaScript concepts every developer should truly understand: 1️⃣ Call Stack The call stack is how JavaScript keeps track of function execution. Understanding it helps you debug issues and know exactly how your code runs step by step. 2️⃣ Promises Promises make handling asynchronous operations much cleaner compared to traditional callbacks. They allow developers to manage tasks like API requests or database calls in a structured way. 3️⃣ Async / Await Async/await builds on promises and makes asynchronous code look and behave more like synchronous code, improving readability and maintainability. When developers understand these fundamentals, working with frameworks like React, Angular, or Node.js becomes much easier. Strong fundamentals always lead to better code. What JavaScript concept took you the longest to fully understand? #JavaScript #WebDevelopment #FrontendDevelopment #Coding #MERNStack

⚡ When JavaScript Wasn’t Enough At the beginning of my web development journey, building with HTML, CSS, and JavaScript felt exciting and powerful. But as projects grew, managing code, UI updates, and reusable components became more complex. That’s when I started exploring frameworks like React and Angular. In my latest Medium article, I share how learning frameworks changed the way I think about development from simply writing code to designing scalable and organized applications. 👉 Read the full article here: https://lnkd.in/gm78b3Hm Would love to hear your thoughts and experiences with React or Angular! 💬 #WebDevelopment #JavaScript #ReactJS #Angular #FrontendDevelopment #SoftwareDevelopment #CodingJourney #TechLearning #LearningInPublic #WomenInTech

Why do beginners struggle with React - even when they already know JavaScript? Because React doesn’t just teach UI; It teaches a runtime mental model. Before they can confidently build dynamic interfaces, A beginner must understand: - JSX rules - useState - useEffect - Dependency arrays - Re-render behavior - Component lifecycle That’s a lot of abstraction layered on top of JavaScript. Now compare that to a compile-first framework. - You write HTML. - You write CSS. - You write JavaScript. Reactivity feels like native language behavior. For example: In React, binding input state requires: - State initialization - Setter function - Event handler In Svelte: - bind:value={name} That’s it. - Fewer moving parts. - Fewer conceptual jumps. This directly affects onboarding. Teams frequently observe: - 30–40% faster beginner ramp-up - Less confusion around lifecycle timing - Reduced “why is this not updating?” debugging React is powerful; But power often introduces abstraction cost. For experienced engineers, that cost is manageable. For beginners, it can be overwhelming. The real question is: - Should a framework feel like a new language… - or like an extension of the web? Tomorrow, we’ll talk about something even more practical — how abstraction affects long-term maintainability. Stay Tuned #Svelte #FrontendDevelopment #ReactJS #JavaScript #WebPerformance #DeveloperExperience #UIArchitecture #CompiledSpeed #SvelteWithSriman

🚀 JavaScript vs TypeScript — Which One Truly Wins? In modern web development, this debate comes up again and again: JavaScript or TypeScript? 🔹 JavaScript is flexible, fast to start with, and powers the entire web ecosystem. It allows rapid development and is beginner-friendly. But as applications grow, managing large codebases can become complex. 🔹 TypeScript, on the other hand, introduces static typing and better tooling support. It helps catch errors during development rather than at runtime, making large-scale applications more maintainable and scalable. So is TypeScript better? Not necessarily. TypeScript is powerful — but it’s built on JavaScript. Without strong JavaScript fundamentals, TypeScript can feel like an added layer rather than an upgrade. From my perspective, mastering core JavaScript concepts first (closures, async behavior, scope, prototypes, etc.) builds the real foundation. TypeScript then becomes a productivity multiplier — not a dependency. 💡 In real-world production environments, especially in React and Node.js applications, TypeScript often improves collaboration, readability, and long-term maintainability. But the real winner? 👉 The developer who understands the fundamentals deeply and chooses the right tool for the project. I’m curious — Do you prefer JavaScript for flexibility or TypeScript for scalability? Let’s discuss in the comments. #JavaScript #TypeScript #WebDevelopment #MERNStack #SoftwareDevelopment

⚛️ **Getting Started with React.js** Before learning advanced concepts like routing, I started my journey with **React.js**, a powerful JavaScript library used for building modern and interactive user interfaces. React uses a **component-based architecture**, which allows developers to divide the UI into small, reusable components. This makes applications easier to develop, manage, and scale. During my learning, I explored: • Creating and organizing React components • Understanding **JSX** for writing HTML inside JavaScript • Using **useState** for managing component state • Using **useEffect** for handling side effects like API calls • Building simple and dynamic user interfaces Learning these fundamental concepts helped me understand how React applications work and prepared me to move forward to topics like **React Router and API integration**. #ReactJS #FrontendDevelopment #JavaScript #WebDevelopment #LearningJourney

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