JSX (JavaScript)

JSX (JavaScript XML, formally JavaScript Syntax eXtension) 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:

const App = () => {    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.

const App = () => {    const i = 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}

const App = () => {    const sections = [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 */            <div key={"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