When I first started learning React, I honestly thought it would just be about creating components and rendering things on the screen. But the deeper I went, the more I realized — React isn’t just about syntax, it’s about thinking in components and building real, dynamic experiences. Over time, I’ve been following a roadmap that has helped me grow step by step: My React Roadmap So Far: 1️⃣ Fundamentals – Learning components, props, and state. 2️⃣ Hooks – Using useState, useEffect, and now experimenting with custom hooks. 3️⃣ Data Flow – Understanding how components talk to each other (props drilling and beyond). 4️⃣ React Router – Learning routing, loaders, actions, and redirects. I’ve built pages that actually work and respond smoothly. 5️⃣ Forms and Actions – Handling form submissions and data using <Form> and action functions. 6️⃣ Clean Project Structure – Writing code that’s organized, reusable, and easy to maintain. 7️⃣ User Experience Enhancements – Using loaders, navigation feedback, and error handling to make things feel complete. Each step hasn’t just taught me how to code , it’s taught me how to think like a developer. I’m currently diving deeper into state management and API integrations — connecting front-end logic with real data. It’s been challenging, but the progress feels amazing. If you’re also learning React, here’s my advice: ✨ Don’t rush. ✨ Keep building. ✨ Break things. ✨ Then fix them again, that’s where the real learning happens. #ReactJS #FrontendDevelopment #LearningJourney #WebDevelopment #ReactRouter #JavaScript #CodingInPublic

🎯#90DaysOfCode Challenge | Day 8/90 For Day 8, I tackled a classic but essential application: a fully functional To-Do App, built with HTML+CSS and JavaScript I'm excited to apply these principles as I learn the MERN Stack guided by resources from Rohit Negi and the CoderArmy community. Managing tasks effectively is key to productivity, and building this app was a fantastic exercise in handling dynamic data and user interactions. Here’s a deeper look at the core functionalities and learnings: ⚙️ Implementing Client-Side CRUD: This project provided solid practice for CRUD (Create, Read, Update, Delete) operations purely on the client-side: * Create: Adding new tasks to the list. * Read: Displaying all tasks, with filtering options. * Update: Toggling the completion status of tasks. * Delete: Removing individual tasks or clearing all completed ones. This involved significant work with JavaScript array manipulation (map, filter). 💾 Data Persistence with localStorage: To make the app practical, I implemented localStorage to save the user's tasks. Now, tasks aren't lost when the browser is closed – a crucial feature for any real-world application. ✨ Dynamic UI Rendering & Filtering: The UI updates instantly as tasks are added, completed, or deleted. I also built filtering logic (All / Active / Completed) which dynamically re-renders the list based on the selected filter, providing a smooth user experience. 🧠 Practicing State Management (Vanilla JS): Managing the array of to-do items, their statuses, and the current filter felt like foundational practice for the state management concepts I'll encounter in React. ➖Building these core features in vanilla JS provides a strong base for understanding how things work under the hood. It makes me appreciate the abstractions that frameworks offer. live demo: https://lnkd.in/ga7k4R-z #90DaysOfCode #JourneyToFullStack #WebDevelopment #Frontend #JavaScript #CRUD #LocalStorage #StateManagement #Productivity #MERNStack #RohitNegi #CoderArmy #CodingChallenge #Day8

Learning React with TheMealDB API In the early days of my React learning journey, I wanted to understand how to work with APIs, manage data, and use React hooks effectively. ⚛️ So, I built a Meal Finder Website using the TheMealDB API 🍛 Through this project, I learned how to: 🔹 Use the useEffect hook to fetch data from an external API 🔹 Manage and update state with useState 🔹 Handle asynchronous functions in React 🔹 Build a dynamic UI that displays meal categories, details, and search results This project really helped me understand how React interacts with real-time data and made me more confident in handling APIs and side effects. 🚀 💻 Tech Stack: React, TheMealDB API, HTML, CSS, JavaScript 🌍 Live Demo: https://lnkd.in/gYHqm_H5 💾 GitHub Repo: https://lnkd.in/g6-pVjRc #React #JavaScript #FrontendDevelopment #useEffect #APIIntegration #LearningJourney #WebDevelopment #BuildInPublic

Day 2: Learning React Hooks Today I learned about React Hooks, and it really helped me understand how React works. Hooks are special functions that let us use React features (like state and lifecycle methods) inside functional components. Before Hooks, developers used class components to manage data and logic. But with Hooks, we can do all of that in a much simpler way using just functions. Here are a few Hooks I learned today: 👉 useState – helps us add and update data inside a component. 👉 useEffect – runs code when something changes (for example, fetching data or updating the DOM). 👉 useRef – helps us directly access HTML elements or store values without re-rendering. I really like how Hooks make React code cleaner, shorter, and easier to understand. Excited to keep learning more Hooks like useContext and useReducer next! 🚀 #React #ReactHooks #WebDevelopment #LearningJourney #FrontendDevelopment

🚀 Day 29 of my Web Development Journey (Cohort 2.0, Sheryians Coding School) Today’s session was all about solving assignments and strengthening our JavaScript fundamentals. We worked through a hands-on exercise that covered everything from basic syntax to understanding how JS interacts with the browser. Here’s a quick overview of what the assignment included: • Introduction to JavaScript & Linking JS with HTML : Exploring document.title, using alert() and understanding what role JavaScript plays in a webpage. Practiced connecting external JS files, and learned how defer affects script execution.  • Browser Console Experiments : Used the console to run quick JS commands and understand how the interpreter works. • Variables and Keywords : Deep dive into var, let, and const, along with scoping behavior and reassignment rules. • Logging & Interaction : Used console.log, alert, and prompt to create simple user interactions. • String Operations : Tried out slice, split, replace, and template literals to manipulate strings dynamically. • Statements & Comments : Explored how JavaScript handles statements, semicolons, and how comments help organize code. • Expressions vs Statements : Differentiated between operations that produce values and those that perform actions. • Data Types : Practiced identifying different types like number, string, boolean, object, undefined, and symbol. • Special Values : Worked with Infinity, NaN, null, and undefined to understand JS quirks. • Primitive vs Reference Types : Observed how copying works differently for values and objects, and visualized it through memory diagrams. 💡 It was a concept-heavy but fun session : great revision of everything we’ve learned so far and a solid step toward mastering the fundamentals of JavaScript! Stay tuned 🔥 ❤️ #WebDevelopment #Cohort2 #SheriansCodingSchool #LearningInPublic #HTML #CSS #FrontendDevelopment #BackendDevelopment #FullStackDevelopment #LearningJourney

Learning React can feel overwhelming with all the new terms, patterns, and frameworks floating around. That's why I appreciated stumbling upon this comprehensive React handbook that cuts through the noise. What I found most valuable is how it focuses purely on React's core concepts—no unnecessary frameworks or distractions. Once you grasp these fundamentals, you gain the confidence to build anything from small components to full-stack applications. The guide breaks down complex topics like JSX, hooks, and rendering into digestible sections with practical examples. I particularly liked the clear explanations of state vs refs vs variables—a common point of confusion for many developers. As someone who works with React regularly, I still found some useful reminders about best practices like: - Using stable IDs for keys when rendering lists - Understanding React's component lifecycle (trigger → render → commit → paint) - Choosing the right styling approach for your project Whether you're just starting with React or looking to strengthen your fundamentals, this handbook provides a solid foundation. It's one of those resources that makes you think, "Why didn't I understand this concept this way before?" #React #JavaScript #WebDevelopment #Frontend #Programming #Developer

💡 Even Though I Couldn’t Complete This Project… I Learned A Lot! 🚀 Sometimes failure teaches more than success 💪 While working on my recent Product List Cart Project, I faced many challenges and couldn’t complete it fully — but the journey was full of valuable lessons. Here’s what I discovered 👇 ✨ I used a lot of createElement() — and that helped me understand how to dynamically handle DOM elements in JavaScript. It almost felt like working with React, where you structure components and update the UI efficiently. 🔍 After exploring a few GitHub repositories, I realized the importance of writing modular JavaScript — breaking logic into smaller, reusable parts. So, I created a separate file called createElement.js and added this reusable function. export const createElement = (element, className, elContent) => {   const createEl = document.createElement(element);   createEl.classList.add(className);   createEl.innerHTML = elContent;   return createEl; }; Now I can simply use it like this: createElement("div", "your-cart-item", yourCartContent); Live Site:https://lnkd.in/eqf-5MPj GitHub Repo:https://lnkd.in/e7wSUrq4 #JavaScript #FrontendDevelopment #WebDevelopment #100DaysOfCode #LearnInPublic #CodeNewbie #DevCommunity #JSNewbie #ProgrammingJourney #TechLearning #BuildInPublic #DeveloperJourney #FailForward #FrontendMentor #HML #CSS #VanillaJS

🚀 Day 26 of my Web Dev Journey Today at Cohort 2.0 (Sheryians Coding School), Harsh Vandana Sharma bhaiya introduced us to the history and basics of JavaScript, the language that powers the web 🌐 Here’s what I learned 👇 🧠 A little history • JavaScript was created by Brendan Eich while working at Netscape. • Amazingly, he built it in just 15-16 days 😲 • But because it was made so quickly, it had many issues and bugs, which were later fixed through multiple versions. • The biggest evolution came with ES6 (ECMAScript 6), a version that completely changed JS and made it much more powerful and modern. 💻 Why JavaScript matters • JavaScript (JS) is a scripting language, a way for humans to communicate with computers. • It brings life to websites, adding animations, interactions, and validations. • Practically every type of engagement on a webpage uses JavaScript. How JS runs • JavaScript was originally built to run inside browsers. • We can link JS files to HTML using the <script> tag. • You can also run JS directly in the browser console using Ctrl + Shift + I. Some basics we covered today: • Keywords: var, let, const • Console methods: console.log() → to print, console.error() → to show an error, console.warn() → to show a warning • User interaction:  prompt() → to take user input, alert() → to show an alert message Strings and their methods: • Anything inside quotes is a string. • Common string methods: .slice(), .replace(), .split(), .includes(), and template literals (backticks `, also known as template strings). Every session adds a new layer of understanding, and today was all about building the foundation for JavaScript 💪 Excited to dive deeper into this amazing language in the upcoming days! Stay tuned 🔥 ❤️ #WebDevelopment #Cohort2 #SheriansCodingSchool #LearningInPublic #HTML #CSS #FrontendDevelopment #BackendDevelopment #FullStackDevelopment #LearningJourney

🚀 Understanding map(), filter() & reduce() — finally makes sense 😅 When I first started learning JavaScript, these three functions — map(), filter(), and reduce() — honestly felt like magic spells 🪄 that everyone said were “super important for React.” But for me? Total confusion at first. 😵 Then last night, I found this amazing video that explained everything step-by-step 👇 🎥 https://lnkd.in/gnMXj99Z After watching it, I started writing small code snippets for each function — and that’s when things finally clicked! 💡 Here’s how I understand them now: ✨ map() → transforms each element in an array (like converting all prices into discounts) ✨ filter() → picks only the elements you need (like filtering completed todos) ✨ reduce() → combines everything into one value (like summing up scores) Now I get why everyone calls them must-know functions — once you understand the logic, your JS code becomes cleaner, shorter, and way smarter 💻 If you’re a frontend dev (or learning React), seriously — take an hour, watch a video, and play around with these three. You’ll thank yourself later. 🙌 👉 Also, here’s the official MDN documentation if you want to go deeper: 📘 https://lnkd.in/gPZcKwFX #JavaScript #ReactJS #WebDevelopment #FrontendDev #LearningInPublic #CodingJourney #map #filter #reduce

🚀 React Learning Update – Event Handling in React! Today I practiced how different React events work and how to trigger functions inside a component. I wrote a small component where I used multiple event handlers to understand how React responds to user interactions. Here’s what I learned from this code: 🔹 Calling functions on button click (onClick) 🔹 Triggering actions when mouse enters a button (onMouseEnter) 🔹 Detecting scroll activity using (onWheel) 🔹 Tracking user input with (onChange) 🔹 Handling continuous mouse movement (onMouseMove) 🔹 Creating inline functions directly inside JSX 🔹 Understanding event objects like elem.target.value This hands-on practice helped me understand how React handles events just like JavaScript but in a more organized, component-based way. Step by step becoming more comfortable with React! ⚛️✨ #ReactJS #FrontendDevelopment #WebDevelopment #LearningEveryday #JavaScript #ReactDeveloper #DeveloperJourney