Learning React Basics: Components, Fragments, Props & Conditional Rendering

🚀 𝐓𝐡𝐢𝐧𝐠𝐬 𝐈 𝐰𝐢𝐬𝐡 𝐈 𝐤𝐧𝐞𝐰 𝐛𝐞𝐟𝐨𝐫𝐞 𝐥𝐞𝐚𝐫𝐧𝐢𝐧𝐠 𝐑𝐞𝐚𝐜𝐭 When I started learning React, I thought it was just about components and JSX… I was wrong 😅 Here are a few things I wish I knew earlier: ⸻ ⚛️ 1. JavaScript matters more than React If you don’t understand closures, arrays, async code, and ES6… React will feel confusing. 👉 React is just JavaScript + patterns. ⸻ 🧠 2. State is everything Understanding useState and how state updates work changes everything. 👉 Most bugs come from bad state management. ⸻ 🔁 3. Re-renders are not your enemy I used to fear re-renders… now I understand them. 👉 React re-renders are normal — optimizing comes later. ⸻ 📦 4. Don’t rush into libraries Redux, Zustand, React Query… I tried to learn everything at once. 👉 Stick to basics first, then scale. ⸻ 🎯 5. Focus on building, not watching tutorials Tutorials feel productive… but building teaches faster. 👉 Even small projects > endless courses. ⸻ 🧩 6. Component structure matters a LOT Messy components = hard-to-maintain apps. 👉 Learn how to break things into reusable pieces. ⸻ 🔥 7. Styling is part of frontend, don’t ignore it CSS, Tailwind, layout… they matter just as much as logic. ⸻ At the end of the day… React isn’t hard — unclear fundamentals make it hard. If I could start again, I’d focus less on “learning React” and more on understanding how things work under the hood. ⸻ What’s something you wish you knew before learning React? 👇 #React #JavaScript #Frontend #WebDevelopment #100DaysOfCode #BuildInPublic

⚠️ React Hooks Look Simple… Until You Try Them. As I’ve been learning useState, I started noticing something…” At first, it looked easy. Just a variable… and a function to update it. Simple, right? That’s what I thought. Until I actually tried using it. Coming from JavaScript, I’m used to changing values directly. But in React? You don’t just change values. You update state… and React re-renders everything for you. That shift? Confusing at first. I found myself asking: “Why can’t I just update it directly?” 🤔 But as I kept practicing, something started to click. React isn’t just about writing code. It’s about thinking differently. Instead of controlling everything manually, you describe what should happen… And React handles the rest. That’s powerful. Still learning. Still making mistakes. But now it’s starting to make sense. 💬 If you’ve learned React hooks — what confused you the most at the beginning? #ReactJS #FrontendDevelopment #JavaScriptDeveloper #WebDevelopmentJourney #LearnToCode

🚀 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

I wasted months trying to learn React. Not because React is hard… But because my JavaScript was weak. ↓ Everyone wants to jump into React: Hooks. APIs. Projects. It looks exciting. But here’s what most beginners don’t realize: React is just JavaScript under the hood. If your JS isn’t strong, React will feel confusing. ↓ What I was missing: → Functions and arrow functions → Arrays and objects → Destructuring → ES6 concepts → Async JavaScript (Promises, async/await) I was copying code……but not understanding it. ↓ Everything changed when I stopped chasing frameworks… …and fixed my fundamentals. Suddenly: → Components started making sense → State was no longer “magic” → Debugging became easier ↓ If you’re learning frontend right now: Don’t make this mistake. Skip the hype. Build your foundation first. ↓ Smart way to learn: → Focus on core JavaScript → Solve small logic problems → Then move to React This is how you go from: “copying code” to “building real applications” ↓ Most developers won’t do this. That’s why most stay stuck. ↓ I’ll be sharing a complete React roadmap step by step. ⇒ Visit My Portfolio: 👉 https://lnkd.in/defxD37a Next → Components, Props, and how React actually works ↓ Where are you stuck right now in React or JavaScript? Drop it below. I’ll help 👇 #ReactJS #JavaScript #WebDevelopment #FrontendDeveloper #LearnToCode #CodingJourney #DeveloperCommunity #TechGrowth

🚀 Day 2 of My React Learning Journey: What is JSX? Continuing my React journey, today I explored JSX—one of the core concepts 👇 🔹 What is JSX? JSX (JavaScript XML) is a syntax extension that allows us to write HTML-like code inside JavaScript. It helps define how the UI should look in a simple and readable way. 🔹 Why JSX is used? Makes code more readable and easy to write Allows combining UI and logic in one place Helps in creating dynamic content Improves developer experience 🔹 Key Concept JSX is not HTML—it gets converted into JavaScript (React.createElement()), which React uses to render elements efficiently ⚡ 🔹 Simple Example function App() { const name = "Sanket"; return <h1>Hello, {name} 👋</h1>; } 💡 My Takeaway: JSX makes React development cleaner and more intuitive by blending UI with JavaScript logic. 📌 Next, I’ll be learning about Components in React! 👉 Follow my journey as I learn React step by step 🚀 #React #JSX #JavaScript #Frontend #WebDevelopment #LearningInPublic #100DaysOfCode

Why does everyone keep saying - 𝗗𝗼𝗻'𝘁 𝗹𝗲𝗮𝗿𝗻 𝗥𝗲𝗮𝗰𝘁.𝗷𝘀? React.js is just another framework. React.js works on top of JavaScript. React.js follows a component-based architecture. What should I learn first before starting React.js? Today, I got the answers to all my questions revolving around JavaScript. Today was the day when I somehow used React concepts in just Vanilla JS. I took one of my projects to the next level🚀. ✨Project Showcase - 𝗜𝗻𝘀𝘁𝗮𝗴𝗿𝗮𝗺 𝗥𝗲𝗲𝗹𝘀[V2.0]🚀 📝Features Implemented:  • Click on like & increase likeCount  • Click on bookmark & increase bookmarkCount  • Click on share or comment, and their respective icons pop up  • Click pause/unpause the video  • Mute/unmute.  • follow/unfollow 🫵Each reel consists:  1. Username, profile picture, follow/unfollow button.  2. Short description with hashtags.  3. likeCount, commentCount, shareCount, saveCount.  4. likeIcon, commentIcon, shareIcon, saveIcon, muteIcon, & moreIcon 💡Learnings:  • Traverse the DOM to get the reelIndex of the clicked one.  • Implementing mute/unmute functionality.  • Handling video pause() and play() methods. 𝗗𝗮𝘆 𝟱𝟭 - 𝗙𝗶𝗻𝗶𝘀𝗵𝗶𝗻𝗴 𝗥𝗲𝗲𝗹𝘀 𝗣𝗿𝗼𝗷𝗲𝗰𝘁 | Sheryians Coding School 𝗟𝗶𝘃𝗲 𝗣𝗿𝗼𝗷𝗲𝗰𝘁 𝗟𝗶𝗻𝗸: https://shorturl.at/qxnxb 𝗣𝗿𝗼𝗷𝗲𝗰𝘁 𝗥𝗲𝗽𝗼: https://shorturl.at/QOwna 𝗚𝗶𝘁𝗛𝘂𝗯: github.com/mdshadabirfan #day51 #challenge #Developer #html #css #frontend #student #project #sheryianscodingschool #softwaredevelopment #learninpublic #buildinpublic #assignment #progress #instagram #reels #project Mentors: Harsh Vandana Sharma | Sarthak Sharma | Ankur Prajapati | Dhanesh Parwati Malviya | Satwik Raj | MOHD ALI ANSARI

🚀 Day 15 of My JavaScript Learning Journey Today I explored one of the most important concepts in JavaScript — how it actually works behind the scenes! 🤯 Here’s what I learned 👇 🧠 JavaScript Engine & Single Thread Concept JavaScript runs on a single thread — meaning it executes one task at a time. But still, it feels fast… how? 👀 ⚙️ What Makes JS Synchronous By default, JavaScript executes code line by line (synchronously). But real-world apps need more power! 🌐 Understanding Web APIs Browsers provide Web APIs (like setTimeout, DOM events) that handle async tasks outside JS engine 💡 📥 Callback Queue & Task Queue Async tasks go into queues and wait for their turn to be executed. 🔁 Event Loop Explained The Event Loop checks if the call stack is empty and then pushes tasks from the queue — this is how async magic happens! ✨ 📌 Summary & Key Takeaways: ✔ JS is single-threaded but handles async operations smartly ✔ Event Loop is the heart of async behavior ✔ Web APIs make non-blocking execution possible 📚 Prerequisites I Used: • Basic HTML & CSS • VS Code • Browser 🎯 Skills I'm Building: 💻 Interactive web apps 🧩 Strong JavaScript fundamentals 🎨 Clean & maintainable code #Day15 #JavaScript #LearnJavaScript #WebDevelopment #CodingJourney #FrontendDevelopment #Programming #Beginners #JavaScriptBasics #EventLoop #AsyncJavaScript

🚀 Learning Update | JavaScript, React & Consistency Here’s what I worked on recently: 🔹 JavaScript Fundamentals Implemented 5 practical examples to strengthen understanding of closures. 🔹 OOP in JavaScript Created a class with constructor and methods, and extended it into a subclass to understand inheritance. 🔹 DSA Practice Solved 4 LeetCode problems to improve problem-solving skills 💪 🔹 React Development Built a React-based form page and understood the advantages of using type="submit" for better form handling. 🔹 Node.js Practice Completed 5 Node.js challenges on HackerRank, improving backend fundamentals. 🔹 Communication Improvement Continued reading The Power of Subconscious Mind to enhance communication 🧠 Small, consistent efforts are building strong foundations. #JavaScript #ReactJS #NodeJS #DSA #LearningInPublic #GrowthMindset

Day 5 of Learning React JS 🚀 Today was all about going deeper into how React actually works behind the scenes. I focused on understanding state and props more clearly—and things are finally starting to click! Here’s what I explored today: 🔹 How state controls dynamic data inside components 🔹 Passing data using props and making components reusable 🔹 The importance of keeping components clean and modular 🔹 Practiced building a small interactive UI (and fixed a lot of bugs 😅) One key realization: React is less about memorizing syntax and more about thinking in components. It’s challenging at times, but also super rewarding when things start working the way you expect. Slowly building confidence step by step Looking forward to diving into hooks next! #ReactJS #WebDevelopment #LearningJourney #JavaScript #FrontendDevelopment #100DaysOfCode