~2025-32447-81: /* Markup */

2025-11-15T00:18:28Z

Markup

New page

{{Short description|JavaScript syntax extension}}
'''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=Larsen>{{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>

==Markup==
Below is an example of JSX (TSX) code:
<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>

===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>{{cite book |last=Wieruch|first=Robin|title=The Road to React |date=14 September 2018 |publisher= Leanpub|isbn= 978-1720043997}}</ref>{{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.

===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>{{cite book |last=Wieruch|first=Robin|title=The Road to React |date=14 September 2018 |publisher= Leanpub|isbn= 978-1720043997}}</ref>{{rp|14-16}}
<syntaxhighlight lang="jsx">
<h1>{10 + 1}</h1>
</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.
<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>
The above will render:
<syntaxhighlight lang="html">
<div>
<h1>true</h1>
</div>
</syntaxhighlight>

Functions and JSX can be used in conditionals:<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|88-90}}
<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>

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>

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>{{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}} This processing is generally performed during a [[software build]] process before the application is [[Software deployment|deployed]].

==See also==
* [[ECMAScript for XML]]

==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]]

[[Category:Articles with example JavaScript code]]

JavaScript XML - Revision history

~2025-32447-81: /* Markup */