JSX — JavaScript XML

What is JSX?

JSX (JavaScript XML) is a syntax extension for JavaScript that lets you write HTML-like markup inside JavaScript. It is not valid JavaScript — a build tool (Babel/Vite) transforms it into regular React.createElement() calls.

JSX makes React components much easier to read and write. You can embed any JavaScript expression inside JSX using curly braces {}.

JSX Basics — Syntax, Expressions, Rules

// JSX looks like HTML but it's JavaScript
function Greeting() {
    const name = "Alice"
    const age = 25
    const isLoggedIn = true
    const styles = { color: 'blue', fontSize: '18px' }

    return (
        // Must have ONE root element (or use Fragment)
        <div className="container">  {/* class â†’ className */}

            {/* Embed JavaScript expressions with {} */}
            <h1>Hello, {name}!</h1>
            <p>Age: {age}</p>
            <p>2 + 2 = {2 + 2}</p>
            <p>{name.toUpperCase()}</p>

            {/* Conditional rendering */}
            {isLoggedIn ? <p>Welcome back!</p> : <p>Please log in</p>}
            {isLoggedIn && <button>Logout</button>}

            {/* Inline styles — object, not string */}
            <p style={styles}>Styled text</p>
            <p style={{ color: 'red', fontWeight: 'bold' }}>Red bold</p>

            {/* Self-closing tags must close */}
            <img src="photo.jpg" alt="Photo" />
            <input type="text" />
            <br />

        </div>
    )
}

// Fragment — avoid extra DOM node
function FragmentExample() {
    return (
        <>  {/* shorthand for <React.Fragment> */}
            <h1>Title</h1>
            <p>Paragraph</p>
        </>
    )
}

// JSX is syntactic sugar for React.createElement()

// JSX version (what you write):
const element = <h1 className="title">Hello, World!</h1>

// What Babel compiles it to:
const element = React.createElement(
    'h1',
    { className: 'title' },
    'Hello, World!'
)

// Nested JSX:
const card = (
    <div className="card">
        <h2>Title</h2>
        <p>Content</p>
    </div>
)

// Compiled to:
const card = React.createElement(
    'div',
    { className: 'card' },
    React.createElement('h2', null, 'Title'),
    React.createElement('p', null, 'Content')
)

// JSX Rules:
// 1. Must return a single root element
// 2. All tags must be closed (<br /> not <br>)
// 3. Use className instead of class
// 4. Use htmlFor instead of for (in labels)
// 5. camelCase for event handlers: onClick, onChange
// 6. JavaScript expressions in {}, not statements

JSX with Lists and Dynamic Content

JSX — Lists, Dynamic Classes, Attributes

function DynamicJSX() {
    const fruits = ['Apple', 'Banana', 'Cherry']
    const user = { name: 'Bob', role: 'admin' }
    const isActive = true

    return (
        <div>
            {/* Render a list — always provide a key */}
            <ul>
                {fruits.map((fruit, index) => (
                    <li key={index}>{fruit}</li>
                ))}
            </ul>

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

            {/* Spread attributes */}
            <input {...{ type: 'text', placeholder: 'Enter name', maxLength: 50 }} />

            {/* Computed attribute */}
            <img
                src={`/avatars/${user.name.toLowerCase()}.jpg`}
                alt={`${user.name}'s avatar`}
            />

            {/* Render nothing */}
            {null}
            {undefined}
            {false}
            {/* These render nothing — useful for conditional rendering */}

            {/* But 0 DOES render! */}
            {/* {0 && <p>This won't show</p>} — renders "0"! */}
            {/* Fix: */}
            {0 > 0 && <p>This won't show</p>}
        </div>
    )
}

Previous Next

JSX — JavaScript XML

What is JSX?

JSX with Lists and Dynamic Content

Ready to Level Up Your Skills?