View source for JavaScript XML

{{Short description|JavaScript syntax extension}}
{{Infobox programming language
| name = 
| logo = <!-- Filename -->
| logo caption = 
| collapsible = <!-- to make screenshot collapsible -->
| screenshot = <!-- Filename -->
| screenshot caption = 
| sampleCode = 
| paradigm = [[domain-specific language]], language extension
| family = [[ECMAScript]], [[XML]]
| designer = Facebook
| developer = Facebook
| released = {{Start date and age|2014|08|29}}<ref>{{cite web |title=Initial commit of the website · facebook/jsx@c40e9b6 |url=https://github.com/facebook/jsx/commit/c40e9b6d5aca77d5af3bfa63e3623b58d21ea5e4 |website=GitHub |language=en}}</ref>
| latest release version = 
| latest release date = <!-- {{Start date and age|YYYY|MM|DD|df=yes/no}} -->
| latest preview version = 
| latest preview date = <!-- {{Start date and age|YYYY|MM|DD|df=yes/no}} -->
| typing = weak, dynamic
| license = 
| file ext = <code>.jsx</code>, <code>.tsx</code>
| file format = <!-- or: | file formats = -->
| website = {{URL|https://github.com/facebook/jsx}}
| implementations = [[Babel (transcompiler)|Babel]] <!-- as in: parsers-transpilers -->
| dialects = [[React (JavaScript library)|React]] <!-- as in: things that determine the pragma interface -->
| influenced by = 
| influenced = 
}}
'''JSX''' (sometimes referred to as '''JavaScript XML''') is an [[XML]]-like extension to the [[JavaScript]] language syntax.<ref name=":0">{{cite web|title=Draft: JSX Specification|url=https://facebook.github.io/jsx/|website=JSX|publisher=Facebook|access-date=7 April 2018}}</ref> Initially created by [[Meta Platforms|Facebook]] for use with [[React (JavaScript library)|React]], JSX has been adopted by multiple [[web framework]]s.<ref name="Larsen2021">{{cite book |last=Larsen|first=John|title=React Hooks in Action With Suspense and Concurrent Mode| year= 2021|publisher= Manning |isbn= 978-1720043997}}</ref>{{rp|5}}<ref name=Wieruch>{{cite book |last=Wieruch|first=Robin|title=The Road to React |date=14 September 2018 |publisher= Leanpub|isbn= 978-1720043997}}</ref>{{rp|11}} Being [[syntactic sugar]], JSX is generally [[transpiler|transpiled]] into nested JavaScript function calls structurally similar to the original JSX.

When used with [[TypeScript]], the file extension is ''.tsx''.<ref>{{Cite web |title=Documentation - JSX |url=https://www.typescriptlang.org/docs/handbook/jsx.html |access-date=2025-07-13 |website=www.typescriptlang.org |language=en}}</ref>

== Process ==
Code written in JSX requires conversion with a tool such as [[Babel (compiler)|Babel]] before it can be understood by web browsers.<ref>{{Cite book|url=https://books.google.com/books?id=Tg9QDwAAQBAJ|title=React for Real: Front-End Code, Untangled|last=Fischer|first=Ludovico|date=2017-09-06|publisher=Pragmatic Bookshelf|isbn=9781680504484|language=en}}</ref><ref name=Larsen2021/>{{rp|5}} This processing is generally performed during a [[software build]] process before the application is [[Software deployment|deployed]].

The transpiler (such as Babel) must make assumptions about the nature of the JSX use, otherwise it would not know what to convert JSX tags into. In the case of Babel (below), we use it in a mode which assumes that the tags are to be used with react, so it converts JSX tags into function calls to the React JSX Runtime, which return values corresponding to the internal representation of these tags.<ref name=babel-jsx>{{cite web |title=@babel/plugin-transform-react-jsx · Babel |url=https://babeljs.io/docs/babel-plugin-transform-react-jsx |website=babeljs.io |language=en}}</ref> <code>@babel/plugin-transform-react-jsx</code>, which Babel uses for JSX, provides some flexibility for adapting to other platforms by allowing specifying alternative pragmas that take the role of <code>React.createElement</code> and <code>React.Fragment</code>.<ref name=babel-jsx/>

==Markup==
The following examples include both the React-JSX/TSX code and the transpiled output from Babel.<!-- To minimize transformation, the "last 2 Chrome versions" target is used. The /*#__PURE__*/ comments around every _jsx/_jsxs call are removed because they are not relevant here. -->

=== Basic example ===
{|class=wikitable
! width=40% | TSX Code
! width=60% | Transpiled output (Babel)
|-
|<syntaxhighlight lang="tsx">
import React from 'react';

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

export default App;
</syntaxhighlight>
|<syntaxhighlight lang="js">
import React from 'react';
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
const App = () => {
  return /*#__PURE__*/_jsxs("div", {
    children: [/*#__PURE__*/_jsx("p", {
      children: "Header"
    }),/*#__PURE__*/_jsx("p", {
      children: "Content"
    }), /*#__PURE__*/_jsx("p", {
      children: "Footer"
    })]
  });
};
export default App;
</syntaxhighlight>
|}

The <code>/*#__PURE__*/</code> comment added by Babel indicates that the tagged call is to a [[pure function]], which is relevant for later steps such as [[tree shaking]].<ref>{{cite web |title=compiler-notations-spec/pure-notation-spec.md at main · javascript-compiler-hints/compiler-notations-spec |url=https://github.com/javascript-compiler-hints/compiler-notations-spec/blob/main/pure-notation-spec.md |website=GitHub |language=en}}</ref> Because it is not necessary for the functioning of the code, following examples have this annotation removed for ease of reading.

The above transpiler output indicates an output from React 17+. In older versions the output would instead be a more straightforward:
<syntaxhighlight lang="js">
const App = () => {
  return React.createElement("div", null, 
    React.createElement("p", null, "Header"),
    React.createElement("p", null, "Content"), 
    React.createElement("p", null, "Footer"));
};
export default App;
</syntaxhighlight>

The classic interface remains commonly used by non-React users of JSX.

===Nested elements===
Multiple elements on the same level need to be wrapped in a single element such as the <code><nowiki><div></nowiki></code> element shown above, a fragment delineated by <code><nowiki><Fragment></nowiki></code> or in its shorthand form <code><nowiki><></nowiki></code>, or returned as an array.<ref>{{cite web |url=https://reactjs.org/blog/2017/09/26/react-v16.0.html#new-render-return-types-fragments-and-strings |title=React v16.0§New render return types: fragments and strings |last=Clark |first=Andrew |date=September 26, 2017 |website=React Blog}}</ref><ref>{{cite web |url=https://reactjs.org/docs/react-component.html#render |title=React.Component: render |website=React}}</ref><ref name=Wieruch/>{{rp|68–69}}

===Attributes===
JSX provides a range of element attributes designed to mirror those provided by HTML. Custom attributes can also be passed to the component.<ref>{{cite web |url=https://reactjs.org/blog/2017/09/26/react-v16.0.html#support-for-custom-dom-attributes |title=React v16.0§Support for custom DOM attributes |last=Clark |first=Andrew |date=September 26, 2017 |website=React Blog}}</ref> All attributes will be received by the component as props (properties).

Valid JSX attribute names are valid JSX ''identifiers'' (variable names), which differ from ECMAScript identifiers mainly by additionally allowing the <code>-</code> (hyphen-minus) character in a non-starting position. This allows HTML attributes with dashes such as <code>data-*</code> and <code>aria-role</code> to be used easily. Attributes still with invalid characters may be notated with the <code>{... spread}</code> syntax.<ref name=":0"/>

{|class=wikitable
! width=40% | TSX Code
! width=60% | Transpiled output (Babel)
|-
|<syntaxhighlight lang="jsx">
<a
  href="https://en.wikipedia.org"
  data-note="Wikipedia"
  {...{ ":tricky-property-name": a }} // XML property may contain and start with colon
>
  Wikipedia
</a>;

</syntaxhighlight>
|<syntaxhighlight lang="js">
React.createElement(
  "a",
  {
    href: "https://en.wikipedia.org",
    "data-note": "Wikipedia",
    ":tricky-property-name": a,
  },
  "Wikipedia",
);
</syntaxhighlight>
|}

===Custom components===
Custom "tags" (components) are simply JavaScript functions that accept a specific calling style.
{|class=wikitable
! width=40% | JSX Code
! width=60% | Transpiled output (Babel)
|-
|<syntaxhighlight lang="jsx">
class Hello extends Component {
  render() {
    return <h1>Hello, {this.props.name}!</h1>;
  }
}

function Jello({ name }) {
  return <h1>Jello, {name}!</h1>;
}

export default function App() {
  return (
    <>
      <Hello name="Sarah" />
      <Jello name="Connor" />
    </>
  );
}
</syntaxhighlight>
|<syntaxhighlight lang=js>
class Hello extends Component {
  render() {
    return React.createElement("h1", null, "Hello, ", this.props.name, "!");
  }
}

function Jello({ name }) {
  return React.createElement("h1", null, "Jello, ", name, "!");
}

function App() {
  return React.createElement(
    React.Fragment,
    null,
    React.createElement(Hello, {
      name: "Sarah",
    }),
    React.createElement(Jello, {
      name: "Connor",
    }),
  );
}
</syntaxhighlight>
|}

Here <code>name="Connor"</code> simply becomes an option <code>{ name: "Connor" }</code>.

Components that contain wrap components can be defined using the <code>children</code> attribute that we've already seen in the transpiled output:

{|class=wikitable
! width=40% | JSX Code
! width=60% | Transpiled output (Babel)
|-
|<syntaxhighlight lang="jsx">
const Wrapper = (props) => {
  return (
    <div style={{ backgroundColor: 'lightgray', padding: '20px', border: '1px solid black' }}>
      <h2>Inside the Wrapper:</h2>
      {props.children}
    </div>
  );
};
<Wrapper>
  <p>Paragraph</p>
  <p>Another one!</p>
</Wrapper>
</syntaxhighlight>
|<syntaxhighlight lang=js>
const Wrapper = (props) => {
  return React.createElement(
    "div",
    {
      style: {
        backgroundColor: "lightgray",
        padding: "20px",
        border: "1px solid black",
      },
    },
    React.createElement("h2", null, "Inside the Wrapper:"),
    props.children,
  );
};

React.createElement(
  Wrapper,
  null,
  React.createElement("p", null, "Paragraph"),
  React.createElement("p", null, "Another one!"),
);
</syntaxhighlight>
|}

Valid JSX tag names are valid JSX ''identifiers'' (variable names), which mean that hypenated XML and HTML tags can be used without issue. However, custom components cannot have hyphenated names due to limitation from ECMAScript grammar.<ref name=":0"/>

===JavaScript expressions===
JavaScript [[Expression (computer science)|expressions]] (but not [[Statement (computer science)|statements]]) can be used inside JSX with curly brackets <code>{}</code>:<ref name=Wieruch/>{{rp|14–16}}
{|class=wikitable
! width=40% | JSX Code
! width=60% | Transpiled output (Babel)
|-
|<syntaxhighlight lang="jsx">
<h1>{10 + 1}</h1>
</syntaxhighlight>
|<syntaxhighlight lang="js">
React.createElement("h1", null, 10 + 1);
</syntaxhighlight>
|}

The example above will render:
<syntaxhighlight lang="html">
<h1>11</h1>
</syntaxhighlight>

===Conditional expressions===
[[Conditional (computer programming)|If–else statements]] cannot be used inside JSX but conditional expressions can be used instead.
The example below will render {{code|2=js|1={ i === 1 ? 'true' : 'false' } }} as the string <code>'true'</code> because <code>i</code> is equal to 1.
{|class=wikitable
! width=40% | TSX Code
! width=60% | Transpiled output (Babel)
|-
|<syntaxhighlight lang="tsx">
import React from 'react';

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

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

export default App;
</syntaxhighlight>
|<syntaxhighlight lang="js">
import React from 'react';
const App = () => {
  const i = 1;
  return (
    React.createElement(
      "div",
      null,
      React.createElement("h1", null, i === 1 ? "true" : "false"),
    )
  );
};
export default App;
</syntaxhighlight>
|}

The above will render:
<syntaxhighlight lang="html">
<div>
    <h1>true</h1>
</div>
</syntaxhighlight>

Functions and JSX can be used in conditionals:<ref name=Wieruch/>{{rp|88–90}}
{|class=wikitable
! width=40% | TSX Code
! width=60% | Transpiled output (Babel)
|-
|<syntaxhighlight lang="tsx">
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;
</syntaxhighlight>
|<syntaxhighlight lang="js">
import React from 'react';

const App = () => {
  const sections = [1, 2, 3];
  return React.createElement(
    "div",
    null,
    sections.map((n, i) =>
      React.createElement(
        "div",
        { key: "section-" + n },
        "Section ",
        n,
        " ",
        i === 0 && React.createElement("span", null, "(first)"),
      ),
    ),
  );
};

export default App;
</syntaxhighlight>
|}

The above will render:
<syntaxhighlight lang="html">
<div>
    <div>Section 1 <span>(first)</span></div>
    <div>Section 2</div>
    <div>Section 3</div>
</div>
</syntaxhighlight>

=== Babel: pragmas ===
Transpilers such as Babel offer the ability to target function calls other than those from React. Here Babel is directed to call <code>tag</code> and <code>frag</code> instead:
{|class=wikitable
! width=50% | TSX Code
! width=50% | Transpiled output (Babel)
|-
|<syntaxhighlight lang="tsx">
// @jsx tag
// @jsxfrag frag
const App = () => {
  const sections = [1, 2, 3];
  return (
    <div>
      {sections.map((n, i) => (
        <div key={"section-" + n}>
          Section {n} {i === 0 && <span>(first)</span>}
        </div>
      ))}
    </div>
  );
};
</syntaxhighlight>
|<syntaxhighlight lang="js">
// @jsx tag
// @jsxfrag frag
const App = () => {
  const sections = [1, 2, 3];
  return tag(
    "div",
    null,
    sections.map((n, i) =>
      tag("div", { key: "section-" + n }, "Section ", n, " ",
          i === 0 && tag("span", null, "(first)")),
    ),
  );
};
</syntaxhighlight>
|}

With different versions of <code>tag</code> and <code>frag</code>, different representations of the input can be produced:
{|class=wikitable
! width=50% | JS Code
! width=50% | Program output
|-
|<syntaxhighlight lang="tsx">
// Object tree.
// Fragments are represented as arrays
function frag(...children) {
  return children;
}

// Tags are represented as objects
function tag(name, attrs, ...children) {
  // Flattening the array unpacks the fragments
  // Still need to deal with "false"
  const kids = []
  for (x of children.flat(Infinity)) {
    if (x === false || x === null || x === undefined) {
      if (kids.at(-1) === " ") kids.pop()
    }
    else kids.push(x)
  }
  return {name, children: kids, ...(attrs && { attrs })}
}

console.log(JSON.stringify(App()));
</syntaxhighlight>
|<syntaxhighlight lang=js>
{
  "name": "div",
  "children": [
    {
      "name": "div",
      "attrs": { "key": "section-1" },
      "children": [
        "Section ", 1, " ",
        { "name": "span", "children": ["(first)"] }
      ]
    },
    {
      "name": "div",
      "attrs": { "key": "section-2" },
      "children": ["Section ", 2]
    },
    {
      "name": "div",
      "attrs": { "key": "section-3" },
      "children": ["Section ", 3]
    }
  ]
}
</syntaxhighlight>
|-
|<syntaxhighlight lang=js>
// Pug-like output
function frag(...children) {
  let kids = [];
  for (const x of children) {
    // Text start with |
    if (!Array.isArray(x)) kids.push("| " + x);  
    else kids.push(...x.flat(Infinity));
  }
}

function tag(name, attrs, ...children) {
  const indent = "  ";
  const attrStr = Object.entries(attrs || {})
    .map(([k, v]) => `${k}="${v}"`)
    .join(", ");
  const head = `${name}${attrStr ? `(${attrStr})` : ""}`;
  let kids = [];
  for (const x of frag(children)) {
    if (x === false) {
      if (kids.at(-1) === "|  ") kids.pop();
    } else kids.push(x);
  }
  if (kids.length == 1)
    // Shorthand syntax for elem>text and for element nesting
    return kids[0].startsWith("| ")
      ? [`${head} ${kids[0].substr(2)}`]
      : [`${head}: ${kids[0]}`];
  return [head, ...kids.map((line) => indent + line)];
}

console.log(App().join('\n'));
</syntaxhighlight>
|<syntaxhighlight lang=pug>
div
  div(key="section-1")
    | Section 
    | 1
    |  
    span (first)
  div(key="section-2")
    | Section 
    | 2
  div(key="section-3")
    | Section 
    | 3
</syntaxhighlight>
|}

== Dialects ==
The above covers the conversion from JSX to ECMAScript code. As indicated in the "pragma" section, the ECMAScript code that receives JSX-derived objects are free to do whatever it wants to these data:

* Frontend applications such as React generally translate these data structures into function calls that manipulate the [[Document Object Model]] of a page. These libraries also have server-side rendering variants that, via manipulating a "browserless" DOM, produces an ordinary HTML or XML webpage by serializing the DOM.<ref>{{cite web |title=createRoot – React |url=https://react.dev/reference/react-dom/client/createRoot |website=react.dev |language=en}}</ref>
* Backend applications may opt to generate HTML or XML directly by piecing together strings, effectively acting as a template engine.<ref>{{cite web |title=html/benchmarks at master · kitajs/html |url=https://github.com/kitajs/html/tree/master/benchmarks |website=GitHub |language=en}}</ref>
* More niche applications (demonstrated above) may not have anything to do with HTML or XML entirely.

As far as HTML and XML are involved, the most common areas of divergence are the handling of attributes and the setup of available components.

=== Attributes ===
==== Names ====
Although JSX defines how attributes should be parsed &ndash; and Babel maintains a convention about how it should be conveyed to other ECMAScript code &ndash; neither define how these attributes map to actual HTML and XML attributes. For example, React uses the following convention to minimize the need for the <code>{... spread}</code> syntax:<ref>{{cite web |title=React DOM Components – React |url=https://react.dev/reference/react-dom/components |website=react.dev |language=en}}</ref>

* Plain alphanumerical attribute names are unchanged.
* Hyphenated attribute names from HTML are converted to camelCase, with the exception of <code>data-*</code> and <code>aria-*</code>. This is in line with the JavaScript DOM API.
* The <code>xlink:*</code> attribute names are converted to camelCase, e.g. <code>xink:href</code> becomes <code>xlinkHref</code>.

React's DOM renderer has a preset list of attributes that it knows about. Some of these are for conversion to HTML/XML, others are for its internal use. In the production (non-development) mode, only these attributes are allowed on output tags unless the tag is "svg" or "math".<ref>{{cite web |title=react/packages/react-dom-bindings/src/client/ReactDOMComponent.js at 64b4605cb82367fa78a08b99bbee1c800e6af21a · facebook/react |url=https://github.com/facebook/react/blob/64b4605cb82367fa78a08b99bbee1c800e6af21a/packages/react-dom-bindings/src/client/ReactDOMComponent.js#L2533 |website=GitHub |language=en}}</ref>

==== Values ====
The HTML <code>style</code> attribute applies a collection of [[CSS]] styles to the element with it. As an ergonomic measure, React-DOM not only accepts passing this value in string form, but also as a JavaScript object. Instead of <code>&lt;div style={"color:" + clr}&gt;</code>, one could write <code>&lt;div style={<nowiki/>{ color: clr }<nowiki/>}&gt;</code>. The implementation of the "style" function automatically translates the object to the correct string format. A similar camelcase-renaming operation is done to simplify the use of styles with hyphenated names.<ref name=dom>{{cite web |title=Common components (e.g. ) – React |url=https://react.dev/reference/react-dom/components/common |website=react.dev |language=en}}</ref>

React-DOM also allows passing JavaScript functions instead of strings as values for the event handler attributes.<ref name=dom/>

=== Components ===
Depending on the output language, different components (which appear like HTML/XML "tags") may be available. For example, the HTML tags in React come from <code>react-dom</code>, which is not used when targeting a different language. The runtime may also predefine some components: <code>&lt;Fragment&gt;</code> is one such example, though it has become universal via Babel's convention.<ref>{{cite web |title=Built-in React Components – React |url=https://react.dev/reference/react/components |website=react.dev |language=en}}</ref>

==See also==
* [[ECMAScript for XML]] (E4X)

==References==
{{Reflist}}

==External links==
* {{Official website|https://facebook.github.io/jsx}}, Draft: JSX specification

[[Category:2014 software]]
[[Category:Facebook software]]
[[Category:JavaScript]]
[[Category:Open formats]]
[[Category:XML markup languages]]
<!-- Hidden categories below -->
[[Category:Articles with example JavaScript code]]