ReactJS Cohort 2.0: Real-World Scenarios & Performance Optimization

Day 16 of my 40-Day coding Challenge! One of the things I’m really starting to appreciate in JavaScript is how objects let you bundle multiple pieces of data together inside a single variable using simple key-value pairs. example: const user = { name: "John", age: 25, isDeveloper: true }; So name, age, and isDeveloper are the keys, and "John", 25, true are the values. Accessing them is straightforward too: user.name // dot notation user["age"] // bracket notation What I love most is how flexible they are — you can add or change properties whenever you want: user.country = "USA"; user.age = 26; And yes, objects can even hold functions (we call them methods): const person = { greet() { console.log("Hello!"); } }; Objects are honestly everywhere in real-world JavaScript — API responses, app state, user profiles, config files, React components… you name it. Just taking it one concept at a time and it’s all slowly clicking into place. Feels good! #JavaScript #FrontendDevelopment #CodingJourney #100DaysOfCode #LearningInPublic

Day 46 – React Learning Journey Today’s focus was on understanding different ways to use functions in React event handling and how they impact code structure and flexibility. - Explored multiple approaches: Passing function references directly → onClick={handleClick} Using inline arrow functions → onDoubleClick={() => {...}} Handling mouse events → onMouseEnter, onMouseMove Working with input events and event objects → onChange={(e) => ...}- * Key Insight: Choosing the right way to use functions in events improves code readability, reusability, and performance. Understanding when to use direct references vs inline functions is essential for writing clean React code. - Every small concept like this builds a strong foundation for scalable frontend applications. github link : https://lnkd.in/gRbcs2Ue #Day46 #ReactJS #JavaScript #FrontendDevelopment #MERNStack #WebDevelopment #CleanCode #LearningInPublic

Day 22 of my web development journey in Chai Code cohort. Completed Object-Oriented Programming (Part 2) by Hitesh Choudhary . This lecture continued from the previous one but went deeper into how JavaScript actually works behind the scenes. The first important realization: Classes in JavaScript are not what they seem. They look like traditional OOP classes, but internally they are just syntax over prototypes. Understanding this changed how I see classes completely. One key thing I understood: Methods inside class are shared But functions defined inside constructor are not That means: ->Class methods are memory efficient ->Constructor functions create separate copies per instance Then came Symbols At first it looked like a small topic, but it has a strong use case. ->Symbols always create unique values ->Even if the description is same ->Useful when you want hidden or non-colliding keys Also learned: Symbol keys don’t show up in Object.keys() You need Object.getOwnPropertySymbols() to access them Another interesting concept: Making objects iterable Normally, objects are not iterable But using Symbol.iterator, we can control how iteration works This was something I didn’t expect JavaScript to allow so easily. Also covered: Symbol.toPrimitive This controls how an object behaves when converted to string or number. It gives more control over type conversion. Error handling became clearer: try → catch → finally ->try: risky code ->catch: handle error ->finally: always runs This is important for writing stable applications. Then came async flow: Callback approach → nested and hard to manage Promises: ->cleaner ->chainable ->easier to handle success and failure Big takeaway: JavaScript gives a lot of control, but with that comes responsibility to understand what is happening internally. Day 22 done. This OOP part needs more practice to fully sink in. Thank you Hitesh Choudhary sir, Piyush Garg sir, Anirudh Jwala sir, Suraj Kumar Jha for the support. #JavaScript #WebDevelopment #CodingJourney #LearnToCode #100DaysOfCode #Developers #Programming #TechCareers

🚀 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

Exploring NestJS 👨💻 After learning the basics, I wanted to understand how NestJS compares with Express. Here’s a simple way to look at it: • Express → minimal and flexible, but you structure everything yourself • NestJS → built on top of Express, but gives a clear structure out of the box Why I find NestJS interesting: • Built-in architecture (modules, controllers, services) • Uses TypeScript by default • Scalable and easier to maintain for larger projects Not saying one is better than the other — it really depends on the use case. But for structured backend apps, NestJS feels easier to organize. Still learning and sharing along the way. #NestJS #ExpressJS #NodeJS #BackendDevelopment #WebDevelopment #SoftwareEngineering #LearnInPublic #Programming

I built something fun for the React community. A live playground where you can paste any React component and instantly see it working — no setup, no npm run dev, no local environment. Try it here: https://lnkd.in/gejCnyVM The idea is simple: You write or generate a component, paste it, and watch it come to life immediately. It’s built to help you experiment faster, debug visually, and understand components without friction. Here’s a quick way to test it: Go to GPT Ask: “Create a React component for …” Copy the code Paste it into the playground See the result instantly No installs. No configs. Just code → output. It’s especially useful when: You want to quickly test a UI idea You’re learning React and want instant feedback You’re debugging or tweaking components You don’t want to spin up a full project There are bugs right now. That’s expected. This is an evolving tool and I’m actively improving it with each version. Would love for you to try it and break it. Drop feedback, issues, or ideas — especially from fellow React devs. #ReactJS #WebDevelopment #FrontendDevelopment #JavaScript #DeveloperTools #BuildInPublic #IndieHackers #Programming #OpenSource #Coding #DevCommunity #TechProjects #ReactDevelopers #SideProject

🚀 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

🚀 Day 8 of My React Learning Journey Today I faced a problem that every React developer eventually runs into… 👉 Props Drilling 💡 What I learned: Passing data from parent → child → child → child… just to reach one component 😵 At first, it seems fine. But as the app grows, it becomes: • Messy • Hard to manage • Difficult to scale 🧠 The Realization: Not every problem should be solved with props. Sometimes, the issue is not the code… It’s the approach. 🌐 Got introduced to: Context API Through my learning at Sheryians Coding School (Kodex Batch), I took a glimpse into how React solves this problem. 👉 Context API allows you to: • Share data globally • Avoid unnecessary prop passing • Keep components cleaner ⚙️ What changed in my thinking: Before: → “How do I pass data down?” Now: → “Do I even need to pass it through every component?” 🔥 Key Takeaways: • Props drilling is okay for small apps • But not scalable for larger systems • Context API helps manage shared state • Clean architecture > quick solutions 📈 What’s next: I’m going to: • Dive deeper into Context API • Build something using it • Understand when NOT to use it Every day I’m trying to move from: Writing React → Understanding React Architecture If you’re on the same journey or building something exciting, let’s connect 🤝 Devendra Dhote #React #JavaScript #FrontendDevelopment #WebDevelopment #LearningInPublic #100DaysOfCode

🚀 Day 36 of My Full Stack Development Journey Today I explored one of the most important concepts in JavaScript — Functions & Scope ⚡ Here’s what I learned today: 🔹 Functions – Reusable blocks of code 🔹 Functions with Arguments – Passing data into functions 🔹 Return Keyword – Getting values back from functions 🔹 Scope – Understanding where variables can be accessed 🔹 Global Scope, Function Scope, Block Scope 🔹 Lexical Scope – How functions access variables from parent scope 🔹 Solved 6 practice questions + 6 assignment questions 💻 These concepts helped me understand how to write cleaner, reusable, and more structured code. Step by step, building strong programming fundamentals 🚀 #FullStackJourney #WebDevelopment #JavaScript #LearningInPublic #100DaysOfCode #CodingJourney

🚀 Just completed Sprint 05 — "Half Marathon Full Stack" as part of the Half Marathon Full Stack program at Innovation Campus of NTU "KhPI"! This sprint was my first real step into backend development with Node.js, and it was a genuine eye-opener. Here's what I worked on and what I took away: 🔧 What I built: • A Node.js script outputting structured console messages (Task 00) • A module exporting scalar-typed variables using CommonJS (Task 01) • A range checker with default parameters and divisibility logic (Task 02) • A string formatting utility with edge-case handling (Task 03) • A factory function returning instances of anonymous classes with private fields (Task 04) • A StrFrequency class with letter/word frequency analysis and string reversal (Task 05) • A class using getters/setters to control property access (Task 06) • A mixin-based trait system combining MarkII and Printable via Object.assign (Task 07) 💡 Key lessons learned: → Node.js isn't just "JavaScript in the browser" — it's a completely different environment with its own module system, execution model, and use cases. → JavaScript OOP goes deep: anonymous classes, mixins, private fields, and getters/setters are powerful tools that I'm only beginning to fully appreciate. → Reading the task carefully matters more than coding fast — several edge cases were hidden in the examples, not the description. 🤔 What I'd do differently: Spend more time on OOP fundamentals before diving into the advanced tasks. The prototype chain and mixin patterns tripped me up more than they should have. This sprint has genuinely shifted how I think about web development. Frontend is the dining room — backend is the kitchen. And now I finally know my way around the kitchen. 🍳 I'd love to hear from anyone working with Node.js or teaching backend fundamentals — what resources helped you most? #InnovationCampusKhPI #NodeJS #JavaScript