JavaScript XML

JSX (sometimes referred to as JavaScript XML) is an XML-like extension to the JavaScript language syntax. Initially created by Facebook for use with React, JSX has been adopted by multiple web frameworks. Being syntactic sugar, JSX is generally transpiled into nested JavaScript function calls structurally similar to the original JSX.

When used with TypeScript, the file extension is .tsx.

Markup

Below is an example of JSX (TSX) code:

import React from 'react';

const App: React.FC = () => {
    return (
        <div>
            <p>Header</p>
            <p>Content</p>
            <p>Footer</p>
        </div>
    ); 
}

export default App;

Nested elements

Multiple elements on the same level need to be wrapped in a single element such as the <div> element shown above, a fragment delineated by <Fragment> or in its shorthand form <>, or returned as an array.

Attributes

JSX provides a range of element attributes designed to mirror those provided by HTML. Custom attributes can also be passed to the component. All attributes will be received by the component as props.

JavaScript expressions

JavaScript expressions (but not statements) can be used inside JSX with curly brackets {}:

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

The example above will render:

<h1>11</h1>

Conditional expressions

If–else statements cannot be used inside JSX but conditional expressions can be used instead. The example below will render { i === 1 ? 'true' : 'false' } as the string 'true' because i is equal to 1.

import React from 'react';

const App: React.FC = () => {
    const i: number = 1;

    return (
        <div>
            <h1>{ i === 1 ? 'true' : 'false' }</h1>
        </div>
    );
}

export default App;

The above will render:

<div>
    <h1>true</h1>
</div>

Functions and JSX can be used in conditionals:

import React from 'react';

const App: React.FC = () => {
    const sections: number[] = [1, 2, 3];

    return (
        <div>
            {sections.map((n, i) => (
                /* 'key' is a React-specific attribute for tracking of list items and their changes */
                /* Each 'key' must be unique */
                <div key={"section-" + n}>
                    Section {n} {i === 0 && <span>(first)</span>}
                </div>
            ))}
        </div>
    );
}

export default App;

The above will render:

<div>
    <div>Section 1 <span>(first)</span></div>
    <div>Section 2</div>
    <div>Section 3</div>
</div>

Code written in JSX requires conversion with a tool such as Babel before it can be understood by web browsers. This processing is generally performed during a software build process before the application is deployed.

See also

• ECMAScript for XML

External links

• Official website, Draft: JSX specification