React Fundamentals Key to Complex Frameworks

📅 Day 3 with React — I just shipped my first real project. 🚀 Not a tutorial. Not a copy-paste. A project I built myself using concepts I learned this week as part of Sheryians Coding School. And honestly? Building something real hits completely different. 👇 🃏 What I built: A dynamic Cards Project using Vite + React — where every card is a reusable component powered by real data. 🔗 Live link → https://lnkd.in/dVuzZZw5 🧠 Concepts I used while building this: ⚛️ Components Broke the entire UI into small, reusable pieces. One card = one component. Clean, modular, and scalable. 📦 Props Instead of hardcoding data inside every card, I passed data INTO components using props. Change the data → card updates automatically. 🔽 Props Drilling Learned how data flows from parent → child → grandchild components. Understood WHY this can get messy at scale and why tools like Context API exist. ✍️ JSX Writing HTML inside JavaScript still felt weird on Day 1. Now it feels completely natural. 💡 The biggest thing I learned: React isn't about writing less code. It's about writing smarter, reusable code. One component. Infinite cards. That's the power of props. 🙏 Big shoutout to my mentor Devendra Dhote Daneshwar Verma and the entire Sheryians Coding School team for making these concepts click in the most practical way possible. Learning by building > learning by watching. Every time. Day 4 loading... 🔥 Drop a ⚡ if you're also learning React right now! #React #ReactJS #Vite #JavaScript #WebDevelopment #Frontend #SheryiansCodingSchool #100DaysOfCode #LearnInPublic #Day3 #CodingJourney #Props #JSX

🚀 Day 2 of My Coding Journey Today I practiced an important concept: Reversing a String and a Number using Functions in JavaScript 🔹 What I learned: How to reverse a string using a loop How to reverse a number using mathematical logic Also explored shortcut methods using built-in functions 💻 Example: Reversing a String function reverseString(str) { let reversed = ""; for (let i = str.length - 1; i >= 0; i--) { reversed += str[i]; } return reversed; } Reversing a Number function reverseNumber(num) { let reversed = 0; while (num > 0) { let digit = num % 10; reversed = reversed * 10 + digit; num = Math.floor(num / 10); } return reversed; } 📌 Key Takeaway: Understanding logic is more important than just using built-in methods. I’m improving step by step every day 💪 #Day2 #JavaScript #CodingJourney #WebDevelopment #90DaysOfCode #Learning #FrontendDeveloper

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

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

Life lessons from JavaScript arrays 💻 Too many dreams? Use Array of Objects – organize them with structure. Looking for the exact opportunity? Use find() – focus on what truly matters. Facing too many problems? Use reduce() – break them down and solve step by step. Want to improve daily? Use map() – transform yourself into a better version. Need to remove negativity? Use filter() – keep only what helps you grow. Coding teaches more than programming… It teaches how to think, simplify, and build solutions in life. Happy reading and happy coding. 🚀 #JavaScript #CodingLife #DeveloperMindset #ProblemSolving #LearningJourney

Day 67 of My 9-Month Coding Challenge 🎯 💻 Day 67 Complete | Exploring Async/Await in JavaScript ⚡ Consistency is the real key to improving programming skills. Every day I try to learn something new, practice it, and understand the logic behind how things actually work. Step by step, these small efforts build stronger knowledge. 🚀 Today’s Focus: ✔ Learning how async and await work in JavaScript ✔ Understanding how async/await simplifies asynchronous code ✔ Converting Promise-based code into async/await syntax ✔ Practicing error handling using try...catch 📚 What I’m Learning: ✅ How async functions always return a Promise ✅ How await pauses execution until a Promise resolves ✅ Writing cleaner and more readable asynchronous code ✅ Handling errors effectively with try...catch Async/Await makes asynchronous JavaScript easier to read and maintain compared to traditional Promise chains. It helps developers write code that looks synchronous while still handling asynchronous operations like API requests and data fetching. Learning and practicing with resources and guidance from Coding Ninjas. No shortcuts — just consistency. 🎯 Still learning. Still improving. Still consistent. 💯 #Day67 #9MonthChallenge #JavaScript #AsyncAwait #AsyncJavaScript #MERNStack #WebDevelopment #LearningInPublic

🚀 Day 90 of My #100DaysOfCode Challenge I used to think… “Just practice JavaScript daily and I’ll get better” But honestly, that didn’t work for me ❌ So today I want to share what actually helped me improve in JavaScript 👇 💡 How to Practice JavaScript Effectively 1️⃣ Don’t just watch tutorials — build small things Even a simple project (like a button click or mini game) teaches more than hours of watching videos. 2️⃣ Practice with real problems Instead of random code, try: • reverse string • remove duplicates • small logic-based problems 3️⃣ Repeat & revise concepts One-time learning is not enough. Revisiting topics like closures, arrays, and events makes them clear. 4️⃣ Break things (and fix them) Try changing code, make mistakes, and debug it. This is where real learning happens. 5️⃣ Stay consistent (even on low-energy days) Some days you won’t feel like coding… but even 20 minutes counts. --- 💭 What I realized It’s not about doing more… It’s about doing the right kind of practice. Slowly improving every day and trusting the process 💻✨ #Day90 #100DaysOfCode #JavaScript #WebDevelopment #LearningInPublic #CodingJourney

🚀 Day 15 of #100DaysOfCode Today was all about mastering two powerful JavaScript concepts that make code cleaner, smarter, and more expressive: 👉 Array Destructuring 👉 Spread Operator 💡 1. Array Destructuring No more messy indexing! You can unpack values from arrays in a clean way: const arr = [10, 20, 30]; const [a, b, c] = arr; console.log(a, b, c); // 10 20 30 You can even skip values or set defaults: const [x, , z = 50] = [5, 15]; console.log(x, z); // 5 50 ⚡ Cleaner code = better readability. 💡 2. Spread Operator (...) This tiny syntax unlocks big power 💥 👉 Copy arrays: const arr1 = [1, 2, 3]; const arr2 = [...arr1]; 👉 Merge arrays: const a = [1, 2]; const b = [3, 4]; const merged = [...a, ...b]; 👉 Add elements easily: const nums = [1, 2, 3]; const updated = [...nums, 4]; 🔥 No loops. No push chaos. Just elegance. ✨ Key Takeaway: Destructuring simplifies access. Spread operator simplifies manipulation. Together? They make your JavaScript feel like magic 🪄 📈 Consistency is the real superpower. Showing up every day. Learning every day. #JavaScript #WebDevelopment #CodingJourney #100DaysOfCode #LearnInPublic #Developers #LearningInPublic Sheryians Coding School Sheryians Coding School Community

Unpopular opinion: Most people trying to become developers are stuck… not because coding is hard, but because they’re addicted to tutorials. I was one of them. Watching course after course… feeling productive… building nothing. The moment I started building before I felt ready — everything changed. You don’t learn coding by watching. You learn by struggling. Agree or disagree? #webdevelopment #coding #learninpublic #softwaredeveloper #javascript

🚀 Day 17/21 – JavaScript Deep Dive Today I explored what really happens behind the scenes in JavaScript 🧠 ✨ Topics Covered: • Closures • Destructuring • Event Loop • Synchronous vs Asynchronous JS Understanding these concepts changed the way I see JavaScript execution 💡 It’s not just code… it’s how the engine thinks! Sheryians Coding School Sheryians Coding School Community Ritik Rajput Daneshwar Verma #JavaScript #WebDevelopment #CodingJourney #21DaysOfCode #Learning #Developers #Frontend