Today, I had a conversation with a friend 3+ years in React who hit a frustrating error: ❌ "React is not defined" His response? "But I'm not even using React. I only wrote JSX." That's when I realised — even experienced developers can have gaps in understanding what happens under the hood. And honestly, in the AI era, these fundamentals matter more than ever. 🔍 So what actually happens when you write JSX? You write this: <div className="hello">Hello World</div> Babel (your build tool) transforms it into: React.createElement("div", { className: "hello" }, "Hello World") That's it. JSX is NOT HTML. It's syntactic sugar that compiles down to React.createElement() calls. And since React.createElement is called behind the scenes — React must be in scope. That's why the old error appeared. (Note: React 17+ introduced a new JSX transform that auto-imports the runtime, so you may not see this anymore — but understanding WHY it existed is gold.) 🏗 The React Build Process (simplified) Your JSX code → Babel transpiles JSX → React.createElement() calls → React builds a Virtual DOM (a JS object tree) → React diffs the new tree vs the old one → Only the changed parts get updated in the real DOM This is why React is fast. Not because it touches the DOM often — but because it's surgical about when and what it touches. --- 💡 Why does this still matter in the AI era? AI tools write your components. AI tools fix your errors. But AI cannot debug what you don't understand. When something breaks at build time, at runtime, or in production — you need to know: → What is Babel doing to my code? → Why is the virtual DOM behaving this way? → What triggered a re-render? Basics are not boring. Basics are your debugging superpower. Don't let AI become a crutch that skips your foundation. Let it be the tool that sits on top of a strong one. 🧱 #ReactJS #JavaScript #WebDevelopment #JSX #FrontendDevelopment #Programming #SoftwareEngineering #100DaysOfCode #TechLearning #BuildInPublic
Why JSX is Not HTML and React Fundamentals Matter
More Relevant Posts
-
Well, JavaScript is the ocean that has many small fishes in terms of libraries, and sometimes we have to take a deep dive into many libraries, and integrating burns you out to the core, doesn't it? For logging out the time and date? year? along with seconds, it surely makes our mind chaotic, so we just need some fresh air at that time in a way to relax. // Using Moment.js (Legacy) const nextWeek = moment().add(7, 'days'); // Using Day.js (Modern-ish pre-Temporal) const nextWeek = dayjs().add(7, 'day'); Intriguingly, the new JS update eases our lives as coders, even in the next generation AI, we lack empathy. Does the code work, or actually logics making a significant difference? So let's get into it, Temporal Temporal is the advanced update to resolve dependencies like Moment.js or some other hectic libraries. It gives you a smart, intelligent way to add days in the current date flow just by using the syntax below to handle complex logics efficiently. // No more library dependencies like Moment.js or Day.js! const today = Temporal.Now.plainDateISO(); const nextWeek = today.add({ days: 7 }); console.log(nextWeek.toString()); // Clean, predictable, and immutable. #vibeCoding #javascript #angular #react #NextJs #TypeScript #frontendDevelopment
To view or add a comment, sign in
-
🚨 Using advanced tools for simple problems is not good engineering. AI can speed things up — but it can also turn simple solutions into complex ones. 👉 As developers, we should always ask: Is this approach really needed? Or is it more complicated than necessary? 💡 Example: Form handling in React A simple login form: Email Password Does this need a form library? 👉 No. ✅ Keep it simple const [email, setEmail] = useState(""); const [password, setPassword] = useState(""); Easy to read Easy to maintain Gets the job done 🚀 When to use a library (like React Hook Form) Use it when you have: Multiple fields Complex validations Dynamic forms Performance constraints ⚖️ The difference is not the tool. It’s the use case. ⚠️ Overengineering doesn’t improve code. 👉 It adds unnecessary complexity. 💬 Question: Have you ever used a heavy solution for a simple problem? ✉️ Repost if this helped you decide #reactjs #javascript #frontend #webdevelopment #softwareengineering #coding #developers #cleancode #architecture
To view or add a comment, sign in
-
-
JavaScript will let you call a function that doesn't exist and only tell you at 2am when production is on fire. That's not a metaphor. That's Tuesday. For years, large JS codebases were maintained by a combination of unit tests, tribal knowledge, and hope. You'd rename a function, miss one call site somewhere in a 40-file module, and find out three sprints later when a customer filed a bug. The feedback loop was broken by design. I hit this hard at a startup where we'd inherited a 60k-line Node.js backend. No types, inconsistent naming, functions that returned either an object or null depending on a condition buried 4 levels deep. Onboarding a new engineer took weeks just so they could stop accidentally breaking things. We migrated to TypeScript incrementally, started with the most-touched files, used 'any' as a crutch at first, tightened it over six months. The compiler immediately surfaced 40+ call sites that were passing wrong argument shapes. Not hypothetical bugs, real ones, some of which had been silently misbehaving in edge cases for over a year. We fixed them before they ever reached a user. Onboarding time dropped noticeably. New engineers could navigate the codebase with their editor instead of asking whoever wrote the file two years ago. Refactors that used to require a code freeze became routine. TypeScript doesn't make you write better logic. It makes the cost of mistakes immediate instead of invisible. If you're running a JS codebase over 10k lines and you're not using TypeScript, you're not saving time, you're borrowing it.
To view or add a comment, sign in
-
-
JavaScript is easy. Until it isn't. 😅 Every developer has been there. You're confident. Your code looks clean. You hit run. And then: " Cannot read properties of undefined (reading 'map') " The classic JavaScript wall. Here are 7 JavaScript mistakes I see developers make constantly and how to fix them: 1. Not understanding async/await ⚡ → Wrong: | const data = fetch('https://lnkd.in/dMDBzbsK'); console.log(data); // Promise {pending} | → Right: | const data = await fetch('https://lnkd.in/dMDBzbsK'); | 2. Using var instead of let/const → var is function scoped and causes weird bugs → Always use const by default. let when you need to reassign. Never var. 3. == instead of === → 0 == "0" is true in JavaScript 😱 → Always use === for comparisons. Always. 4. Mutating state directly in React → Wrong: user.name = "Shoaib" → Right: setUser({...user, name: "Shoaib"}) 5. Forgetting to handle errors in async functions → Always wrap await calls in try/catch → Silent failures are the hardest bugs to track down 6. Not cleaning up useEffect in React → Memory leaks are real → Always return a cleanup function when subscribing to events 7. Treating arrays and objects as primitives → [] === [] is false in JavaScript → Reference types don't compare like numbers — learn this early JavaScript rewards the developers who understand its quirks. 💡 Which of these caught YOU off guard when you first learned it? 👇 #JavaScript #WebDevelopment #Frontend #FullStackDeveloper #React #Programming #CodingTips #Developer #Tech #Pakistan #LearnToCode #JS #SoftwareEngineering #100DaysOfCode #PakistaniDeveloper
To view or add a comment, sign in
-
-
I used to chase frameworks. New project? Time to evaluate the latest stack. React? Solid? Svelte? Maybe htmx this time? That approach gets you breadth but not depth. You know the syntax of five frameworks but you can't explain how any of them actually work under the hood. The shift for me was realizing that learning how to learn is the actual skill. Not the framework, not the language — the ability to drop into something unfamiliar and get productive fast. When you understand that React's virtual DOM is just a diffing algorithm, that a state manager is just pub/sub with rules, that a router is just pattern matching on strings, the framework stops being magic. It becomes a tool you can evaluate instead of a religion you defend. The senior developers I respect don't have opinions about React vs Vue. They have opinions about composition, state management, and re-rendering. They'd ship a good product in any stack because they understand the underlying concepts. Learn the fundamentals. The frameworks are just syntax on top.
To view or add a comment, sign in
-
Still writing plain JavaScript in 2026? Here's what the numbers suggest. TypeScript has moved from "nice to have" to industry standard. 📈 Recently became the top language on GitHub by contributor activity 📈 66% year-over-year growth 📈 2.6M+ active contributors 📈 78% of professional developers reportedly use it for large-scale applications But the most practical insight is this: 94% of AI-generated code compilation errors are type-check related. That means stronger typing is no longer just a developer preference. It's becoming a productivity advantage. It's also why frameworks like Next.js, Nuxt, and SvelteKit now heavily support or default toward TypeScript-first workflows. For new projects, the real question may no longer be: "Should we use TypeScript?" It may be: "Why wouldn't we?" Are you still building in plain JavaScript, or has your team fully transitioned? #TypeScript #JavaScript #FrontendDevelopment #WebDevelopment #SoftwareEngineering #Programming #DeveloperTools #Nextjs #TechLeadership #AI #Coding #EngineeringTeams
To view or add a comment, sign in
-
Someone spent three months trying to make AI agent swarms work. The answer turned out to be something they already had: a folder. CLAUDE.md, convention docs, runbooks, specialised agents. Point a model at the folder and it inherits everything. No orchestration framework, no protocol. 44 agents, each one just a folder. Slim week for Rails-specific content, so this issue goes wider. Sometimes that's more interesting. Here's what caught my eye: 🧪 A testing anti-pattern most of us are guilty of: setup data that drowns the signal. If half the numbers in your test are arbitrary, your test is harder to understand than it needs to be. A simple builder helper fixes it. 📅 JavaScript's Temporal API is finally landing. Dates and times are no longer terrible. TypeScript v7 is getting a Go-based compiler for ~10x speed. Node, Deno, and Bun all support TypeScript natively now. Worth knowing what's happening next door. 📂 "The folder is the agent." The simplest, most practical framing I've seen for AI-assisted development. No swarms, no orchestration layers. Just context. 🖼️ HTML's `<dialog>` and `popover` are Baseline now. Focus trapping, backdrop rendering, top-layer promotion, light-dismiss. If you're still reaching for a JS library to handle modals, it's worth reconsidering. Full issue with takeaways: https://lnkd.in/eN6tsaTd What's your approach to keeping up with the JavaScript ecosystem when you're primarily a Rails developer? Or do you just not bother? #RubyOnRails #JavaScript #Testing #AIAgents #WebDev
To view or add a comment, sign in
-
𝗠𝗼𝘀𝘁 𝗱𝗲𝘃𝗲𝗹𝗼𝗽𝗲𝗿𝘀 𝘄𝗼𝗻’𝘁 𝗮𝗱𝗺𝗶𝘁 𝘁𝗵𝗶𝘀, 𝗯𝘂𝘁 𝗵𝗲𝗿𝗲’𝘀 𝘁𝗵𝗲 𝘁𝗿𝘂𝘁𝗵: 𝗪𝗲’𝘃𝗲 𝗻𝗼𝗿𝗺𝗮𝗹𝗶𝘇𝗲𝗱 𝗼𝘃𝗲𝗿𝗲𝗻𝗴𝗶𝗻𝗲𝗲𝗿𝗶𝗻𝗴. Not every landing page needs React or Next.js. If your page is just: + A hero section + Some content + A CTA Then pulling in a full framework is like using a truck to carry a backpack. And now with AI in the picture, this becomes even more obvious. You can literally generate clean, responsive HTML/CSS/JS in minutes. No setup. No build tools. No unnecessary complexity. 𝘼𝙄 𝙝𝙖𝙨 𝙧𝙚𝙢𝙤𝙫𝙚𝙙 𝙩𝙝𝙚 𝙗𝙞𝙜𝙜𝙚𝙨𝙩 𝙚𝙭𝙘𝙪𝙨𝙚 𝙙𝙚𝙫𝙚𝙡𝙤𝙥𝙚𝙧𝙨 𝙝𝙖𝙙, “𝙞𝙩’𝙨 𝙛𝙖𝙨𝙩𝙚𝙧 𝙩𝙤 𝙪𝙨𝙚 𝙖 𝙛𝙧𝙖𝙢𝙚𝙬𝙤𝙧𝙠.” It’s not anymore. In fact, for simple pages: + Less JavaScript = faster load + Less tooling = fewer bugs + Less abstraction = easier maintenance Frameworks still make sense when you're building real applications with state, scale, and complexity. But using them for basic landing pages? That’s not engineering. That’s habit. The smarter move today is not “what’s modern” It’s “what’s sufficient” Build only what you need. Nothing more. #WebDevelopment #FrontendDevelopment #SoftwareEngineering #CleanCode #Minimalism #BuildInPublic #DevThoughts #Programming #JavaScript #WebDesign #Performance #TechPerspective #AI #AIDevelopment #FutureOfWork #NoCode #LowCode #DeveloperMindset #EngineeringPrinciples #Simplicity #CodeSmarter
To view or add a comment, sign in
-
I used Claude the wrong way for a while. I kept one long thread open and kept asking for small changes. “Fix this TypeScript error.” “Now make it cleaner.” “Now convert it to React hooks.” “Now add loading state.” “Now make it production-ready.” The problem is simple. Every new message adds more context, and Claude has to process all of that again. So the thread grows, token usage grows, and the output often gets worse because the context becomes noisy. I wrote a blog about how to avoid that. https://lnkd.in/gXu8PK8x A few things that made the biggest difference for me: * start a fresh chat more often * give the full instruction in one go * summarise old context instead of dragging the whole thread * control output size when you only need code or a short answer Small prompt changes make a big difference when you use Claude every day for development work. #Claude #AI #JavaScript #TypeScript #React #NodeJS #PromptEngineering #SoftwareEngineering #WebDevelopment #Developers
To view or add a comment, sign in
-
-
Everything was working… until production said otherwise 😅 One of the trickiest bugs in JavaScript is when your code is technically correct… but finishes in the wrong order. Many developers think: “If I use async/await, I’m safe.” Sadly… no 😄 async/await makes code look clean. It does NOT control which request finishes first. That’s where race conditions begin. Simple example: User searches “React” → Request 1 starts Immediately searches “Node.js” → Request 2 starts If Request 1 finishes later, old data can replace the new result. Now your UI confidently shows… the wrong answer. Classic. Same thing happens in Node.js too: ✔ Multiple API calls updating the same data ✔ Parallel requests overwriting each other ✔ Background jobs fighting like siblings Everything runs. Everything breaks. How to avoid it: ✔ Cancel old requests ✔ Ignore stale responses ✔ Use request IDs ✔ Debounce fast actions ✔ Handle backend concurrency properly Big lesson: async/await is syntax. Correct execution order is architecture. Very different things. Good code is not just: “It runs on my machine.” Good code is: “It runs correctly in production.” 😄 Have you ever debugged a race condition bug that made you question your life choices? 👇 #JavaScript #NodeJS #AsyncAwait #RaceConditions #FrontendDevelopment #BackendDevelopment #SoftwareEngineering #WebDevelopment
To view or add a comment, sign in
-
Explore related topics
Explore content categories
- Career
- Productivity
- Finance
- Soft Skills & Emotional Intelligence
- Project Management
- Education
- Technology
- Leadership
- Ecommerce
- User Experience
- Recruitment & HR
- Customer Experience
- Real Estate
- Marketing
- Sales
- Retail & Merchandising
- Science
- Supply Chain Management
- Future Of Work
- Consulting
- Writing
- Economics
- Artificial Intelligence
- Employee Experience
- Workplace Trends
- Fundraising
- Networking
- Corporate Social Responsibility
- Negotiation
- Communication
- Engineering
- Hospitality & Tourism
- Business Strategy
- Change Management
- Organizational Culture
- Design
- Innovation
- Event Planning
- Training & Development
Once we know the BTS of react, we'll fall in love with it!