Day 19 of Learning React – React Router Basics Today I learn the basics of React Router and how it helps manage navigation in a React application. I practiced creating multiple pages and setting up routes to switch between them without reloading the page. Understanding how client-side routing works made the app feel smoother and more dynamic. Seeing different components render based on the URL made my project feel more like a real website. Step by step, moving closer to building complete applications. #React #ReactRouter #ReactJS #WebDevelopment #Frontend #LearningInPublic #100DaysOfCode

🚀 Built a Dynamic Box Creator with React.js I recently developed a Dynamic Box Creator App with React.js, allowing users to create various boxes dynamically by entering the number of boxes, entering custom text, and selecting a box color. This project assisted me in improving my React state management, events, and dynamic rendering skills. 🔹 Features of the Application: Enter the number of boxes to create Enter custom text to display inside boxes Select a color for boxes Click Add to dynamically create boxes Beautiful, clean, and responsive UI This application assisted me in better understanding React hooks, dynamic components, and interactive user interface concepts. 💻 GitHub Repository: https://lnkd.in/dwwfbZgv 🌐 Live Demo: https://lnkd.in/dyUh2z23 I continue to develop more projects to improve my React and front-end development skills. #React #ReactJS #JavaScript #FrontendDevelopment #WebDevelopment #Coding #SoftwareDeveloper #GitHub #OpenSource #LearningInPublic Coding Thinker

When I first learned about useMemo, I thought: “Great! This will make my React app faster.” So I started adding it everywhere 😅 But later I realized something important: 👉 useMemo is not always necessary. Example: ❌ Overusing useMemo const doubled = useMemo(() => count * 2, [count]); For a simple calculation like this, React is already fast enough. Using useMemo here actually adds unnecessary complexity. ✅ useMemo is useful when: Expensive calculations Large lists filtering/sorting Preventing unnecessary re-renders in heavy components Example: const filteredUsers = useMemo(() => { return users.filter(user => user.active); }, [users]); The real lesson I learned: Optimization should come after clarity. First write clean code. Then optimize when needed. What’s your rule for using useMemo? #ReactJS #ReactHooks #FrontendDevelopment #JavaScript #WebDevelopment

React is just not about useState👀 My App.jsx had become a mess — multiple useEffects, auth checks, socket connections, loading states… everything in one place. It worked, but reading it felt like debugging a jungle 😅 That’s when it hit me — this is exactly where custom hooks shine. Instead of stuffing all logic inside components, we can extract it into reusable hooks like: useAuth() → handles user + login state useSocket() → manages connection & events useLoading() → controls loaders Basically turning this 👇 👉 one giant useEffect into this 👇 👉 clean, readable, modular logic What I love about custom hooks is: They clean up components They remove duplication And they make your code feel more like building blocks than chaos Also an underrated point: 👉 Custom hooks don’t share state, they just share logic. (React) That means every component still stays independent, which is exactly what we want. Still learning, but this small shift already made my code 10x better. If you’re writing long useEffects… that’s probably your signal to create a hook ⚡ #ReactJS #FrontendDevelopment #WebDevelopment #CodingJourney #JavaScript

🎬 Building a Movie App with React.js Recently I built a Movie Application using React.js that allows users to search and explore movies with real-time data. Key things I learned while building this project: • How to integrate a third-party movie API • Handling dynamic data in React components • Designing responsive UI for better user experience • Managing application state efficiently Projects like these help developers understand how real applications fetch and display live data. Next, I’m planning to improve this project by adding movie categories, favorites, and better UI interactions. If you are learning React too, what project are you currently building? #reactjs #webdevelopment #javascript #frontenddevelopment

Just published my first npm package: av-toastx I built av-toastx, a lightweight and customizable React toast notification library designed to make showing notifications in React apps simple and clean. 🔔 Features • Lightweight and fast • Simple React hook API • Multiple toast notifications support • Easy integration with any React project • Clean and customizable UI 🔗 Check it out on npm https://lnkd.in/gZcuk-29 This is my first step into building and publishing open-source tools for developers. I'm excited to keep improving it and adding more features. If you're building React apps and need a simple toast notification system, give it a try 🙌 Feedback, suggestions, and contributions are welcome! #opensource #reactjs #javascript #webdevelopment #npm #frontend #buildinpublic

Week 1 of learning Next.js in public. I recently started the JavaScript Mastery Next.js course and this week I focused on understanding the fundamentals of the framework. Key things I learned: • What a framework is and how it helps structure applications • Why Next.js is used with React for production-ready apps • File-based routing and how it simplifies navigation • The concept of server vs client rendering One thing I found interesting is how file-based routing keeps the project structure much cleaner compared to manually managing routes in React. #NextJS #WebDevelopment #LearnInPublic #React

🚀 Just built a full-featured Todo App in React! ✅ Add, Edit & Update tasks ✅ Mark tasks as Complete / Pending ✅ Filter by All / Completed / Pending ✅ Persistent data with LocalStorage ✅ Clean UI with counters & interactive buttons This project helped me strengthen my React skills, state management, and UI handling. 🌟 Source Code: 👉https://lnkd.in/dSRsWdeM Muhammad Osama Saylani Mass I.T Training (S.M.I.T) #ReactJS #WebDevelopment #JavaScript #FrontendDevelopment #CodingJourney #ProjectShowcase #TodoApp

🚀 Just built a Sticky Notes App using Next.js 16 + TypeScript I recently created StickyBoard, a feature-rich sticky notes application focused on clean UI and smooth user experience. ✨ Key Features: 📝 Create, edit, and delete notes instantly 🎨 5 color themes for better organization 🌙 Dark / Light mode with system preference detection 🔍 Live search across notes 📱 Fully responsive masonry layout 💾 Notes persist using localStorage ⚡ Instant updates without saving 🆕 New Feature Added Drag & Drop notes to easily reorder them. 🛠 Tech Stack: Next.js 16 (App Router) TypeScript CSS Modules GitHub Actions (CI/CD) Vercel Deployment 🌐 Live Demo: [https://lnkd.in/gfp8rsjj] 💻 GitHub Repository: [https://lnkd.in/gEtm3GcR] Would love to hear feedback from the community! #NextJS #ReactJS #WebDevelopment #FrontendDeveloper #TypeScript #JavaScript #BuildInPublic

🚀 Built a React Quote Generator! I created a simple Quote Generator Web App using React that fetches random quotes from an API. 🔹 Features: • Random quote generator • Clean UI with gradient background • Built using React Hooks (useState & useEffect) 🔹 Tech Stack: React | JavaScript | CSS | Fetch API 🔗 GitHub Repository: https://lnkd.in/gFAKmCXR #react #javascript #webdevelopment #frontenddeveloper #coding #projects