JavaScript XML
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 syntactic sugar, JSX is generally transpiled into nested JavaScript function calls structurally similar to the original JSX.
When used with TypeScript, the file extension is .tsx.[4]
Markup
[edit]Below is an example of JSX (TSX) code:
import React from 'react'; const App: React.FC = () => { return ( <div> <p>Header</p> <p>Content</p> <p>Footer</p> </div> ); } export default App; Nested elements
[edit]Multiple elements on the same level need to be wrapped in a single element such as the <div> element shown above, a fragment delineated by <Fragment> or in its shorthand form <>, or returned as an array.[5][6][3]: 68–69
Attributes
[edit]JSX provides a range of element attributes designed to mirror those provided by HTML. Custom attributes can also be passed to the component.[7] All attributes will be received by the component as props.
JavaScript expressions
[edit]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> Conditional expressions
[edit]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.
import React from 'react'; const App: React.FC = () => { const i: number = 1; return ( <div> <h1>{ i === 1 ? 'true' : 'false' }</h1> </div> ); } export default App; The above will render:
<div> <h1>true</h1> </div> Functions and JSX can be used in conditionals:[3]: 88–90
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; 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.[8][9]: 5 This processing is generally performed during a software build process before the application is deployed.
See also
[edit]References
[edit]- ^ "Draft: JSX Specification". JSX. Facebook. Retrieved 7 April 2018.
- ^ Larsen, John (2021). React Hooks in Action With Suspense and Concurrent Mode. Manning. ISBN 978-1720043997.
- ^ a b c d Wieruch, Robin (14 September 2018). The Road to React. Leanpub. ISBN 978-1720043997.
- ^ "Documentation - JSX". www.typescriptlang.org. Retrieved 2025-07-13.
- ^ Clark, Andrew (September 26, 2017). "React v16.0§New render return types: fragments and strings". React Blog.
- ^ "React.Component: render". React.
- ^ Clark, Andrew (September 26, 2017). "React v16.0§Support for custom DOM attributes". React Blog.
- ^ Fischer, Ludovico (2017-09-06). React for Real: Front-End Code, Untangled. Pragmatic Bookshelf. ISBN 9781680504484.
- ^ Larsen, John (2021). React Hooks in Action With Suspense and Concurrent Mode. Manning. ISBN 978-1720043997.
External links
[edit]- Official website, Draft: JSX specification