Part 3: Understanding JSX: Syntax, Expressions, and Compilation

JSX stands for JavaScript XML. It is a syntax extension for JavaScript that allows you to write HTML-like markup directly inside JavaScript code.

1. Why JSX?

Historically, web development separated technologies: HTML for structure, CSS for presentation, and JavaScript for logic in separate files.

React recognized that rendering logic is inherently coupled with UI logic (handling events, managing state, preparing data for display). Instead of putting markup and logic in separate files, React couples them together in loosely coupled units called Components.

2. How JSX Compiles to JavaScript

JSX is not valid standard ECMAScript that browsers understand natively. Compilers like Babel or SWC transform JSX into standard JavaScript function calls.

What you write (JSX):

const element = <h1 className="title">Hello Devify!</h1>;

What the compiler produces (Modern React JSX Transform):

import { jsx as _jsx } from "react/jsx-runtime";

const element = _jsx("h1", {
  className: "title",
  children: "Hello Devify!"
});

Because JSX compiles down to standard JavaScript objects, you can: - Assign JSX to variables. - Pass JSX as arguments to functions. - Return JSX from functions. - Use JSX inside if statements and loops.

3. Essential JSX Rules

Rule 1: Return a Single Root Element

Every component must return a single enclosing parent element or a React Fragment (<> ... </>):

function GoodComponent() {
  return (
    <>
      <h1>Title</h1>
      <p>Description</p>
    </>
  );
}

Rule 2: Close All Tags

In JSX, every tag must be explicitly closed:

<img src="/logo.png" alt="Logo" />
<input type="text" placeholder="Enter username" />

Rule 3: CamelCase Property Names

Attributes use camelCase: - class becomes className - for becomes htmlFor - onclick becomes onClick

4. Embedding JavaScript Expressions

You can embed any valid JavaScript expression inside JSX by wrapping it in curly braces {}:

export default function UserGreeting() {
  const user = {
    firstName: "Sarah",
    lastName: "Connor",
    role: "System Architect",
    avatarUrl: "https://images.unsplash.com/photo-1494790108377-be9c29b29330?w=150",
  };

  const calculateExperience = (startYear) => {
    return new Date().getFullYear() - startYear;
  };

  return (
    <div className="user-card">
      <img src={user.avatarUrl} alt={`${user.firstName}'s avatar`} />
      <h2>{user.firstName.toUpperCase()} {user.lastName}</h2>
      <p className="badge">Role: {user.role}</p>
      <p>Experience: {calculateExperience(2018)} years</p>
    </div>
  );
}

Key Takeaways

• JSX is syntactic sugar over React.createElement or jsx() runtime calls.
• Always return a single root element or use Fragments (<> ... </>).
• Use curly braces {} to embed any JavaScript expression directly in markup.

In Part 4, we will explore React Components and the differences between functional and class-based components!