React and Tailwind CSS: Simplifying UI with Smaller Components

While starting to learn React, I decided to keep things simple. I built the same Todo List twice with the same UI design: First using pure JavaScript, Then rebuilding it with React. This helped me clearly see the difference between: • JavaScript DOM manipulation • React’s component-based thinking Project features: • Add new tasks • Delete tasks • Toggle task completion • Search tasks • Filter tasks (All / Completed / Not Completed) Small project, but a big learning step for me. Live Demo: JS version: https://lnkd.in/ebWQRNar React version: https://lnkd.in/eJt2Svj7 #React #JavaScript #FrontendDevelopment #WebDevelopment #LearningInPublic #TodoApp

Today something interesting happened while I was building a Custom Date Picker in NextJS.🗓 I have used useRef many times before, but honestly I was mostly using it without fully understanding the concept behind it But today… it finally clicked.💫 While implementing the feature, I realized that: • useRef creates a mutable object • The value is stored inside .current • The value persists between renders • Updating .current does not trigger a re-render • It can also be used to directly access DOM elements The most interesting part for me was understanding why React doesn't re-render when current changes. Sometimes you don’t truly understand a concept until you build something real with it. Small learning today, but a very satisfying one. 💫 What was the React concept that took you the longest to understand❓️ #React #JavaScript #FrontendDevelopment #ReactHooks #BuildInPublic #LearningJourney

Today I focused on improving my understanding of: ⚡ React component structure ⚡ Reusable UI patterns ⚡ Proper folder organization in large projects ⚡ Clean Tailwind styling without messy class overload One small improvement I made: Instead of writing repetitive UI code, I created reusable components and passed props dynamically. It made my code cleaner and easier to scale. Learning this made me realize: Good frontend development is not about making it work — it's about making it maintainable. Building consistently. Improving daily. 💻🔥 #ReactJS #FrontendDeveloper #JavaScript #TailwindCSS #WebDevelopment #LearningInPublic #SheryiansCodingSchool #FullstackDevelopment

Why can’t we create a state variable outside the component function? const [count, setCount] = React.useState(0); ❌ function Counter() { return <div>{count}</div>; } function Counter() { const [count, setCount] = React.useState(0); ✅ return <div>{count}</div>; } Why? Because Hooks rely on the component’s render cycle. When React renders a component, it: 1️⃣ Calls the component function 2️⃣ Tracks the order of Hooks 3️⃣ Stores state internally based on that order Hooks are tightly connected to the component’s lifecycle. If you declare state outside: ❌ There is no render context ❌ No component lifecycle ❌ React can’t track it #ReactJS #ReactHooks #ReactInternals #FrontendDevelopment #JavaScript #SoftwareEngineering #WebDevelopment #LearningInPublic #ReactInterview #FrontendEngineer #TechInterview

🚀 Just built a clean Login & Signup UI using React.js, TypeScript, and Tailwind CSS! Here's what's packed inside: ✅ Fully responsive Login & Signup pages ✅ Built with React.js + TypeScript for type-safe, scalable code ✅ Styled with Tailwind CSS for a modern, clean look ✅ Smooth user experience with form validation TypeScript has been a game-changer for catching bugs early, and Tailwind makes styling so much faster — no more writing custom CSS for everything! 💪 #ReactJS #TypeScript #TailwindCSS #WebDevelopment #Frontend #JavaScript #bun

After months of building, I'm launching an open-source React component library next week. 50+ components. Built on Base UI. Styled with native CSS instead of Tailwind utilities. The thesis: your JSX should be readable, your styles should live in CSS, and your colors should be perceptually accurate (we use Google's HCT color science). More details dropping on launch day. Follow along if you're interested. #react #opensource #webdev #css

How React Remembers State Between Renders? When a component re-renders, the function runs again from top to bottom. So how does useState not reset every time? 🤔 function Counter() { const [count, setCount] = React.useState(0); return <button onClick={() => setCount(count + 1)}>{count}</button>; } Every render: The function runs again and Variables are recreated. So why doesn’t count go back to 0? What Actually Happens Internally React stores state outside the component function. Behind the scenes: 1) Each component has a Fiber node 2) React keeps a linked list of Hooks 3) It tracks Hooks based on call order State is not stored in your function. It’s stored in React’s internal Fiber system. The function is just a way for React to describe UI. Understanding this makes Hooks feel much less magical. #ReactJS #ReactInternals #ReactHooks #FrontendDevelopment #SoftwareEngineering #JavaScript

Wait... since when did CSS get this smart? 🤯 I just spent the morning playing with @container scroll-state(stuck) and I’m officially convinced: We are reaching the "No-JS" peak for frontend. Remember the old way? Fire up an IntersectionObserver. Write a JS toggle for a .is-stuck class. Pray the scroll listener doesn’t tank your frames per second. In 2026, we do this in 5 lines of CSS. No JS. No layout thrashing. Just the browser doing what it's supposed to do. I put together a quick CodePen to show how it works!. It tracks exactly when a sticky header "touches" the top and swaps the styles instantly. Why this matters: Smaller bundles, native performance, and way less "glue code" to maintain. Is anyone actually still using scroll event listeners for UI toggles? Or are we finally ready to let CSS handle the heavy lifting? Check the code below. 👇 #Frontend #CSS #WebDev #CodingLife #100DaysOfCode

Why useEffect feels unpredictable (but isn’t) Most frustration with useEffect comes from three JavaScript behaviors: 1️⃣ Objects are compared by reference New object → new reference → effect runs again 2️⃣ Functions close over values If you don’t understand closures, dependency arrays feel confusing 3️⃣ State updates are scheduled They don’t run immediately, they’re batched None of this is React magic. It’s "JavaScript". When JS fundamentals are clear, useEffect becomes boring. And boring is good. #reactjs #javascript #frontend #softwareengineering #careeradvice

🚫 Jumping into React too early cost me clarity. When I shifted to a JS-first approach, React stopped feeling complex. React isn’t a separate skill. It’s JavaScript applied to UI with rules around state and re-renders. Here’s what actually made the difference: 1️⃣ Closures Without understanding closures, hooks feel unpredictable. They explain: • Why stale state happens • Why dependencies matter in useEffect 2️⃣ Async JavaScript API calls aren’t React problems. They’re event loop problems. Once I understood promises and async flow, state updates became logical. 3️⃣ Array Methods .map() and .filter() power dynamic rendering. If you struggle with these, JSX becomes messy fast. 4️⃣ Scope & Execution Context • Re-renders are execution cycles • Event handlers are closures • State is captured context None of this is “React magic.” It’s JavaScript. React became easier the moment I stopped “learning React” and started mastering JavaScript fundamentals. Skill sequencing matters. If you're starting in frontend, build language depth before chasing frameworks. What JS concept made things click for you? #JavaScript #React #WebDevelopment #Frontend #LearningInPublic