Launching Open-Source React Component Library Next Week

🚀 Just built a Password Generator Web App using React + Tailwind CSS! While learning React, I created a simple but useful project that generates secure and customizable passwords. 🔑 Features: • Generate strong random passwords • Adjust password length using slider • Option to include numbers & special characters • One-click copy to clipboard • Clean UI built with Tailwind CSS 🛠 Tech Stack: React.js | Tailwind CSS | JavaScript | Clipboard API This project helped me understand: ✅ React Hooks (useState, useEffect, useCallback, useRef) ✅ Component state management ✅ UI styling with Tailwind ✅ Building practical security tools More projects coming soon as I continue improving my frontend development skills. 💬 Feedback is welcome! #reactjs #tailwindcss #webdevelopment #frontenddeveloper #javascript #coding #100DaysOfCode #buildinpublic

⚛️ Day 7 of Learning React.js Today I focused on understanding what CSS is used for in React applications. I learned that while React handles the structure and logic of the UI, CSS is responsible for styling — making the application look clean, attractive, and user-friendly. What I understood today: Why CSS is important in React How styling improves user experience Basic styling of components Separating structure (JSX) and design (CSS) Now I can see how components + props + CSS work together to build a complete and visually appealing interface. Step by step, building both logic and design skills 🚀 #ReactJS #CSS #FrontendDevelopment #WebDeveloper #LearningJourney #StudentDeveloper #Consistency

If you’ve ever tried to use createPortal in React Native, you probably ran into challenges. On the web, it’s the standard way to render children into a different part of the DOM, but in React Native? It’s been a missing piece of the puzzle for years, forcing us to rely on workarounds like @gorhom/portal or the 𝗿𝗲𝗮𝗰𝘁-𝗻𝗮𝘁𝗶𝘃𝗲-𝘁𝗲𝗹𝗲𝗽𝗼𝗿𝘁 library we recently talked about. But things are changing. 𝗥𝗲𝗮𝗰𝘁 𝗡𝗮𝘁𝗶𝘃𝗲 𝗣𝗥 #𝟱𝟱𝟰𝟲𝟯 just dropped: experimental support for 𝗥𝗲𝗮𝗰𝘁 𝗣𝗼𝗿𝘁𝗮𝗹𝘀 𝗶𝗻 𝗙𝗮𝗯𝗿𝗶𝗰. 𝗪𝗵𝗮𝘁’𝘀 𝗵𝗮𝗽𝗽𝗲𝗻𝗶𝗻𝗴? Historically, portals were "DOM magic." Since React Native doesn't have a DOM, the architecture didn't quite know how to handle them. This PR leverages the 𝗡𝗲𝘄 𝗔𝗿𝗰𝗵𝗶𝘁𝗲𝗰𝘁𝘂𝗿𝗲 (Fabric) to intercept shadow tree commits and manually mount portal children into the native view hierarchy. It’s essentially teaching the Fabric renderer how to handle createPortal natively. ➡️ 𝗧𝗿𝘂𝗲 𝗥𝗲𝗮𝗰𝘁 𝗣𝗮𝗿𝗶𝘁𝘆: You can finally write code that looks and behaves like standard React, making cross-platform (Web/Mobile) components much easier to maintain. ➡️ 𝗖𝗼𝗻𝘁𝗲𝘅𝘁 𝗣𝗿𝗲𝘀𝗲𝗿𝘃𝗮𝘁𝗶𝗼𝗻: Unlike some current JS-heavy hacks, this approach is designed to keep React context and event bubbling intact. ➡️ 𝗟𝗲𝗮𝗻𝗲𝗿 𝗔𝗽𝗽𝘀: If this makes it into core, we can stop installing third-party libraries just to show a simple tooltip or modal. We literally just shared how 𝗿𝗲𝗮𝗰𝘁-𝗻𝗮𝘁𝗶𝘃𝗲-𝘁𝗲𝗹𝗲𝗽𝗼𝗿𝘁 is the best way to handle this right now. If this PR lands in a stable release, it might eventually make those specialised libraries obsolete. That’s the nature of the ecosystem—today's essential library becomes tomorrow's built-in feature. Before you go deleting your third-party libraries, keep in mind: 𝘁𝗵𝗶𝘀 𝗶𝘀 𝘀𝘁𝗶𝗹𝗹 𝗶𝗻 𝘁𝗵𝗲 𝗣𝘂𝗹𝗹 𝗥𝗲𝗾𝘂𝗲𝘀𝘁 𝘀𝘁𝗮𝗴𝗲. It’s highly experimental and involves changes to the core React renderer files. #ReactNative #Fabric #ReactJS #Portals #OpenSource #MobileDev #JavaScript #TypeScript #SoftwareEngineering #DevTools #Meta

REACT INTERNALS - PART 1 What Does “Rendering” Actually Mean? In React, we often say: “This component re-rendered.” But rendering does NOT mean the browser immediately updated the screen. When you click a button that updates state, here’s what actually happens: 1. setState (or setCount) updates the state value 2. React schedules an update 3. The component function runs again 4. React calculates what the UI should look like now This calculation phase is called rendering. At this stage, React creates a new Virtual DOM - a lightweight JavaScript representation of the UI. The browser, however, works with the Actual DOM - the real structure displayed on the screen. Updating the Actual DOM is expensive because it can trigger layout recalculation, repaint, and reflow inside the browser. To avoid unnecessary work, React compares the new Virtual DOM with the previous one. Only after finding differences does it update the Actual DOM. So the key idea is: Rendering = recalculating the UI DOM update = applying real changes in the browser They are not the same thing. Understanding this separation is the first step toward understanding performance in React. To understand this better, refer to the example attached below. Next: How React compares the old and new Virtual DOM - reconciliation. #ReactJS #FrontendDevelopment #JavaScript #ReactInternals #SoftwareEngineering

Here’s how you can build clean, reusable components by leveraging styled-components in React One common challenge many frontend developers face is managing UI components as projects grow. At the beginning, everything feels simple. But over time, you start to see problems like: Too many duplicated buttons Inconsistent styles Hard-to-maintain CSS files Rewriting the same components again and again This is where reusable components + styled-components become very powerful. Recently, I implemented a reusable Button system where: I created a BaseButton Extended it into GoogleSignInButton and InvertedButton Used a helper function to dynamically select the right button based on props With this approach, I only pass a buttonType, and the correct styled button is rendered automatically. Example from my implementation: const getButton = (buttonType) => ({ base: BaseButton, google: GoogleSignInButton, inverted: InvertedButton, }[buttonType]); This allows me to reuse one Button component across the entire application while keeping the styles organized and consistent. Benefits of this approach: Cleaner codebase Better scalability Consistent UI Easier maintenance Faster development Instead of building new buttons every time, I now focus more on functionality and user experience. Still learning, building, and improving every day. Would love to hear how You handle component reusability in Your projects. #ReactJS #FrontendDevelopment #StyledComponents #JavaScript #WebDev #TechGrowth

What Runs First in React? (Rendering vs useEffect vs useCallback vs useMemo) One day I wrote this small React code just to test my understanding: import { useEffect, useCallback, useMemo } from "react"; export default function App() { useEffect(() => { console.log("useEffect"); }, []); const increment = useCallback(() => { console.log("useCallback"); }, []); const squaredCount = useMemo(() => { console.log("useMemo"); }, []); return ( <div> {console.log("Rendering JSX")} </div> ); } And I asked myself: 👉 What runs first? At first, I guessed randomly. But then I stopped thinking like a coder… and started thinking like React. 🧠 Step 1: React always renders first React’s first job is simple: Build the UI. So this runs first: Rendering JSX Because React must render before doing anything else. 🧠 Step 2: During rendering While React is rendering: • useMemo runs immediately (it calculates something) • useCallback does NOT execute — it only stores the function So you’ll see: useMemo✅ But not: useCallback❌ That function only runs if we call increment() manually. That was my “aha” moment 💡 🧠 Step 3: After rendering → useEffect runs Once the UI is painted, React runs: useEffect Because useEffect always runs after render. ✅ Final Order (on first mount) 1️⃣ Rendering JSX 2️⃣ useMemo 3️⃣ useEffect (useCallback only runs if called) 💡 The lesson I learned Don’t just learn hooks. Learn when they run. Understanding execution order made debugging 10x easier for me. Now whenever something feels “weird” in React, I ask one question: 👉 Is this running during render or after render? Still learning React in human language. 🚀 #JavaScript #FrontendDevelopment #LearningInPublic #CleanCode #ReactJS #useEffect #useMemo #useCallback #FrontendDevelopment #LearningInPublic #JavaScript #WebDevelopment #DeveloperJourney #ReactHook

🚀 Excited to share that 𝗜’𝘃𝗲 𝗯𝗲𝗲𝗻 𝗹𝗲𝗮𝗿𝗻𝗶𝗻𝗴 𝗩𝘂𝗲.𝗷𝘀 and building projects with it! 𝗩𝘂𝗲.𝗝𝘀 is an open-source, progressive JavaScript framework for building user interfaces (UIs) and single-page applications (SPAs). It is known for its simplicity, flexibility, and performance 💡 𝗪𝗵𝘆 𝗩𝘂𝗲.𝗷𝘀? • Simple and easy to learn • Component-based architecture • Reactive data binding • Excellent performance • Powerful ecosystem with tools like Vue Router, Pinia, and Vite 🔹 𝗪𝗵𝗮𝘁 𝗶𝘀 𝗮 𝗦𝗶𝗻𝗴𝗹𝗲 𝗣𝗮𝗴𝗲 𝗔𝗽𝗽𝗹𝗶𝗰𝗮𝘁𝗶𝗼𝗻 (𝗦𝗣𝗔)? A Single Page Application (SPA) is a web application that loads a single HTML page and dynamically updates the content as users interact with the app, without reloading the entire page. This approach makes applications faster, smoother, and more responsive, creating a user experience similar to desktop applications. 🧩 𝗞𝗲𝘆 𝗖𝗼𝗻𝗰𝗲𝗽𝘁𝘀 𝗜’𝘃𝗲 𝗟𝗲𝗮𝗿𝗻𝗲𝗱 🔹 𝗖𝗼𝗺𝗽𝗼𝗻𝗲𝗻𝘁𝘀 Vue applications are built using reusable components. Each component contains its own logic, template, and styles, making applications easier to maintain and scale. 🔹 𝗥𝗲𝗮𝗰𝘁𝗶𝘃𝗶𝘁𝘆 𝗦𝘆𝘀𝘁𝗲𝗺 Vue automatically updates the UI whenever the underlying data changes, creating a dynamic and responsive interface. 🔹 𝗩𝘂𝗲 𝗥𝗼𝘂𝘁𝗲𝗿 Used for building Single Page Applications (SPA). It enables navigation between different pages without refreshing the browser. 🔹 𝗣𝗿𝗼𝗽𝘀 & 𝗘𝗺𝗶𝘁 Props allow passing data from parent to child components, while emit enables child components to communicate with their parent. 🔹 𝗖𝗼𝗺𝗽𝗼𝘀𝗶𝘁𝗶𝗼𝗻 𝗔𝗣𝗜 A modern way to organize logic inside Vue components using features like ref, reactive, watch, and onMounted. 🛠 𝗣𝗿𝗼𝗷𝗲𝗰𝘁𝘀 𝗜 𝗕𝘂𝗶𝗹𝘁 𝗪𝗵𝗶𝗹𝗲 𝗟𝗲𝗮𝗿𝗻𝗶𝗻𝗴 𝗩𝘂𝗲: 🔗 Project 1: https://lnkd.in/dW3AR9KT 🔗 Project 2: https://lnkd.in/dHYypvrx You can also check all my projects here: 🔗 GitHub: https://lnkd.in/ddy78cTq I’m excited to continue building projects and improving my frontend development skills 💻✨ #VueJS #FrontendDevelopment #JavaScript #WebDevelopment #SoftwareEngineering#ITI

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

Writing Performant CSS in React Global CSS works… until your app scales. Then you get: • Class name collisions • Specificity wars • Unused styles piling up • Hard-to-trace overrides Performance isn’t just bundle size. It’s predictability and maintainability. That’s why I like CSS Modules. ✔ Locally scoped by default ✔ No global leakage ✔ No runtime style injection ✔ Pure CSS, compiled at build time You write normal CSS. Your classes get unique identifiers automatically. No naming gymnastics. No surprises. Clean architecture. Minimal overhead. Scales well. What’s your go-to styling approach in React? #React #FrontendEngineering #CSSModules #WebPerformance #JavaScript

Day 29 of My Web Development Journey ⚛️🔥 Yesterday I officially moved toward React. Today, I started understanding it deeper. The biggest mindset shift? In JavaScript, I was manipulating the DOM manually. In React, the UI updates based on state. That concept alone changed how I think. Today I learned: • What a component really is • How JSX works • Why React uses a virtual DOM • How to create and reuse components At first, JSX looked strange — HTML inside JavaScript? But now it’s starting to make sense. Instead of thinking: “Select this element and change it.” I’m thinking: “If the state changes, the UI should update automatically.” That’s powerful. It feels like moving from writing instructions to defining behavior. 🧠 Still at the basics. Still understanding fundamentals. But the transition from vanilla JS to React is getting smoother. New chapter. New thinking style. Same consistency. 🚀 #Day29 #ReactJS #JavaScript #FrontendDevelopment #WebDevelopment #LearningInPublic #BuildInPublic #DeveloperJourney #TechGrowth #ProgrammingLife #SelfTaughtDeveloper