React Learning Journey: Building a Global Theme System with Context API

🚀 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

🚀 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

🚀 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

🚀 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

Learning software engineering can feel like drinking from a firehose. There is always a new framework, a new language, or a new tool demanding your attention. Whether you are aiming to push high-performance Flutter mobile apps to production, scale an enterprise backend using .NET or Java, or build dynamic web interfaces with Next.js—figuring out exactly what to learn and in what order is half the battle. If you are tired of jumping between random tutorials and feeling lost, you need to check out roadmap.sh. It is an open-source, community-driven platform that provides step-by-step visual learning paths for almost every tech stack and role. Instead of guessing, you get a clear, logical flowchart of concepts to master, complete with free resources attached to every single node. I just published a detailed breakdown on my blog (and a quick video guide!) on how to use these roadmaps to structure your learning and stop wasting time. 🔗 Link in the comments to the full guide! What tech stack or skill are you currently trying to master? Let me know below! 👇 #SoftwareEngineering #TechCareers #WebDevelopment #MobileDevelopment #CodingJourney #DeveloperCommunity

🚀 Day 4 of My React Learning Journey: Props in React Today I learned about Props, which help components communicate with each other 👇 🔹 What are Props? Props (short for properties) are used to pass data from a parent component to a child component. They make components dynamic and reusable. 🔹 Why Props are Important? Enable data sharing between components 🔄 Make components reusable and flexible Help build dynamic UI Follow one-way data flow (parent → child) 🔹 Key Concept Props are read-only (immutable) and cannot be modified by the child component. 🔹 Simple Example function Greeting(props) { return <h1>Hello, {props.name} 👋</h1>; } function App() { return <Greeting name="Sanket" />; } 💡 My Takeaway: Props make components more powerful by allowing them to display different data based on input. 📌 Next, I’ll be learning about State in React! 👉 Follow my journey as I learn React step by step 🚀 #React #JavaScript #Frontend #WebDevelopment #LearningInPublic #100DaysOfCode

1 year ago, I didn't know what a component was. Today, I'm building React apps for clients. Here's the honest version of that journey — not the LinkedIn highlight reel: I come from a non-tech background. No CS degree. No bootcamp. Just YouTube tutorials at night and a laptop that overheated every time I opened VS Code. The first 3 months were brutal. I'd follow a tutorial, build the exact same to-do app, close the laptop, and the next morning I couldn't write a single line without Googling. I thought I was broken. I thought "maybe coding isn't for me." Then something shifted. I stopped watching tutorials and started breaking things. → I'd build something, then intentionally break it to see what the error meant → I stopped copying code and started typing every character myself → I picked ONE small real project instead of 10 tutorial clones → I read documentation I didn't understand — over and over — until I did 12 months later: → I've built 6 real projects from scratch → I understand hooks, state, and component architecture well enough to explain them I'm still learning. I still Google basic things. I still get stuck for hours on bugs that turn out to be typos. But the fear is gone. That's the real win. If you're thinking about switching to tech from a non-tech background — the gap feels impossible from the outside. It's not. It's just slow. #ReactJS #CareerChange

I thought I was learning frontend development… But I was actually just learning how to copy code. 😅 At the beginning, I followed tutorials step by step. Everything worked. Everything looked perfect. But when I tried to build something on my own… I got stuck. That’s when I realised the difference 👇 👉 Watching tutorials ≠ Building skills So I changed my approach: • Instead of copying, I started building from scratch • Instead of searching for solutions, I tried to think first • Instead of avoiding bugs, I started understanding them And that’s where real learning began. Now I still use tutorials - But as guidance, not dependency. Because in the end… You don’t grow by watching, You grow by building. What helped you move from “tutorials” to real projects? 👇 #FrontendDeveloper #WebDevelopment #ReactJS #CodingJourney #LearningByDoing #WomenInTech #TechLearning #100DaysOfCode #CareerGrowth #DevelopersLife

🚀 Starting something new, and honestly, it feels a bit uncomfortable. I’ve been learning React.js for a while now, mostly on my own and without really sharing much. But over the past few weeks, I started posting some of what I’m learning here on LinkedIn… and honestly, the encouragement and support I’ve gotten has been really surprising — and super motivating. So I’ve decided to take this more seriously. I’m a second-year software engineering student, focusing on getting better at frontend development and building my confidence with React. From now on, I’m going to share everything I learn — simple explanations, small concepts, and even the mistakes I make. Not because I’m some expert (far from it), but because I’m learning step by step. I’ve realized that explaining things to others is one of the best ways to really understand them myself. If you’re also learning React (or are already experienced), feel free to follow along or share any tips — I’d really appreciate it 🙂 Let’s see where this takes us 🤝 React #LearningInPublic #Frontend #WebDevelopment #StudentLife

This week I spent some time improving my React skills, and honestly, it was a really productive learning phase. I focused on understanding components better, working more with hooks, and trying to write cleaner and more efficient code. Small improvements, but they really make a difference when building real projects. Still a lot to learn, but enjoying the process step by step. Curious — what did you work on or learn this week? 👇 #ReactJS #WebDevelopment #Learning #Developers #Growth