30 Day React Journey: Building Reusable UI Blocks

🚀 Day 1 of My React Learning Journey: What is React? I’ve started learning React today, and here’s a simple breakdown 👇 🔹 What is React? React is a JavaScript library used to build dynamic and interactive user interfaces, especially for single-page applications (SPAs). 🔹 Why is React so popular? Component-based architecture (reusable UI parts) Virtual DOM for faster performance Easy to build scalable applications Strong community support 🔹 Key Concept Instead of updating the entire page, React updates only the parts that change — making apps faster and smoother ⚡ 🔹 Simple Example function App() { return <h1>Hello, React!</h1>; } 💡 My Takeaway: React makes UI development more structured and efficient compared to plain JavaScript. 📌 This is just the beginning—next I’ll be learning about JSX! 👉 Follow my journey as I learn React step by step 🚀 #React #JavaScript #WebDevelopment #Frontend #LearningInPublic #100DaysOfCode

🚀 Day 12 of My React JS Journey – Understanding State Deeply ⚛️ Today I strengthened my understanding of the core concept in React — State. 🔹 What is State? State represents the data in a React application that can change over time. Whenever the state changes, React automatically re-renders the component, updating the UI. 💡 Key Learnings: ✔ State is mutable (updated using setter function) ✔ State is local to a component ✔ State is reactive (UI updates automatically on change) 🔹 Creating & Managing State: Step 1: JavaScript import { useState } from "react"; Step 2: JavaScript const [value, setValue] = useState(initialValue); • value → holds current state • setValue → updates the state ⚠️ Important Insight: State updates are asynchronous ⏳ JavaScript setValue(5); console.log(value); // still old value This helped me understand how React processes updates internally. ⚛️ Behind the Scenes: React uses Virtual DOM ✔ Creates a virtual copy of UI ✔ Compares changes efficiently ✔ Updates only required parts 👉 This makes React fast and efficient 🚀 💭 Today’s Takeaway: State is the backbone of dynamic UI in React. Mastering state means mastering how React works. Learning step by step and building strong fundamentals every day 📈🔥 #ReactJS #FrontendDevelopment #JavaScript #WebDevelopment #ReactState #VirtualDOM #LearningJourney #DeveloperGrowth

Multi-page navigation in React is something most tutorials skip right over. So I built a project specifically around it. 16-web-editorial-layouts is a TypeScript + React application demonstrating production-ready multi-page navigation patterns — the kind of editorial layout structure you see in content-heavy platforms, but rarely in tutorial projects. Key technical choices: • TypeScript throughout for type-safe routing and component props • React client-side routing for navigation without full page reloads • Editorial layout patterns: hierarchical content, nested routes, persistent navigation • Clean separation between layout components and page content The insight: most React tutorials show you how to build a component. Very few show you how to structure a multi-page app so navigation feels native, state persists correctly, and layouts compose cleanly. This project fills that gap. What navigation pattern do you find most underrepresented in React tutorials? #TypeScript #React #WebDevelopment #Frontend #JavaScript

I Finally Understood useEffect… Somehow A few days deeper into React, and things are starting to click, not perfectly, but enough to feel real progress. At first, hooks felt confusing. Especially useEffect. Why does it run? When does it run? Why does it run again? It didn’t make sense… until I stopped overthinking it and started building. Here’s what I’ve worked on so far: -> useState Understanding how state drives UI changes made everything feel more dynamic and controlled. -> useEffect Still not “mastered”, but now I understand how it handles side effects, especially API calls and controlled execution. -> Built small apps Counter app (state updates, re-rendering) Meme generator (API hit using useEffect, dynamic content, event handling) These small builds did more than tutorials ever could, they forced me to connect the dots. The biggest shift? I have stopped trying to memorize React… and started trying to think in React. Still early, but now it feels like direction instead of confusion. Next: Better structure, deeper hooks, and more real-world projects. For developers: How do you clearly decide when to use useEffect, and when not to? #ReactJS #FullStackDeveloper #WebDevelopment #BuildInPublic #JavaScript #LearningJourney

🔔 𝐌𝐨𝐬𝐭 𝐛𝐞𝐠𝐢𝐧𝐧𝐞𝐫𝐬 𝐡𝐞𝐚𝐫 𝐚𝐛𝐨𝐮𝐭 𝐑𝐞𝐚𝐜𝐭 𝐞𝐯𝐞𝐫𝐲𝐰𝐡𝐞𝐫𝐞… 𝐁𝐮𝐭 𝐯𝐞𝐫𝐲 𝐟𝐞𝐰 𝐚𝐜𝐭𝐮𝐚𝐥𝐥𝐲 𝐮𝐧𝐝𝐞𝐫𝐬𝐭𝐚𝐧𝐝 𝐰𝐡𝐚𝐭 𝐢𝐭 𝐫𝐞𝐚𝐥𝐥𝐲 𝐢𝐬. 🟢 So here’s a simple explanation 👇 React is a JavaScript library used to build user interfaces — especially fast and interactive web apps. Instead of writing messy DOM code again and again, React lets you break your UI into small reusable components. Think of it like LEGO blocks 🧩 Build once → reuse everywhere. 💡 Why developers prefer React: • Component-based structure (clean & scalable) • Virtual DOM (fast updates ⚡) • Declarative approach (less confusion) • Huge ecosystem & community 🤔 React vs Vanilla JavaScript With vanilla JS: You manually update the UI (complex + error-prone) With React: You just define what the UI should look like React handles the rest. ⚠️ One important thing: React is NOT a framework. It’s a library. But when combined with tools (like routing, state management), it becomes powerful enough to build full-scale applications. 🎯 My takeaway: React is easy to start, but takes time to truly master. If you're serious about frontend development, learning React is almost non-negotiable in 2026. I’ve also created a carousel breaking this down visually 👇 (Will help you understand faster) If this helped, consider: 🔁 Reposting for others 💬 Sharing your thoughts 📌 Saving for later #React #WebDevelopment #Frontend #JavaScript #Coding #SoftwareEngineering #LearnToCode #Developers

🚀 Understanding useEffect in React — Simplified! If you're working with React, mastering useEffect is not optional— 👉 It controls how your app interacts with the outside world. 💡 What is useEffect? useEffect is a hook that lets you perform side effects in components. 👉 Side effects include: API calls Event listeners Timers DOM updates ⚙️ Basic Syntax useEffect(() => { // side effect logic }, [dependencies]); 🧠 How it works 1️⃣ Runs after component renders 2️⃣ Re-runs when dependencies change 3️⃣ Cleanup runs before next effect or unmount 🔹 Example useEffect(() => { console.log("Component mounted or updated"); }, []); 👉 Runs only once (on mount) 🔹 With Dependency useEffect(() => { console.log("Count changed"); }, [count]); 👉 Runs when count changes 🔹 Cleanup Function useEffect(() => { const timer = setInterval(() => { console.log("Running..."); }, 1000); return () => clearInterval(timer); }, []); 👉 Prevents memory leaks 🧩 Real-world use cases ✔ Fetching API data ✔ Subscribing to events ✔ Setting intervals / timeouts ✔ Syncing with external systems 🔥 Best Practices (Most developers miss this!) ✅ Always use dependency array correctly ✅ Cleanup side effects properly ✅ Split multiple effects into separate useEffects ❌ Don’t ignore dependencies (can cause bugs) ❌ Don’t overuse useEffect unnecessarily ⚠️ Common Mistake useEffect(() => { fetchData(); }, []); 👉 If fetchData depends on props/state → can cause bugs 💬 Pro Insight useEffect is not just about running code— 👉 It’s about syncing your component with external systems 📌 Save this post & follow for more deep frontend insights! 📅 Day 13/100 #ReactJS #FrontendDevelopment #JavaScript #ReactHooks #useEffect #WebDevelopment #SoftwareEngineering #100DaysOfCode 🚀

I learnt a lot doing this project. Understood the use of React like never before and how certain features are utilized. Features: -> Drag-and-drop tasks across the Todo, Working, Completed columns using a React Library -> Add, edit, and view tasks with modals -> State management using React Context -> Persistent tasks with localStorage -> Learned advanced React hooks, context, and dynamic UI handling This project helped me level up my React skills and understand interactive, state-driven UIs. React Todo Website: https://lnkd.in/eXKm3Hqn Check it out on GitHub: https://lnkd.in/exiv6Tpv #ReactJS #Frontend #WebDevelopment #UIUX #TodoApp #JavaScript

💸 Built an Expense Tracking App using React, TypeScript & Tailwind CSS! I wanted to improve my understanding of state management and TypeScript in real-world scenarios, so I built this expense tracker. 📊 Features: - Add expenses with title, category, amount & date - View and manage all expenses easily - Automatic calculation of total expenses - Clean and responsive UI with Tailwind CSS 💡 What I learned: - Managing structured data using TypeScript - Handling form inputs and state efficiently in React - Writing cleaner, more maintainable code - Building practical, real-world applications This project helped me understand how small features combine to create useful tools. #React #TypeScript #TailwindCSS #WebDevelopment #Frontend #LearningJourney

⚡Day 1 of My React Learning Journey: What is React? I've started learning React today, and here's a simple breakdown What is React? React is a JavaScript library used to build dynamic and interactive user interfaces, especially for single-page applications (SPAs). Why is React so popular? Component-based architecture (reusable Ul parts) Virtual DOM for faster performance Easy to build scalable applications Strong community support Key Concept Instead of updating the entire page, React updates only the parts that change - making apps faster and smoother Simple Example function App() { } return <h1>Hello, React!</h1>; My Takeaway: React makes Ul development more structured and efficient compared to plain JavaScript. This is just the beginning-next I'll be learning about JSX!⚡ + Follow my journey as I learn React step by step #React #JavaScript #WebDevelopment #Frontend #LearningInPublic #100DaysOfCode

🚀 Built a To-Do App using HTML, CSS & JavaScript(basic) ✨ Features: ✔ Add tasks dynamically ✔ Delete tasks with one click ❌ ✔ Clean and simple UI 🧠 Key Learnings: * DOM manipulation * Event handling * Improving logic building Excited to build more real-world projects and grow as a developer 🚀 #WebDevelopment #Frontend #Projects #Learning