React JSX JavaScript XML Syntax

What is JSX?

JSX is a JavaScript syntax extension that describes a React element tree. Expressions inside braces are evaluated as JavaScript values, while lowercase names describe host elements and capitalized names refer to components.

Use JSX to make structure and data flow readable, not to hide large calculations. Keep expressions pure, provide stable keys for repeated siblings, map HTML differences such as className correctly, and remember that JSX is transformed before the browser executes it.

JSX stands for JavaScript XML. It is the syntax React uses to describe the user interface in a way that looks similar to HTML, while still being written inside JavaScript.

JSX makes React code easier to read because the structure of the UI appears directly inside the component. Build tools such as Babel or Vite convert JSX into regular JavaScript before the browser runs it.

JSX Basics

function Welcome() {
    const name = 'Aman'

    return (
        <div className="welcome-box">
            <h1>Hello, {name}!</h1>
            <p>Welcome to React JSX.</p>
        </div>
    )
}

export default Welcome

What is JSX? - JSX Example

// JSX version
const element = <h1 className="title">Hello, World!</h1>

// React converts it into JavaScript
const element = React.createElement(
    'h1',
    { className: 'title' },
    'Hello, World!'
)

Why JSX is Useful

Writing UI with plain React.createElement() becomes difficult to read as the layout grows. JSX keeps the code more natural and closer to the final structure of the page.

JSX also works very well with JavaScript expressions. You can show variables, call methods, render content conditionally, and create lists directly inside the markup.

Using JavaScript Inside JSX

You can use JavaScript expressions inside JSX by wrapping them in curly braces {}. This is one of the most important ideas in React.

Expressions in JSX

function Profile() {
    const user = 'Sara'
    const age = 22

    return (
        <div>
            <h2>User: {user}</h2>
            <p>Age: {age}</p>
            <p>Next year age: {age + 1}</p>
            <p>Uppercase name: {user.toUpperCase()}</p>
        </div>
    )
}

JSX Rules

JSX looks like HTML, but it follows a few React-specific rules.

Return one root element - wrap multiple elements inside one parent element or a fragment
Close all tags - for example <img />, <input />, and <br />
Use className instead of class in JSX
Use htmlFor instead of for in label elements
Use camelCase event names like onClick and onChange

Common JSX Rules

function FormExample() {
    return (
        <form className="login-form">
            <label htmlFor="email">Email</label>
            <input id="email" type="email" />
            <br />
            <button onClick={() => alert('Submitted')}>
                Submit
            </button>
        </form>
    )
}

Conditional Rendering in JSX

JSX can render different output based on conditions. The most common approaches are the ternary operator and the logical && operator.

Conditional JSX

function LoginStatus() {
    const isLoggedIn = true

    return (
        <div>
            {isLoggedIn ? <p>Welcome back!</p> : <p>Please log in.</p>}
            {isLoggedIn && <button>Logout</button>}
        </div>
    )
}

JSX with Lists and Dynamic Content

JSX is often used to render repeated content such as menu items, products, or users. In React, this is commonly done with map().

When rendering lists, always use a unique key prop. Keys help React identify which items changed, were added, or were removed.

Lists and Dynamic JSX

function DynamicJSX() {
    const fruits = ['Apple', 'Banana', 'Cherry']
    const isActive = true

    return (
        <div>
            <ul>
                {fruits.map((fruit) => (
                    <li key={fruit}>{fruit}</li>
                ))}
            </ul>

            <div className={`card ${isActive ? 'active' : 'inactive'}`}>
                Status: {isActive ? 'Active' : 'Inactive'}
            </div>
        </div>
    )
}

Fragments in JSX

If you want to return multiple elements without adding an extra wrapper element like div, use a fragment.

Fragment Example

function PageTitle() {
    return (
        <>
            <h1>React Course</h1>
            <p>Learn JSX step by step.</p>
        </>
    )
}

Summary

JSX is the syntax React uses to describe the UI. It looks like HTML, but it is really JavaScript with a few special rules. Once you understand expressions, conditions, lists, and fragments, JSX becomes a natural way to build React components.

Before you move on