React Fundamentals: Vite, JSX, Babel, and Components Explained

📅 Day 21/21 – React Hook Form & Validation (Final Day 🎯) ⚛️ On the final day of my challenge, I learned how to handle forms and validation efficiently using React Hook Form. 🔹 What is React Hook Form? It is a library that simplifies form handling in React with: ✔ Less code ✔ Better performance ✔ Built-in validation support 🔹 Why use it? Instead of managing multiple states manually: • It uses refs internally • Reduces unnecessary re-renders • Makes forms cleaner and scalable 🔹 Basic Example import { useForm } from "react-hook-form"; function App() { const { register, handleSubmit } = useForm(); const onSubmit = (data) => { console.log(data); }; return ( <form onSubmit={handleSubmit(onSubmit)}> <input {...register("name")} /> <button type="submit">Submit</button> </form> ); } 🔹 Validation Example <input {...register("email", { required: "Email is required" })} /> 💡 Final Takeaway from 21 Days Over the last 21 days, I learned: ✔ Core JavaScript concepts ✔ React fundamentals ✔ Real-world development thinking ✔ Consistency and discipline This journey helped me grow from learning concepts → building projects → understanding how things work internally. 🙏 Thanks to Devendra Dhote and Sheryians Coding School for the guidance throughout this journey. 🚀 This is not the end… just the beginning. #ReactJS #JavaScript #FrontendDeveloper #LearningInPublic #Consistency #WebDevelopment

Day 1 of learning React Today marks the beginning of my journey into React, and I’m excited to share what I’ve learned so far. I started by understanding how to set up React using external libraries and how Babel plays an important role. Since browsers don’t understand JSX directly, Babel compiles it into regular JavaScript that the browser can execute. One thing I’ve realized already is that React makes building user interfaces more structured and scalable. Instead of writing plain JavaScript, we use JSX a syntax that looks like HTML but works inside JavaScript. Here are a few core concepts I explored today: • Components Components are like reusable building blocks for your UI. Instead of writing one large file, you break your interface into smaller, manageable pieces. Example: function Welcome() { return Hello, World!; } • Fragments Sometimes you want to return multiple elements without adding unnecessary divs to your HTML. That’s where fragments come in. Example: <> • Props Props (short for properties) allow you to pass data from one component to another, making your components dynamic. Example: function Welcome(props) { return Hello, {props.name}; } • Conditional Rendering (Guard Operator) In React, we can use the “&&” operator directly inside JSX to render something based on a condition. Example: {isLoggedIn && Welcome back!} This will only display the message if isLoggedIn is true. It hasn’t been easy stepping into something new, but I’m committed to learning and improving every day. #React #JavaScript #FrontendDevelopment #WebDevelopment #LearningInPublic #CodingJourney #100DaysOfCode #BuildInPublic

✨ Just wrapped a class on React — and my perspective on frontend dev has completely shifted. Before class, I thought React was just "fancy JavaScript." After class? I realize it's a whole new way of thinking about UIs. 🧠 Here's what clicked for me: 🔹 Components are like LEGO blocks Everything in React is a reusable piece — buttons, navbars, cards. You build once, use everywhere. No more copy-pasting the same HTML 10 times. 🔹 The Virtual DOM is React's superpower Instead of updating the entire page on every change, React creates a virtual copy of the DOM, compares it, and only updates what changed. Blazing fast. Incredibly smart. 🔹 State = the memory of your UI useState taught me that UI is just a function of data. Change the data → UI updates automatically. No manual DOM manipulation. No document.getElementById headaches. 🙌 🔹 Props make components talk to each other Data flows down through props, and events bubble up through callbacks. Once you get this parent-child relationship, React just makes sense. 🔹 JSX is not scary — it's beautiful HTML inside JavaScript? Sounds weird. But JSX lets you co-locate your logic and markup, making components self-contained and readable. 💡 The biggest lesson? React teaches you to think in components, not in pages. It's not just a library — it's a mental model for building modern UIs. If you're learning web development, don't skip React. It will change how you think about code. 🚀 What was YOUR "aha moment" with React? Drop it in the comments 👇 #React #WebDevelopment #Frontend #JavaScript #Learning #TechEducation #100DaysOfCode #ReactJS #CodingJourney

Why do we need to call 'super(props)' in the constructor of a React component? JavaScript classes aren't magic. They are just syntactic sugar over prototypes. If you are still using (or have used) Class Components in React, you have likely typed 'super(props)' a thousand times. But do you actually know what happens if you forget it? In JavaScript, you cannot use the keyword 'this' in a constructor until you have called the parent constructor. Since your component extends 'React.Component', calling 'super()' is what actually initializes the 'this' object. If you try to access 'this.state' or 'this.props' before that call, JavaScript will throw a ReferenceError and crash your app. But why pass 'props' into it? React sets 'this.props' for you automatically after the constructor runs. However, if you want to access 'this.props' inside the constructor itself, you must pass them to 'super(props)'. If you just call 'super()', 'this.props' will be undefined until the constructor finishes execution. Most of us have moved to Functional Components where this isn't an issue. But understanding these fundamentals is what separates a developer who just writes code from one who understands the runtime. #ReactJS #Javascript #SoftwareEngineering #WebDevelopment #Coding #ProgrammingTips

🚀 Challenge 5 – React for the Startup Ecosystem Part 3: JSX in React: From Syntax to React.createElement() While learning React, one question came to my mind, what is JSX, why do we need it, and how does it actually work? When we move from Vanilla JavaScript to React, the main goal is to avoid manually manipulating the DOM again and again. In Vanilla JavaScript, we usually select elements and update them step-by-step, which becomes difficult to manage as applications grow. React solves this by introducing component-based architecture and declarative programming, where we simply describe what the UI should look like and React handles the DOM updates internally. This also helps in building Single Page Applications (SPA). Internally, React does not understand JSX. React actually works using React.createElement() to create elements. Writing UI directly using React.createElement() quickly becomes complex and hard to read, especially for nested structures. To solve this readability problem, JSX (JavaScript XML) was introduced. It allows developers to write HTML-like syntax inside JavaScript, making UI code easier to understand. Browsers cannot understand JSX directly, so it is transformed by Babel into normal JavaScript. During this process, JSX gets converted into React.createElement() calls so that React can work with it. One small behavior I also noticed while experimenting is that React does not render values like undefined, true, or false on the page unless they are converted into strings. Note: JSX works because Babel transforms it into regular JavaScript. In the next part, I plan to explore how this transformation works and share some insights about source maps. 🚀 #React #ReactJS #JavaScript #JSX #FrontendDevelopment #WebDevelopment #Babel #Programming #Coding #SoftwareDevelopment #DeveloperCommunity #TechLearning #LearnToCode #ReactDeveloper #JavaScriptDeveloper #WebDev #CodingJourney #BuildInPublic #StartupEcosystem #100DaysOfCode

🚀 Understanding Hooks in React (Simple Explanation) When I first started learning React, I thought state management was only possible with class components… but then I discovered Hooks — and everything changed. 👉 Hooks are special functions in React that allow functional components to use features like state and lifecycle methods. 💡 Example: With useState, we can easily manage state inside a function component — no need for classes anymore. Why Hooks are powerful: ✔ Cleaner and more readable code ✔ Reusable logic across components ✔ Less boilerplate compared to class components ✔ Makes development faster and more scalable Some commonly used Hooks: 🔹 useState – manage state 🔹 useEffect – handle side effects (API calls, timers) 🔹 useRef – access DOM elements 🔥 One simple line: Hooks = extra powers for functional components. Learning Hooks really changed how I write React code — and made development feel much more intuitive. #ReactJS #WebDevelopment #Frontend #JavaScript #LearningInPublic #Developers

React fundamentals to get right early Understanding onClick and onChange is key to handling events correctly in React A common pattern to be aware of: onClick={handleClick(id)} This executes immediately during render --- Correct approach: onClick={() => handleClick(id)} This runs only when the user clicks --- Why? React expects a function reference, not a function call - handleClick → correct - handleClick() → executes immediately --- Same concept applies to onChange: onChange={handleChange(value)} // executes immediately Better: onChange={(e) => handleChange(e.target.value)} --- Simple rule: If you need to pass arguments → use an arrow function --- Things to watch out for: - Functions running on every render - Unintended API calls - Difficult-to-debug behavior --- Benefits of correct usage: - Runs only on user interaction - More predictable component behavior - Cleaner and maintainable code --- Additional note: onClick={handleClick} (if your function expects arguments) This may result in "undefined" --- Example: {users.map(user => ( <button onClick={() => handleClick(user.id)}> Click </button> ))} --- Focusing on fundamentals like this helps build more reliable React applications #ReactJS #JavaScript #Frontend #WebDevelopment

Have you ever wondered why, in a world full of diverse programming languages, one name always rises to the top when it comes to web development? 🤔🌐 • Why is JavaScript always used? 🟨 The simple answer: a historical monopoly. Browsers only speak JavaScript. Back in the 1990s, when the first browsers were being built, developers needed a way to make web pages interactive ✨ So, JavaScript was born… and every major browser followed suit. Today, browsers like Chrome, Safari, and Firefox all come with built-in JavaScript engines ⚙️ That means if you want to run code in a browser… JavaScript is the native language. • Can we use something else? 🤓💡 Yes. You’re not completely locked in anymore. There are two powerful escape routes: 1️⃣ Transpiling (Write anything → Convert to JS) 🔄 You can write code in other languages and translate it into JavaScript before it reaches the browser. 🔹 TypeScript – JavaScript with superpowers (and fewer bugs) 🔹 Dart – Used with Flutter for web apps 🔹 PyScript / Brython – Run Python in the browser 🐍 2️⃣ WebAssembly (Wasm) 🚀 This is where things get futuristic. WebAssembly lets you run languages like: 💻 C++ 🦀 Rust ⚡ Go 🔷 C# …directly in the browser at near-native speed. 👉 Example: Microsoft’s Blazor lets you build web apps using C# instead of JavaScript. • So why does JavaScript still dominate? 👑 Even with all these alternatives… JavaScript still rules the web. 🔹 Massive Ecosystem 🌍 NPM is the largest library of code on the planet. Need a feature? Someone already built it. 🔹 Direct DOM Access ⚡ JavaScript can instantly update the webpage (DOM). Other technologies often need to “go through” JS, which adds friction. 🔹 Industry Momentum 🏢 25+ years of dominance means: 👨💻 Millions of developers 🏗️ Thousands of companies built on JS Switching away is like turning a cargo ship, not a speedboat. 💭 Final Thought JavaScript isn’t just a language anymore… It’s the operating system of the web 🌐⚡ If you found this helpful, let’s connect 🤝 #WebDevelopment #SoftwareEngineering #Programming #JavaScript #Frontend #Backend #TechCommunity

While learning React, I realized that Props in React are very similar to function arguments in JavaScript. This comparison made the concept much clearer for me. In JavaScript, when we create a function, we pass data to it using arguments. Example: function greet(name) { console.log("Hello " + name) } greet("Sachin") Here, "Sachin" is an argument passed to the function, and the function uses that value. React works in a very similar way. A component is basically a function, and props are the arguments passed to that component. Example in React: function ProductCard(props) { return {props.title} } Here, title="Wireless Headphones" works just like a function argument. React collects these values into an object called props and passes it to the component. So the mental model becomes very simple: JavaScript Function → receives arguments React Component → receives props Another interesting thing is that React internally passes props as an object, which means we can access values like this: props.title props.price props.image And just like function parameters, we can also destructure props to make the code cleaner: function ProductCard({ title }) { return {title} } Understanding this connection between JavaScript arguments and React props made React feel much more intuitive to me. Sometimes the best way to understand a framework is by relating it to the fundamentals of the language it is built on. #ReactJS #JavaScript #FrontendDevelopment #WebDevelopment #CodingJourney #LearnInPublic

I just published a new article breaking down some of the most important React fundamentals that finally clicked for me. https://lnkd.in/df7igt6X It covers: - Declarative vs Imperative thinking - Components and Props - State and why it actually matters - The real reason React re-renders - Common mistakes with event handling One of the biggest takeaways for me was understanding this: React doesn’t “update variables” — it re-runs your component, and only state survives between renders. That small shift in thinking makes a huge difference when working with React. If you’re learning React or struggling with concepts like state and re-renders, this might help clarify things. I’d appreciate any feedback or thoughts. #React #JavaScript #Frontend #WebDevelopment #LearningInPublic