JSX (JavaScript)

JSX (sometimes referred to as JavaScript XML) is an XML-like extension to the JavaScript language syntax.^[1] Initially created by Facebook for use with React, JSX has been adopted by multiple web frameworks.^{[2] : 5 [3] : 11} Being a syntactic sugar, JSX is generally transpiled into nested JavaScript function calls structurally similar to the original JSX.

An example of JSX code:

constApp=()=>{
return(
<div>
<p>Header</p>
<p>Content</p>
<p>Footer</p>
</div>
);
}

Multiple elements on the same level need to be wrapped in a single React element such as the <div> element shown above, a fragment delineated by <Fragment> or in its shorthand form <>, or returned as an array.^{[4] [5] [3] : 68–69}

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

JavaScript expressions (but not statements) can be used inside JSX with curly brackets {}:^{[3] : 14–16}

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

The example above will render:

 <h1>11</h1>

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.

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

The above will render:

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

Functions and JSX can be used in conditionals:^{[3] : 88–90}

constApp=()=>{
constsections=[1,2,3];
return(
<div>
{sections.map((n,i)=>(
/* 'key' is used by React to keep track of list items and their changes */
/* Each 'key' must be unique */
<divkey={"section-"+n}>
Section{n}{i===0&&<span>(first)</span>}
</div>
))}
</div>
);
}

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

• ECMAScript for XML

• Draft: JSX Specification

• 2014 software
• Facebook software
• JavaScript
• Open formats
• XML markup languages

• Articles with short description
• Short description is different from Wikidata