Adelina Moroacă’s Post

🧠 From Vanilla JS to React/TypeScript: A Developer’s Growth Curve After spending a full month building a project with **Vanilla JavaScript**, I felt confident in my DOM skills, event handling, and clean logic. No frameworks, no abstractions—just raw JS and full control. Then came my next challenge: a new project using **React + TypeScript**. And let’s just say... things got real 😅 One of the biggest hurdles? **ShadCN UI**. 🔧 I ran into: - Type mismatches that broke my build - Conflicting peer dependencies - Styling quirks that didn’t play well with my setup But here’s how I tackled it: - Read through ShadCN’s GitHub issues and docs like a detective - Used `pnpm` to isolate and resolve dependency conflicts - Created custom TypeScript interfaces to bridge gaps - Refactored components to align with ShadCN’s design system 💡 Lesson learned: Vanilla JS teaches you the fundamentals, but frameworks like React/TS demand architectural thinking and patience. And when you add third-party libraries like ShadCN, you’re not just writing code—you’re integrating ecosystems. 📸 I’ve attached screenshots from both projects to show the contrast in approach and complexity. If you’ve ever made the jump from Vanilla to React/TS, you know the struggle. But it’s worth it. #JavaScript #ReactJS #TypeScript #ShadCN #FrontendDevelopment #MERNStack #WebDev #DeveloperJourney #OpenSource #TechInNigeria

⚛️ Frontend Dev Series (Part 12): The Mistakes Every React Developer Makes I’ve seen (and made) all of these myself 😅 You can write React code easily — but understanding React takes time, patience, and humility. Here are a few mistakes every dev hits sooner or later 👇 🔹 1️⃣ Treating React like Vanilla JS DOM manipulation won’t save you. Learn how React thinks — through state and re-renders. 🔹 2️⃣ useEffect() without dependencies If you’ve ever crashed your browser with infinite re-renders… welcome to the club. 😭 Understand dependency arrays. Or they’ll haunt you. 🔹 3️⃣ Overusing State Not everything needs useState. Some things belong in context. Some don’t need to exist at all. 🔹 4️⃣ Logic Inside JSX If your render looks like an algebra problem, extract the logic out. Readable JSX = maintainable project. 🔹 5️⃣ Giant Components If your component file requires scrolling, it’s already a problem. Keep them modular. One job per component. 🔹 6️⃣ Ignoring Performance React isn’t slow. You just forgot memoization, lazy loading, or suspense. 💭 Final Truth: React rewards clarity — not cleverness. Good React devs make it work. Great ones make it last. 💬 Which mistake did you make early on? 👇 Drop your story below. 🔁 Share this with a dev who’s still stuck in a useEffect loop. 📌 Save this for your next React refactor. Follow Nahar Singh For Such Content ☺️ #ReactJS #FrontendDevelopment #WebDevelopment #CleanCode #JavaScript #ReactTips #DevCommunity #BuildInPublic #DeveloperJourney #100DaysOfCode #LearnReact #WebDevLife

Custom Hooks in React 🔁 If you’ve worked with React, you already know how powerful built-in hooks like useState and useEffect are. But the real magic begins when you start creating your own custom hooks. Custom hooks allow developers to extract and reuse logic across different components. Instead of repeating the same logic in multiple places, you can simply wrap it inside a custom hook — keeping your code clean, modular, and easier to maintain. 💡 Why use Custom Hooks? Reuse complex logic across components Keep components focused purely on UI Improve readability and scalability Simplify debugging and testing For example, you could create custom hooks for things like API fetching, managing authentication, handling dark mode, or tracking window size. In short, custom hooks bring structure and reusability to your React applications — turning repetitive patterns into elegant, maintainable code. #React #WebDevelopment #Frontend #JavaScript #Coding #Hooks #CustomHooks #TechLearning #ReactJS #stemup

🎯 Front-End Developers: Write Code That Ages Well! Whether you’re working with Angular, React, or plain JavaScript, one thing separates good developers from great developers — writing clean, maintainable, and scalable code. After debugging messy projects, here are some best practices I’ve learned to never skip: ✅ Component Reusability: Break your UI into meaningful, reusable components. The less you repeat, the fewer bugs you introduce. ✅ Consistent Naming: Name variables, functions, and components clearly. Future you — or your teammate — will thank you. ✅ Keep Logic Out of Templates: Templates and JSX should focus on structure, not logic. Move business logic to controllers, services, or hooks. ✅ State Management Matters: Don’t let your app turn into spaghetti. Use proper state management solutions like NgRx, Redux, or Signals. ✅ Testing is a Superpower: Unit and integration tests save hours of debugging and prevent regressions. ✅ Comment Wisely: Use comments to explain why, not what. Clean code should explain itself. ✅ Follow DRY + Use Linters: “Don’t Repeat Yourself” isn’t just a rule — it’s a discipline. Let tools like ESLint or Prettier enforce code quality. Clean front-end code doesn’t just look good — it makes your app faster, easier to maintain, and scalable for real-world growth. 👉 Front-end devs, what’s the one clean code habit you’ll never compromise on? #FrontendDevelopment #Angular #ReactJS #JavaScript #CleanCode #DeveloperCommunity #WebDevelopment #CodeQuality #DeveloperLife

React Hooks: The Shift That Simplified Frontend Development React Hooks didn’t just change syntax. They changed how developers think about building user interfaces. For years, managing state and lifecycle events meant relying on class components, this.state, and layers of boilerplate. Hooks introduced a cleaner approach by letting developers manage logic directly inside functional components. Instead of spreading logic across componentDidMount, componentDidUpdate, and cleanup methods, a single useEffect can now handle it all. This structure makes code more predictable, reusable, and easier to maintain. The real value of Hooks is not just simplicity, but the mindset shift they introduced, toward modular, functional, and scalable design. #React #Frontend #JavaScript #WebDevelopment #ReactHooks

The Most Underrated Frontend Tool I Wish I’d Known Earlier We talk a lot about React, Next.js, or Tailwind — but rarely about the tools that actually keep us moving fast. One that doesn’t get nearly enough credit is esbuild. I came across it while looking for a faster bundler during a React project, and honestly, it changed how I think about “build time.” Here’s the thing: esbuild isn’t new or trendy — it’s just ridiculously efficient. It’s written in Go and can bundle JavaScript 10–100× faster than Webpack or Rollup. It supports TypeScript, JSX, and tree-shaking out of the box. And it’s quietly powering tools like Vite, Angular CLI (v17+), and even Rails 7 behind the scenes. My first rebuild time dropped from around 45 seconds to under 3. That might not sound dramatic — but when you’re deep in the zone, it’s the difference between staying in flow and losing it completely. Frontend isn’t just about pretty interfaces — it’s about invisible tools that make creativity effortless. esbuild is one of those tools that just works, without demanding attention. If you haven’t tried it yet, give it a shot. You might never look back at your old bundler again. #FrontendEngineering #WebDev #esbuild #Vite #JavaScript #React #PerformanceMatters

Stop writing React like it’s your first day These 6 patterns will make your code interview-ready and your teammates thank you. Swipe through for the clean code habits that separate junior from senior developers. Which pattern hits different for you? Check the comments below for my Complete Resource! 👇 #ReactJS #JavaScript #frontend #webdevelopment

🚀 Why Basics Matter More Than Frameworks Everyone wants to jump straight into React, Next.js, or whatever’s trending. But here’s the truth frameworks are shortcuts built on top of fundamentals. If you don’t understand the road, shortcuts only get you lost faster. I’ve worked with various developers who can build complex UIs but freeze when JavaScript behaves unexpectedly. That’s not a lack of skill, that’s a lack of foundation. When you master the core concepts 🔹 How the DOM actually works 🔹 How JS handles memory, scope, and events 🔹 How CSS paints and reflows 🔹 How HTTP and rendering really connect then any framework becomes just another tool, not a dependency. Frameworks change every few years. Basics stay forever. If you can write clean logic with vanilla JS, you’ll never fear the next big thing. Because the fundamentals never go out of fashion. Stay rooted. Build deep. That’s how you become better developer. #frontend #javascript #developers #careergrowth #learning

 From Hating Frameworks to Appreciating Their Power When I started my development journey, I used to hate frameworks. They felt restrictive — forcing me to follow their patterns instead of letting me “just code.” But over time, I realized that frameworks exist for a reason. They don’t limit creativity — they guide structure, enforce best practices, and make code more maintainable and consistent. Take examples like: NestJS > Express — NestJS enforces a modular and layered architecture that keeps even large backend projects clean. Angular > React — Angular provides opinionated patterns that make team collaboration and scaling much easier. Frameworks help you understand not only how to build faster, but also how to read and contribute to large open-source projects that follow similar standards. Now, I truly believe: 👉 A good framework doesn’t cage you — it disciplines your creativity. #WebDevelopment #NestJS #Angular #Frameworks #CleanCode #DeveloperJourney