JSX in React

What is JSX in React?

JSX (JavaScript XML) is a syntax extension for JavaScript that allows developers to write HTML-like code inside JavaScript.

In React, JSX is used to describe how the UI should look.

Instead of writing UI elements using JavaScript functions, JSX allows us to write UI in a more readable and familiar HTML-like syntax.

1. Why do we need JSX?

Without JSX, we need to use JavaScript functions to create React elements.

Without JSX:

import React from 'react';

function App() {
    return React.createElement(
        'h1',
        null,
        'Hello React!'
    );
}

export default App;

With JSX:

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

export default App;

Both approaches create the same UI.

As you can see, JSX makes the code simpler and easier to understand.

2. How does JSX work internally?

Browsers cannot directly understand JSX syntax.

React applications use tools such as Babel or the build tooling provided by Vite to transform JSX into JavaScript.

For example:

JSX code:

const element = <h1>Hello React!</h1>;

Transformed JavaScript (modern JSX runtime):

import { jsx } from 'react/jsx-runtime';

const element = jsx('h1', {
    children: 'Hello React!'
});

React then uses this element description to render the UI.

Note: Vite commonly uses esbuild for JSX transformation during development and supports production builds through its build tooling.

3. Important JSX rules

There are some important rules to follow when writing JSX.

Rule 1: Return a single parent element

You cannot return multiple adjacent JSX elements without wrapping them in a parent.

Incorrect:

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

Correct:

function App() {
    return (
        <div>
            <h1>Hello</h1>
            <p>Welcome to React</p>
        </div>
    );
}

Alternatively, use React Fragment:

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

Fragment groups elements without adding an extra DOM element.

Rule 2: Use className instead of class

In HTML:

<h1 class="title">Hello React</h1>

In JSX:

<h1 className="title">Hello React</h1>

Because class is a JavaScript reserved keyword, JSX uses className for CSS classes.

Rule 3: Use curly braces for JavaScript expressions

You can write JavaScript expressions inside JSX using {}.

Example:

function App() {

    const name = "Syed";
    const age = 48;

    return (
        <div>
            <h1>Hello, {name}</h1>
            <p>Age: {age}</p>
            <p>Next year: {age + 1}</p>
        </div>
    );
}

Output:

Hello, Syed
Age: 48
Next year: 49

Rule 4: Use self-closing tags

In HTML, some elements don't require closing tags.

In JSX, every element must be properly closed.

Example:

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

<input type="text" />

<br />

Rule 5: Use camelCase for most JSX attributes

Some HTML attributes have different names in JSX.

For example:

<button onClick={() => alert("Hello!")}>
    Click Me
</button>

Rule 6: JavaScript expressions are allowed, but statements are not directly allowed

You can use expressions such as:

<h1>{10 + 20}</h1>

<h1>{name.toUpperCase()}</h1>

<p>{isLoggedIn ? "Welcome" : "Please Login"}</p>

But you cannot directly write statements such as if, for, or switch inside JSX curly braces.

For conditional rendering, use the ternary operator or prepare the value before returning JSX.

4. JSX with conditional rendering

Example:

function App() {

    const isLoggedIn = true;

    return (
        <div>
            {isLoggedIn
                ? <h1>Welcome User!</h1>
                : <h1>Please Login</h1>
            }
        </div>
    );
}

Output:

Welcome User!

5. JSX vs HTML

6. Is JSX mandatory in React?

No. JSX is optional in React.

You can develop React applications without JSX using React.createElement() or the modern JSX runtime APIs.

However, JSX is strongly preferred because it makes UI code more readable and maintainable.

Interview Question: What is JSX?

JSX stands for JavaScript XML. It is a syntax extension of JavaScript that allows us to write HTML-like markup inside JavaScript code. React uses JSX to describe UI components. JSX is transformed into JavaScript by build tools such as Babel or esbuild before the browser executes the application.

Important: JSX is not HTML. It looks similar to HTML, but it follows JavaScript and React-specific syntax rules.