JSX (JavaScript)

Short description: JavaScript syntax extension

JSX (JavaScript XML, formally JavaScript Syntax eXtension) is a JavaScript extension that allows creation of Document Object Model (DOM) trees using an XML-like 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.

## Contents

* 1 Markup
* 1.1 Nested elements
* 1.2 Attributes
* 1.3 JavaScript expressions
* 1.4 Conditional expressions
* 2 See also
* 3 References
* 4 External links

## Markup

An example of JSX code:

const App = () => {
return (
<div>
<p>Header</p>
<p>Content</p>
<p>Footer</p>
</div>

### Nested elements

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

### Attributes

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

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

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.

## See also

* ECMAScript for XML

## References

1. ↑ "Draft: JSX Specification". Facebook. https://facebook.github.io/jsx/.
2. ↑ Larsen, John (2021). React Hooks in Action With Suspense and Concurrent Mode. Manning. ISBN 978-1720043997.
3. ↑ 3.0 3.1 3.2 3.3 Wieruch, Robin. The Road to React. Leanpub. ISBN 978-1720043997.
4. ↑ Clark, Andrew (September 26, 2017). "React v16.0§New render return types: fragments and strings". https://reactjs.org/blog/2017/09/26/react-v16.0.html#new-render-return-types-fragments-and-strings.
5. ↑ "React.Component: render". https://reactjs.org/docs/react-component.html#render.
6. ↑ Clark, Andrew (September 26, 2017). "React v16.0§Support for custom DOM attributes". https://reactjs.org/blog/2017/09/26/react-v16.0.html#support-for-custom-dom-attributes.
7. ↑ Fischer, Ludovico (2017-09-06) (in en). React for Real: Front-End Code, Untangled. Pragmatic Bookshelf. ISBN 9781680504484. https://books.google.com/books?id=Tg9QDwAAQBAJ.
8. ↑ Larsen, John (2021). React Hooks in Action With Suspense and Concurrent Mode. Manning. ISBN 978-1720043997.

## External links

0.00

(0 votes)

|

Retrieved from "https://handwiki.org/wiki/index.php?title=JSX_(JavaScript)&oldid=3907769"