JSX (JavaScript)

JSX (sometimes referred to as JavaScript XML) is an XML-like extension to the JavaScript language syntax.{{cite web|title=Draft: JSX Specification|url=https://facebook.github.io/jsx/|website=JSX|publisher=Facebook|access-date=7 April 2018}} Initially created by Facebook for use with React, JSX has been adopted by multiple web frameworks.{{cite book |last=Larsen|first=John|title=React Hooks in Action With Suspense and Concurrent Mode| year= 2021|publisher= Manning |isbn= 978-1720043997}}{{rp|5}}{{cite book |last=Wieruch|first=Robin|title=The Road to React |date=14 September 2018 |publisher= Leanpub|isbn= 978-1720043997}}{{rp|11}} Being a syntactic sugar, JSX is generally transpiled into nested JavaScript function calls structurally similar to the original JSX.

Markup

An example of JSX code:

const App = () => {

return (

Header

Content

Footer

);

}

=Nested elements=

Multiple elements on the same level need to be wrapped in a single React element such as the

element shown above, a fragment delineated by or in its shorthand form <>, or returned as an array.{{cite web |url=https://reactjs.org/blog/2017/09/26/react-v16.0.html#new-render-return-types-fragments-and-strings |title=React v16.0§New render return types: fragments and strings |last=Clark |first=Andrew |date=September 26, 2017 |website=React Blog}}{{cite web |url=https://reactjs.org/docs/react-component.html#render |title=React.Component: render |website=React}}{{cite book |last=Wieruch|first=Robin|title=The Road to React |date=14 September 2018 |publisher= Leanpub|isbn= 978-1720043997}}{{rp|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.{{cite web |url=https://reactjs.org/blog/2017/09/26/react-v16.0.html#support-for-custom-dom-attributes |title=React v16.0§Support for custom DOM attributes |last=Clark |first=Andrew |date=September 26, 2017 |website=React Blog}} 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 {}:{{cite book |last=Wieruch|first=Robin|title=The Road to React |date=14 September 2018 |publisher= Leanpub|isbn= 978-1720043997}}{{rp|14-16}}

{10+1}

The example above will render:

11

=Conditional expressions=

If–else statements cannot be used inside JSX but conditional expressions can be used instead.

The example below will render {{code|2=js|1={ i === 1 ? 'true' : 'false' } }} as the string 'true' because i is equal to 1.

const App = () => {

const i = 1;

return (

{ i === 1 ? 'true' : 'false' }

);

}

The above will render:

true

Functions and JSX can be used in conditionals:{{cite book |last=Wieruch|first=Robin|title=The Road to React |date=14 September 2018 |publisher= Leanpub|isbn= 978-1720043997}}{{rp|88-90}}

const App = () => {

const sections = [1, 2, 3];

return (

{sections.map((n,i) => (

/* 'key' is used by React to keep track of list items and their changes */

/* Each 'key' must be unique */

Section {n} {i === 0 && (first)}

))}

);

}

The above will render:

Section 1(first)

Section 2

Section 3

Code written in JSX requires conversion with a tool such as Babel before it can be understood by web browsers.{{Cite book|url=https://books.google.com/books?id=Tg9QDwAAQBAJ|title=React for Real: Front-End Code, Untangled|last=Fischer|first=Ludovico|date=2017-09-06|publisher=Pragmatic Bookshelf|isbn=9781680504484|language=en}}{{cite book |last=Larsen|first=John|title=React Hooks in Action With Suspense and Concurrent Mode| year= 2021|publisher= Manning |isbn= 978-1720043997}}{{rp|5}} This processing is generally performed during a software build process before the application is deployed.