Mastering React Router DOM for Client-Side Routing

🚀 Day 4 of Learning React — Understanding children Props Today I hit one of those small mistakes, big lesson moments while working with React. I was passing content inside a component like this: <Button>Next ➡</Button> But nothing showed up on the UI. 🤯 After debugging, I realized the issue wasn’t React… it was me. 👉 I had written childern instead of children. 💡 So what exactly is children in React? children is a special prop in React that allows you to pass content inside a component. function Button({ children }) { return <button>{children}</button>; } This makes your components: 🔁 Reusable 🎯 Flexible 🧩 Composable 🧠 Why it matters Instead of hardcoding content: ❌ Bad: <button>Click Me</button> ✅ Better: <Button>Click Me</Button> <Button>Submit</Button> <Button>Next ➡</Button> One component → multiple use cases. 🔥 My Key Takeaway Sometimes bugs are not about logic… they are about attention to detail. A single typo (childern) can break your UI silently. 🛠️ Debugging Habit I’m Building Whenever something doesn’t render: console.log(props); This simple step can save a lot of time. Day 4 done ✔️ Learning React is slowly shifting from confusion → clarity. #ReactJS #FrontendDevelopment #JavaScript #100DaysOfCode #LearningInPublic

Week 10 | Cohort 2.0 – Sheryians Coding School This week was a mix of real-world scenarios, performance optimization, and stepping into React: 🔹 Real-World JavaScript Scenarios Built a Weather Dashboard with proper error handling Simulated Bulk Email Sending using parallel promises Learned how to manage errors in real-time applications 🔹 Performance Optimization Debouncing & Throttling – improving performance in events Understanding how and when to use them Worked with JSON: JSON.parse() & JSON.stringify() 🔹 Guidance Session Baat-cheet session with DSA guidance Focus on consistency and problem-solving mindset 🔹 Project Work Built a Productivity Dashboard using DOM concepts Applied real-world UI logic and structure 🔹 Getting Started with React Introduction to React.js Explored libraries like: GSAP, Lenis, Swiper, Three.js Understanding how modern UI is built 🔹 Project Setup with Vite Installed Node.js Learned terminal basics Created a React app using: npm create vite@latest Selected React + JavaScript setup This week felt like a big step forward — moving from core JavaScript to modern frameworks like React. Excited to build more interactive and scalable applications. #ReactJS #JavaScript #WebDevelopment #FrontendDevelopment #LearningJourney #SheriyansCodingSchool #Cohort2 #Vite

Most tutorials teach you what to build. Today I finally understood how things actually work under the hood. Day 4 of my React learning journey 🚀 Here’s what I worked on: • Built Create & Read functionality from scratch • Split logic into two separate components (cleaner + reusable) • Learned how to use React Hook Form • Understood how forms are managed efficiently using hooks Key insight: Handling forms in React doesn’t have to be messy. With the right approach (and tools like React Hook Form), you stop fighting state management… and start controlling it. Real moment: At first, managing inputs and state felt confusing — too many moving parts. But once I connected how hooks simplify the flow, everything started making sense. That shift from confusion → clarity was the real win today. Still early in the journey, but now I can see how real-world apps handle user data step by step. Building slowly. Understanding deeply. Devendra Dhote Sheryians Coding School #ReactJS #WebDevelopment #JavaScript #LearningInPublic #FrontendDev

Day 10 of Learning React — Deep Dive into useEffect & useLayoutEffect Today was not about writing code… it was about understanding how React actually thinks 🧠 Here’s what I explored 👇 🔹 useEffect Basics Used for handling side effects (API calls, subscriptions, DOM updates) Runs after render 🔹 Dependency Array (Most Important Concept ⚠️) [] → Runs only once (Mount) [state] → Runs on state change (Update) No array → Runs on every render (⚠️ Dangerous if misused) 🔹 Component Lifecycle (Simplified React Way) Mount → Component created Update → State/props change Unmount → Cleanup (very important for memory leaks) 🔹 Cleanup Function Prevents memory leaks Example: removing event listeners, clearing intervals 🔹 useLayoutEffect vs useEffect useEffect → Runs after paint (async, non-blocking) useLayoutEffect → Runs before paint (sync, blocks UI) 👉 Use useLayoutEffect only when you need DOM measurements or avoid flickering 🔹 Practical Learning Fetched data using API (axios) Managed state updates Understood render cycles 💡 Key Realization: React is not about components… it’s about managing side effects correctly If you misuse useEffect, your app may: ❌ Re-render infinitely ❌ Cause performance issues ❌ Create memory leaks 🔥 Still learning, still building. Next goal: Mastering state management & optimization #React #WebDevelopment #MERN #FrontendDevelopment #LearningInPublic #JavaScript #Developers

"Turning code into a product! 🚀 I just finished building my first Full-Stack Web App: The Aesthetic Student Planner." As a Btech student, I wanted to move beyond the terminal and create something with a modern, professional look. I chose a 'Glassmorphism' style to challenge my CSS skills while keeping the backend functional and robust. This project helped me understand the 'Full-Stack' flow , how a user's action in the browser travels through a Python server to be saved in a database. It was a great lesson in troubleshooting and UI/UX design Check out the source code here: https://lnkd.in/gqgqN5Bu #Python #Flask #WebDevelopment #CSStudent #Engineering #UIUX #GitHub #LearningToCode

Strings look simple… until you actually start solving problems with them Today I spent time doing DSA on Strings, and honestly, it was one of those “simple but tricky” days. While solving problems, I explored a lot of string methods like: • slice() • substring() • split() • indexOf() • concat() And that’s when I realized — knowing methods is one thing, but knowing when to use which one is the real game. Then came my React session at Sheryians Coding School (Kodex Batch) with Devendra Dhote bhaiya And things got even more interesting. We explored form handling in a more optimized way using useRef() — which felt very different from the usual useState approach. Also got introduced to form handling using npm packages, which made me realize how real-world apps handle complex forms much more efficiently. Today’s takeaway: Sometimes the basics (like strings & forms) teach you the deepest lessons. What do you find more tricky — Strings in DSA or Forms in React? #JavaScript #DSA #ReactJS #WebDevelopment #LearningInPublic #SheryiansCodingSchool #FrontendDevelopment

Day 14 of building in public. Starting my 21 Day Frontend Development Challenge 🚀 Today I learned about Lazy Loading images using the Intersection Observer API in JavaScript. Lazy loading is a powerful performance optimization technique where images are loaded only when they enter the user’s viewport instead of loading everything when the page first opens. This helps reduce the initial page load time and improves overall performance. The Intersection Observer API allows us to detect when an element becomes visible inside the browser viewport. When the image enters the visible area of the screen, JavaScript replaces the placeholder with the actual image source and loads it dynamically. This approach is commonly used in modern websites, blogs, and e commerce platforms to improve loading speed and user experience, especially on pages with many images. Learning how browsers handle visibility detection and resource loading helped me understand how developers build faster and more efficient web applications. Learning in public and building every day. Excited for Day 15. If you are also learning JavaScript or building projects feel free to connect. Day 14 complete 7 more days of learning and building ahead. If you are also learning JavaScript or building projects I would love to connect and learn together. #javascript #webdevelopment #frontenddevelopment #coding #programming #buildinpublic #learninpublic #devcommunity #softwaredevelopment #webdev #sheryains #sheryainscodingschool Harsh Vandana Sharma , Sheryians Coding School , Satwik Raj, Sheryians Coding School Community.

🚀 Day 11 of My React Learning Journey Today I built something that actually feels like a real-world application 🔥 --- 🌐 What I worked on: Routing-based Project I moved beyond a single page and built an app with: • Multiple pages • Smooth navigation • Clean structure using React Router --- ⚡ The highlight: Dynamic Routing This changed how I think about apps. 👉 Instead of creating separate pages manually, I learned how to generate routes dynamically. Which means: • One component → multiple dynamic pages • Better scalability • Real-world architecture --- 🧠 Bonus Challenge from Instructor: Got a task to handle quantity buttons on a product card 🛒 👉 Increase / Decrease quantity 👉 Manage state properly 👉 Keep UI in sync with logic Sounds simple… but it really tested my understanding of: • State management • Component behavior • Clean logic handling --- 🔥 Big Realization: Routing is not just navigation… and state is not just variables… 👉 Together, they define how a real product behaves --- 📈 Mindset Shift: Before: → “How do I build pages?” Now: → “How do I design user flow + interactions?” --- 👀 Sneak Peek: A routing-based app with: • Dynamic pages • Interactive product cards • Clean and scalable structure (Still improving it further 🚀) --- 💡 Every day I’m moving from: Learning React → Building real-world systems If you’re building something exciting or hiring someone who’s serious about frontend, let’s connect 🤝 Devendra Dhote Sheryians Coding School #React #JavaScript #FrontendDevelopment #WebDevelopment #LearningInPublic #100DaysOfCode #ReactRouter

Built a Dynamic List Creator using JavaScript 📝 | DOM Project Recently, I built a List Creator App using DOM manipulation with some interactive features. This project helped me go beyond basics and understand how real-time UI updates work with user actions. -> Add new items to the list -> Edit items on double-click -> Remove items with a delete button -> Used DOM methods for dynamic element creation -> Improved understanding of event handling and user interaction Making items editable on double-click was a fun challenge — it made the project feel more like a real application. Big thanks to Suraj Kumar Jha for the guidance and learning support throughout the cohort. Hitesh Choudhary | Piyush Garg |Akash Kadlag |Chai Code #JavaScript #DOM #WebDevelopment #FrontendDevelopment #CodingJourney #BuildInPublic #LearnInPublic #100DaysOfCode #Programming #TechJourney #cohort2026

🚨 Still stuck in tutorial hell after learning React? Read this. I wasted months learning React… until I changed one thing. I was doing everything “right”: • Watching tutorials daily • Taking notes on my laptop • Understanding every concept But when it came to building something on my own… I got stuck. It was frustrating. Because in my head, I knew React. But in reality, I couldn’t even build a simple project without help. Then I made one small shift 👇 I started making handwritten React notes. Nothing fancy. No aesthetics. Just clarity. • Broke down concepts like useState & useEffect • Wrote everything in my own words • Added small code snippets for quick revision And suddenly… everything clicked. ✔ Better recall ✔ Faster execution ✔ More confidence Now, instead of rewatching tutorials, I revise my notes → and start building. If you’re stuck in tutorial hell, try this once: 👉 Write. Don’t just watch. It might change everything for you, too. #ReactJS #WebDevelopment #Programming #LearnToCode #CodingTips