Mastering React: useEffect Hook and Real-Time Weather App

🚀 Day 15 of My React Learning Journey Today I finally started applying what I’ve been learning… and it felt like building something closer to real-world applications 🔥 --- 🌐 What I implemented: • Data Routing • Protected Routes --- 🧠 What clicked today: Routing is not just about navigation… 👉 It’s about controlling: • What data loads • Who can access what --- 🔐 Protected Routes (Game Changer): I learned how to: • Restrict access to certain pages • Allow only authorized users • Redirect when access is not allowed 👉 This is how real apps handle: • Authentication • Dashboards • Private pages --- ⚙️ Data Routing in Action: • Fetch data before rendering • Improve user experience • Keep UI clean and predictable --- 💡 Big Realization: Frontend is not just UI anymore… 👉 It’s about: • Logic • Flow • Security (at UI level) --- 📈 Mindset Shift: Before: → “How do I build pages?” Now: → “Who should see this page and when?” --- 🚀 What’s next: • Combine routing + global state • Build a complete project using these concepts • Improve real-world understanding --- Every day I’m moving from: Learning concepts → Building real systems If you’re building something exciting or hiring frontend developers, let’s connect 🤝 Devendra Dhote Sheryians Coding School #React #JavaScript #FrontendDevelopment #WebDevelopment #LearningInPublic #100DaysOfCode #ReactRouter

🚀 Day 10 of My React Learning Journey Today felt like a real developer day. 💻 Not just concepts… I actually built something useful + practical 👇 🌗 What I built: Dark Mode / Light Mode Theme Using Context API, I created a global theme system: • Toggle between dark & light mode • Share theme across components • Clean, scalable state management 🧠 What clicked today: Context API is not just for avoiding props drilling… 👉 It’s for building global systems like: • Themes • Authentication • User preferences 🌐 Also explored: React Router (first glimpse) This opened a completely new door 🚪 👉 From single page → to multi-page experience 👉 Navigation without reload 👉 Structuring apps like real products 🔥 Big Realization: Today I didn’t just learn features… I connected the dots between: • State management • UI behavior • App structure 📈 Mindset Shift: Before: → “How do I build components?” Now: → “How do I design an entire application experience?” 🚧 What’s next: • Improve my theme system (animations, persistence) • Go deeper into routing • Combine everything into a real project 💡 Every day I’m moving from: Learning React → Building real-world systems If you’re on the same journey or hiring someone passionate about frontend, let’s connect 🤝 Devendra Dhote , Sheryians Coding School #React #JavaScript #FrontendDevelopment #WebDevelopment #LearningInPublic #100DaysOfCode

🚀 Day 14 of My React Learning Journey Today was one of those classes where everything started to connect together 🔥 🌐 What I learned today: • Data Routing • Nested Routing • Dynamic Routing 🧠 What clicked for me: Routing is not just about switching pages… 👉 It’s about structuring your entire application. ⚡ Key Understandings: 🔹 Data Routing → Load data before rendering the page 🔹 Nested Routing → Build layouts inside layouts (real app structure) 🔹 Dynamic Routing → Create scalable pages using data 💡 Big Realization: These are not separate concepts… 👉 They work together to build real-world applications 📈 Mindset Shift: Before: → “How do I navigate between pages?” Now: → “How do I structure and scale my app?” 🚀 What’s next: I’m excited to: • Apply all of this in upcoming projects • Build more structured & scalable apps • Improve my understanding through real use cases 💭 Final Thought: Today wasn’t just a class… It was a step closer to becoming a better frontend developer If you’re also learning or building something exciting, let’s connect 🤝 Devendra Dhote Sheryians Coding School #React #JavaScript #FrontendDevelopment #WebDevelopment #LearningInPublic #100DaysOfCode #ReactRouter

React learning journey just hit a new level of "Deep Understanding." Building a simple digital clock sounds easy, but the logic behind useEffect and useState has some tricky layers. I ran into three specific problems that taught me how React handles the DOM: 1. The "Ticking Bomb": At first, every time the state updated, a new setInterval was registered. The app was re-rendering and creating infinite intervals! I fixed this by wrapping the logic in useEffect. 2. The "Invisible Leak": Even after hiding the clock, the interval kept running in the background. I solved this by returning a cleanup functionclearInterval(a) to wipe the reference when the component unmounts or hides. 3. The "UI Lag": When I toggled the clock back on, it would show the old time for 1 second before the interval kicked in. I fixed this "stale UI" by adding an immediate setTime call right before starting the interval so the update is instant. It’s not just about making things work; it’s about making them efficient! Check it out here: Live Demo: https://lnkd.in/gsG7Jeaz Source Code: https://lnkd.in/gVBvdwWq #ReactJS #WebDev #JavaScript #CodingLogic #FrontendDevelopment

🚀 Day 12 of My React Learning Journey Today I explored something that quietly changes how you think about routing… 👉 Data Routing 💡 What I learned: Routing is not just about moving between pages anymore. Now it’s about: • Fetching data along with routes • Loading content before rendering • Creating smoother user experiences 🧠 The Realization: Before: → “Navigate to a page → then fetch data” Now: → “Fetch data → then render the page” ⚙️ Why this matters: • Better performance • Cleaner data flow • More control over loading & errors • Feels more like a real production app 🔥 What clicked today: React is not just about components… 👉 It’s about how data flows with UI and navigation together 📈 Mindset Shift: Before: → “How do I fetch data inside components?” Now: → “How can routing handle data before UI even loads?” 🚧 This is just a glimpse… Next, I want to: • Build something using data routing • Handle loading & error states properly • Understand advanced patterns 💡 Every day I’m moving from: Learning React → Thinking in systems If you’re also on this journey or building something exciting, let’s connect 🤝 Devendra Dhote Sheryians Coding School #React #JavaScript #FrontendDevelopment #WebDevelopment #LearningInPublic #100DaysOfCode #ReactRouter

🚀 Day 9 of My React Learning Journey Today things got serious. I didn’t just learn Context API… I went deep into how it actually works. --- 💥 The moment it clicked: Props drilling is not just annoying… It’s a scaling problem. And today I finally understood: 👉 How React lets you share data without passing it everywhere --- 🧠 What I learned (real understanding): • How to create context • How to provide data globally • How components can consume data directly • Why this approach makes apps cleaner & scalable --- ⚙️ The shift in my thinking: Before: → “Pass data step by step” Now: → “Make data available where it’s needed” --- 🔥 But here’s the truth most tutorials won’t tell you: Context API is not just a feature… It’s the beginning of understanding state architecture. --- 📈 Why this matters: This is where you stop being a beginner and start thinking like someone who can build real applications --- 🚧 This is just the beginning… Next, I want to: • Build a project using Context API • Understand performance implications • Learn when NOT to use it --- 💡 Every day I’m moving from: Learning React → Thinking in systems If you’re also on this journey or building something meaningful, let’s connect 🤝 Devendra Dhote Sheryians Coding School #React #JavaScript #FrontendDevelopment #WebDevelopment #LearningInPublic #100DaysOfCode

🚀 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 Luffy-Themed Full Stack CRUD Application! 🚀 Excited to share my latest project — a Student Manager Web Application inspired by the Luffy / One Piece theme ⚓🔥 This project helped me understand how real-world applications work by connecting frontend and backend seamlessly. ✨ Features: • Add and delete students dynamically • Real-time updates without page refresh • Luffy-inspired aesthetic UI 🏴☠️ • Clean and interactive user experience 🛠️ Tech Stack: HTML | CSS | JavaScript | Node.js | Express 💡 Key Learnings: • Understanding CRUD operations • Client-server communication using APIs • Backend development using Express • Designing creative and themed UI 🎯 This project reflects both my technical skills and creativity in design. Here’s a quick demo 👇 TechnoHacks EduTech Would love your feedback! 😊 #WebDevelopment #FullStackDeveloper #NodeJS #JavaScript #FrontendDevelopment #BackendDevelopment #CRUD #100DaysOfCode #LearningJourney #StudentDeveloper #TechProjects #CodingLife #DevelopersOfLinkedIn #BuildInPublic #OnePiece #Luffy

🚀 Day 16 of My React Learning Journey Today I stepped into something every serious React developer must understand… 👉 Performance Optimization ⚡ 💡 What I learned today: • useMemo • useCallback • React.memo 🧠 What clicked for me: React doesn’t just render UI… 👉 It re-renders a lot. And if you don’t control it, your app can become slow and inefficient. ⚙️ Understanding the tools: 🔹 useMemo → Memoize values to avoid unnecessary recalculations 🔹 useCallback → Memoize functions to prevent unnecessary re-creations 🔹 React.memo → Prevent re-rendering of components when props don’t change 🔥 Big Realization: Optimization is not about writing less code… 👉 It’s about writing smarter code 📈 Mindset Shift: Before: → “Why is my app re-rendering?” Now: → “How can I control unnecessary re-renders?” ⚠️ Important lesson: Not everything needs optimization. 👉 First make it work → then make it fast 🚀 What’s next: • Apply these concepts in real projects • Identify performance bottlenecks • Learn when NOT to use these hooks 💡 Every day I’m moving from: Building apps → Optimizing apps If you’re on the same journey or building something exciting, let’s connect 🤝 Devendra Dhote Sheryians Coding School #React #JavaScript #FrontendDevelopment #WebDevelopment #Performance #LearningInPublic #100DaysOfCode

Learning coding is not your problem. Lack of direction is. Every day, I see students: • Learning HTML, CSS, JS • Starting React • Watching tutorials But after months… Still confused. Still not job-ready. Still stuck. Why? Because they don’t have a clear roadmap. Here’s what actually works 👇 Step 1: Pick ONE path (Web Dev / App Dev / AI) Step 2: Learn basics with purpose Step 3: Build real-world projects Step 4: Learn Git & deployment Step 5: Understand APIs Step 6: Create a strong portfolio This is how you become job-ready. Not by random learning. If you want a clear roadmap based on your level, comment “ROADMAP”. I’ll guide you. #StudentLife #CodingJourney #TechCareers #JobReady #SoftwareDevelopment #CareerGrowth #TechSpark