Week 8 at TEACH2GIVE Building a Stronger Foundation in React: useState and useEffect This week, I spent time deepening my understanding of React Hooks — specifically useState and useEffect. We began by setting up a new React TypeScript project from scratch. It might sound simple, but even that process came with small challenges, naming conventions, folder structure, and how React scaffolding works behind the scenes. Fixing these early mistakes helped build confidence in managing a React environment from the terminal all the way to a running local app. Once the setup was stable, we focused on useState. This hook introduced a clean way to handle dynamic data in components. I learned how it replaces class-based state management with something much simpler, letting each component remember its own state without extra boilerplate. What stood out was how small state updates trigger re-renders, keeping the UI always in sync with data. The next phase was understanding useEffect. This one clicked when I realized it’s all about side effects, code that runs after React updates the DOM. We explored several real-world uses: ~Fetching data from an API. ~Running timers or intervals. ~Cleaning up subscriptions when a component unmounts. ~Responding to changes in state or props dynamically. Our trainer Brian Kemboi emphasized that useEffect isn’t just a feature, it’s a mindset. It teaches you to think about when and why your code should react to change. We practiced a few scenarios to see how different dependency arrays ([], [variable], and no array at all) affect the behavior of the effect. Seeing the outcomes firsthand helped the logic sink in. By the end of the session, the main takeaway was clear: mastering useState and useEffect means mastering React’s core idea, reacting to data changes gracefully. These two hooks form the foundation for nearly everything else in modern React development. It was a reminder that learning to code isn’t only about syntax, it’s about developing the discipline to understand the flow of data, the sequence of updates, and how small details shape the user experience. #React #FrontendDevelopment #JavaScript #WebDevelopment

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

🚀 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

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

React Learning Series – Components & JSX ⚛️ Before React felt natural, JSX did. I’ve been working through Academind’s React – The Complete Guide and this week I focused on the basics: components, props, lists, and simple state—and it finally clicked how close JSX is to JavaScript with superpowers. Tiny wins from this week (see site screenshot): • Built a few function components and rendered them with JSX • Passed props to make components reusable (titles/values) • Rendered lists with keys and added simple conditional UI • Wired up event handlers directly in JSX (onClick) • Kept components pure and pushed side effects elsewhere Why this matters for React: • Props + composition → scalable UIs without duplication • Keys & conditionals → predictable, correct rendering • Updater-style state changes → fewer bugs as apps grow Code: [https://lnkd.in/e5jQZ8sf] (I’ll also drop it in the first comment.) Up next: a deeper dive into React Essentials #ReactJS #Frontend #WebDevelopment #LearningInPublic #ReactHooks

⚙️ Tool’sday Talk: What I Wish I Knew Before Learning ReactJS When I first picked up ReactJS, I wanted to build everything. Social media clones, e-commerce platforms, flight trackers, dashboards—you name it, I wanted to code it. The result? Analysis paralysis. I was learning a hundred things at once, building nothing, and slowly burning myself out in the process. If I could go back, here’s what I’d tell myself (and anyone learning React): 1. Have a Clear Goal. Don’t just “learn React.” Learn React for something. Whether that’s to build your portfolio, get a frontend job, or create a specific project—clarity kills confusion. Don’t Try to Build the Next Big Thing. You don’t need to create the next Facebook or Netflix clone to prove you’re skilled. Build small, consistent, meaningful projects. That’s where mastery grows. 2. Understand JavaScript Deeply. React is just JavaScript with superpowers. The more fluent you are in JS (array methods, async logic, destructuring, etc.), the smoother your React learning curve will be. 3. Focus on Components, Not Chaos. Don’t dive into Redux, React Query, or Context too early. Learn how to write clean, reusable components first—it’ll make scaling easier later. 4. Version Control is Your Friend. Commit often. Branch smart. Break things confidently. GitHub is not just a backup—it’s your dev diary. 5. Don’t Compare Your Progress. Someone’s “Day 30” might be your “Day 300.” It doesn’t matter. Build, break, fix, repeat—that’s how every great React dev started. React isn’t a race. It’s a rhythm. And once you find your groove, that’s when the magic starts happening. ✨ #ToolTuesday #ReactJS #FrontendDevelopment #WebDevTips #JavaScript #LearnToCode #DevJourney #ReactDeveloper #BuildInPublic #WebDevelopment #CodingCommunity #TechNigeria #FrontendEngineer #UIUX #ProgrammingTips #DeveloperLife

🚀 Excited to share my latest project: SmartQuizApp! A React-based responsive quiz application designed for placement prep and skill improvement. It features: ⏱ Timed quizzes to simulate real exam conditions 📝 Dynamic scoring for instant feedback 📊 Progress tracking to monitor improvement 📱 Fully responsive on both mobile and desktop 🔄 Retake quizzes to boost your score ⚛️ Built with React Context API for efficient state management 💻 Tech Stack: React, JavaScript (ES6), HTML, CSS, Vite, deployed on GitHub Pages. 📂 Explore the code here: https://lnkd.in/e7hJn_sr 🌐 Live Demo: https://lnkd.in/e8MdenFf #ReactJS #WebDevelopment #PlacementPrep #JavaScript #FrontendDevelopment #OpenSource #Coding

🔥 Day 14 — The Power of Consistency Meets Code! 🎯 Today, I gave QuizNova something every learner loves — motivation to show up daily. 💪 Because progress shouldn’t just be tracked… it should be celebrated! 🏆 🚀 Day 14 – Notifications + Daily Challenges + Streak System (Gamification Update) This update turns QuizNova into a habit-forming learning app — just like Duolingo or LeetCode, but built with pure MERN Stack magic. ⚡ 💡 What I Built Today: ✅ Daily Challenge API + UI — Auto-generates a fresh JavaScript question every day 🧠 ✅ Streak System 🔥 — Tracks consistency, awards XP, and celebrates daily wins with confetti + motivational toasts ✅ Smart Notifications — “⚡ Don’t forget your Daily Challenge!” (because accountability = progress) ✅ Dynamic Navbar + Polished UI — Responsive, smooth, and dopamine-packed ✨ 🧠 Tech Stack React ⚛️ | Tailwind CSS 💅 | Node.js 🚀 | Express.js | MongoDB 🍃 | React Hot Toast | Canvas Confetti 🎉 💬 Result: Now, every user gets a new challenge daily, builds streaks, earns XP, and feels rewarded for learning — not just completing. It’s not just a quiz app anymore — it’s a learning game that values consistency 🕹️ “Consistency is the new skill — and today, I built a system to reward it.” 💎 🔥 Next (Day 15): – Final Day: Deployment + Portfolio + Resume & Interview Prep Setup next? 🚀 #MERN #ReactJS #NodeJS #MongoDB #FullStackDeveloper #WebDevelopment #100DaysOfCode #Gamification #CodingJourney #OpenSource #JavaScript #DeveloperLife #LearningByBuilding #DuolingoForDevs #QuizNova #HabitBuilding

React.js Cheatsheet – Your Quick Guide to Building Faster Master React essentials at a glance 👇 ⚡ Hooks • Props • State • Lifecycle ⚡ JSX • Events • Components • Routing ⚡ Best Practices for clean, scalable apps Keep this handy whether you’re just starting out or leveling up your React skills. 👉 Perfect for developers who want speed + clarity without endless documentation! --------------------------------------------------------- 🎥 Free YouTube Courses (Hindi) – by Mohit Decodes 💻 React 19 Full Course: https://lnkd.in/dhj7SXsy 💻 JavaScript Full Course: https://lnkd.in/eUAtWCD5 💻 HTML Full Course: https://lnkd.in/dWxCrT8q 💻 CSS Full Course: https://lnkd.in/deBZwe6n 💻 Git & GitHub Copilot Full Course: https://lnkd.in/dYMgdsuq 💻 Node.js Full Course: https://lnkd.in/dXZ4KWCd 💻 Python Full Course: https://lnkd.in/d4XJkGet 💻 Django Full Course: https://lnkd.in/dCBSyBHd --------------------------------------------------------- 🌟 Happy Learning! If you found this post helpful 👇 1️⃣ Join WhatsApp for more Free AI & Tech Courses → https://lnkd.in/dFyqKJU3 2️⃣ Follow Mohit Kumar for more such content #ReactJS #JavaScript #FullStackDevelopment #FreeCourses #AICourses #AICommunity #Upskill #CareerGrowth #LinkedInLearning #WebDevelopment #FrontendDeveloper #MohitDecodes

🚀 Day 6 | React Learning Journey (Mini Project Build) After completing Day 5, I decided to bring together all the topics I’ve learned so far and build a mini React project using them 🙌 This small project helped me revise and connect multiple React concepts in one place, including: 🔹 useState Hook 🔹 Conditional Rendering 🔹 Props 🔹 Lifting State Up (Sharing data between child and parent components) 🔹 Dynamic List Rendering (with Add/Delete functionality) 🔹 Controlled Inputs 💡 It was a great hands-on exercise to understand how data flows between components and how React handles updates efficiently. Here’s a quick look at the UI 👇 #React #JavaScript #MERNStack #FrontendDevelopment #ReactHooks #LearningJourney #WomenInTech #CodingInPublic