JSX stands for JavaScript XML. It is a syntax extension for JavaScript created by Meta for use with React.

JSX allows developers to write HTML-like markup directly inside JavaScript files alongside logic, variables, and event handlers.

Syntax Example:

const element = <h1>Hello, World!</h1>;

Although JSX looks like HTML, it is not HTML. It is full-fledged JavaScript code syntactically disguised as HTML to make user interface development intuitive and expressive.

Before JSX, template engines (like Handlebars or Angular templates) separated HTML logic from JS files. Meta engineers realized that UI rendering logic is inherently coupled with other UI logic (event handling, state changes, formatting).

Key Advantages of JSX:

1. Visual Clarity: HTML-like structures are vastly easier to read, write, and maintain than deeply nested JavaScript function calls.
2. Full Power of JavaScript: You have access to native JavaScript expressions, array methods (map, filter), and ternary operators inside your templates.
3. Compile-Time Error Checking: Syntax errors and unclosed tags are caught instantly during compilation before reaching production.
4. Built-in Security Against XSS (Cross-Site Scripting): By default, React DOM escapes any values embedded in JSX before rendering them. Everything is converted to a string, preventing malicious script injection.

Browsers cannot read JSX directly. When you run your application, build tools like Babel or SWC compile every JSX element down to standard JavaScript function calls (React.createElement()).

What You Write in JSX:

const element = (
  <h1 className="title" style={{ color: "blue" }}>
    Hello, Ravindra!
  </h1>
);

What Babel Compiles It To:

const element = React.createElement(
  'h1',
  { className: 'title', style: { color: 'blue' } },
  'Hello, Ravindra!'
);

React.createElement Signature:

React.createElement(type, [props], [...children])

• type: HTML tag string ('h1', 'div') or component function.
• props: Object containing attributes and inline styles.
• children: Inner content or child elements.

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

What Counts as a JavaScript Expression?

An expression is any piece of code that evaluates to a single value (e.g. variables, math operations, string concatenation, function calls, ternary operators).

const userName = "Ravindra Nath Jha";
const userAge = 25;
const isLoggedIn = true;

function calculateScore(a, b) {
  return a * b;
}

export default function UserCard() {
  return (
    <div className="card">
      <h2>Developer: {userName.toUpperCase()}</h2>
      <p>Age: {userAge + 1} years old</p>
      <p>Status: {isLoggedIn ? "Active Member ✅" : "Guest ❌"}</p>
      <p>Calculated Score: {calculateScore(10, 5)}</p>
    </div>
  );
}

Note: Statements (like if/else blocks, for loops, or while loops) are NOT expressions and cannot be placed directly inside {}. Use ternary operators or logical && instead.

Because JSX is closer to JavaScript than HTML, React uses camelCase property naming for DOM attributes instead of HTML attribute names.

Common Attribute Translations:

• class ➔ className
• for ➔ htmlFor
• tabindex ➔ tabIndex
• onclick ➔ onClick
• onchange ➔ onChange
• autocomplete ➔ autoComplete

<label htmlFor="user-email">Email Address:</label>
<input id="user-email" className="input-field" tabIndex={1} onChange={handleChange} />

In standard JavaScript (ES6+), class is a reserved language keyword used to declare JavaScript classes (class Car {}).

If React allowed class="title" inside JSX (which is JavaScript under the hood), the JavaScript parser would throw a syntax conflict. Therefore, React uses className to assign CSS classes to elements.

Inline styles in JSX are not passed as CSS strings. Instead, they are passed as JavaScript Objects where property names use camelCase.

Notice the outer {} opens JavaScript mode, and the inner {} creates the object:

const cardStyle = {
  backgroundColor: "#002057",
  color: "#ffffff",
  padding: "20px",
  borderRadius: "12px",
  boxShadow: "0 4px 12px rgba(0,0,0,0.1)"
};

function StyledCard() {
  return (
    <div style={cardStyle}>
      <h3 style={{ fontSize: "24px", marginTop: 0 }}>Inline Style Example</h3>
      <p style={{ color: "#ff7b00", fontWeight: "bold" }}>Highlighted Accent Text</p>
    </div>
  );
}

In HTML5, self-closing tags like <img>, <input>, and <br> do not require a closing slash.

In JSX, ALL self-closing tags MUST be explicitly closed with />. Forgetting the slash will cause a compilation syntax error!

// ❌ WRONG (HTML style - Error in JSX)
<img src="avatar.jpg" alt="User">
<input type="text">
<br>

// ✅ CORRECT (JSX style)
<img src="avatar.jpg" alt="User" />
<input type="text" />
<br />

A React component MUST return a single root element.

Why?

Remember that JSX transpile to React.createElement(). A JavaScript function cannot return two values simultaneously without wrapping them in an array or container.

// ❌ WRONG (Multiple adjacent root elements)
return (
  <h1>Title</h1>
  <p>Paragraph</p>
);

// ✅ CORRECT (Wrapped in a parent div)
return (
  <div>
    <h1>Title</h1>
    <p>Paragraph</p>
  </div>
);

Wrapping elements in extra <div> tags can pollute your HTML DOM tree, breaking CSS Flexbox/Grid layouts.

React Fragments allow you to group multiple adjacent elements without adding extra nodes to the DOM.

// 1. Shorthand Syntax (Most Common)
function ProductDetails() {
  return (
    <>
      <h2>iPhone 15 Pro</h2>
      <p>Price: $999</p>
    </>
  );
}

// 2. Explicit Syntax (Required when passing a key in map loops)
import { Fragment } from 'react';

function ProductList({ products }) {
  return (
    <div>
      {products.map((item) => (
        <Fragment key={item.id}>
          <h3>{item.name}</h3>
          <p>{item.price}</p>
        </Fragment>
      ))}
    </div>
  );
}

To write comments inside JSX, you must use JavaScript block comment syntax inside curly braces: {/* Comment here */}.

function App() {
  return (
    <div>
      {/* This is a single-line comment inside JSX */}
      <h1>Welcome to React JSX</h1>
      
      {/* 
        This is a multi-line comment 
        explaining the layout structure 
      */}
      <p>Paragraph content</p>
    </div>
  );
}

1. Using class instead of className: Throws browser console warnings.
2. Forgetting curly braces for non-string values: <Card count="5" /> passes a string "5". Use <Card count={5} /> to pass a number.
3. Placing if/else inside {}: Use ternary operators (condition ? a : b) or logical AND (condition && <Component />).
4. Unclosed Tags: Forgetting /> on <input /> or <img />.
5. Lowercase Component Names: Component tags MUST start with a Capital letter (<UserCard />). Lowercase tags (<userCard />) are treated as built-in HTML tags.

Q1: Can browsers read JSX directly?

*Answer*: No. Browsers can only read standard JavaScript objects. JSX must be transpiled by build tools (Babel or SWC) into React.createElement() calls before execution.

Q2: What is the difference between React.Fragment and a <div>?

*Answer*: A <div> adds a real DOM node to the browser page, which can break CSS Grid/Flexbox layouts. A React.Fragment is invisible in the DOM tree and adds zero extra HTML nodes.

Q3: How does JSX prevent XSS (Cross-Site Scripting) attacks?

*Answer*: React DOM automatically escapes any values embedded in JSX before rendering them. Everything is converted to a string, preventing malicious script tag execution.

Here is a complete, real-world JSX component demonstrating expressions, ternary conditions, camelCase attributes, and inline styles:

Replace src/App.jsx with this code to test and verify all JSX rules, comments, fragments, and dynamic bindings in your live development server: