React JSX JavaScript XML Syntax: Tutorial, Examples, FAQs & Interview Tips

What is JSX?

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

// 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().

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>
    )
}

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

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.

Key Takeaways

JSX lets you write HTML-like markup inside JavaScript.
You can use JavaScript expressions in JSX with curly braces {}.
JSX must return a single root element unless you use a fragment.
Use className, htmlFor, and camelCase event names in JSX.
Conditional rendering is commonly done with the ternary operator or && operator.
Lists in JSX should use a unique key prop for each item.