What is JSX?

JSX is a syntax extension commonly used with React. It allows developers to write HTML-like markup inside JavaScript code. JSX makes it easier to describe what the UI should look like.

1 What Is JSX?

JSX looks similar to HTML, but it is written inside JavaScript and follows JavaScript and React rules.

function Welcome() {
    return (
        <h1>Hello React</h1>
    );
}

The <h1> is JSX syntax. It describes the UI returned by the component.

2 JSX Is Not HTML

JSX looks like HTML, but it is not HTML. There are important differences.

3 JavaScript Expressions in JSX

JavaScript expressions can be placed inside curly braces.

function User() {
    const name = "Rahul";
    const age = 30;

    return (
        <div>
            <h2>Name: {name}</h2>
            <p>Age: {age}</p>
        </div>
    );
}

Anything inside { } is evaluated as a JavaScript expression.

4 Expressions vs Statements

JSX can directly use expressions, such as variables, calculations, function calls, and ternary expressions.

const total = price * quantity;

return <p>Total: ₹{total}</p>;

A normal if statement cannot be placed directly inside JSX braces.

// Not valid JSX
return (
    <div>
        {if (isLoggedIn) {}}
    </div>
);

Instead, use an expression such as a ternary operator or calculate a value before returning JSX.

5 JSX Attributes

function Profile() {
    const imageUrl = "/images/user.png";

    return (
        <img
            src={imageUrl}
            alt="User profile"
        />
    );
}

String values can be written directly:

<img alt="Profile" />

JavaScript values use braces:

<img src={imageUrl} />

6 JSX Must Have One Root

A component cannot normally return multiple sibling elements without wrapping them in a parent or Fragment.

// Incorrect
return (
    <h1>Hello</h1>
    <p>Welcome</p>
);

Use a parent:

return (
    <div>
        <h1>Hello</h1>
        <p>Welcome</p>
    </div>
);

Or use a Fragment:

return (
    <>
        <h1>Hello</h1>
        <p>Welcome</p>
    </>
);

7 Closing Tags

JSX requires elements to be correctly closed.

<input />
<img src="/logo.png" alt="Logo" />

8 className

Use className instead of HTML's class.

<div className="card">
    Product
</div>

9 Conditional JSX

JSX can use JavaScript expressions to display different content.

function Welcome({ isLoggedIn }) {
    return (
        <div>
            {isLoggedIn
                ? <p>Welcome back</p>
                : <p>Please log in</p>}
        </div>
    );
}

10 Rendering Nothing

A component can return null when it should render nothing.

function AdminPanel({ isAdmin }) {
    if (!isAdmin) {
        return null;
    }

    return <div>Admin Panel</div>;
}

11 JSX and JavaScript Flow

flowchart TD
A[JavaScript Component] --> B[JSX]
B --> C[React Processes JSX]
C --> D[UI Representation]
D --> E[Browser UI]

12 Complete Example

function ProductCard() {
    const product = {
        name: "Laptop",
        price: 75000,
        inStock: true
    };

    return (
        <article>
            <h2>{product.name}</h2>

            <p>
                Price: ₹{product.price}
            </p>

            <p>
                {product.inStock
                    ? "Available"
                    : "Out of Stock"}
            </p>

            <button disabled={!product.inStock}>
                Buy Now
            </button>
        </article>
    );
}

13 Common JSX Mistakes

• Using class instead of className.
• Forgetting to close JSX elements.
• Returning multiple root elements without a wrapper or Fragment.
• Trying to place an if statement directly inside JSX.
• Forgetting that JavaScript expressions use curly braces.
• Writing JavaScript syntax that is not valid inside JSX expressions.

14 Interview Questions

1. What is JSX?
2. Is JSX HTML?
3. Why do we use className instead of class?
4. Why does JSX need a single root?
5. How do you use JavaScript variables inside JSX?
6. Can you use an if statement directly inside JSX?
7. What is a Fragment?
8. Why do JSX attributes sometimes use curly braces?

15 Key Takeaways

• JSX lets you write HTML-like UI syntax inside JavaScript.
• JSX is not the same as HTML.
• JavaScript expressions use curly braces.
• JSX elements must be properly closed.
• Use className for CSS classes.
• Use Fragments when multiple sibling elements need to be returned without an extra DOM element.

Conclusion

JSX is one of the most visible parts of React. It combines JavaScript logic with UI structure in a readable way. Understanding JSX expressions, attributes, fragments, and syntax rules is essential before moving to components and props.