BBC Russian

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.

YouTube Encyclopedic

1/3
Views:
845
19 659
4 072

Transcription

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.

References

^ "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. The Road to React. Leanpub. ISBN 978-1720043997.
^ 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

Draft: JSX Specification

This page was last edited on 22 April 2024, at 23:58

JSX (JavaScript)

From Wikipedia, the free encyclopedia