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.
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.