JSX (JavaScript)

JSX (JavaScript Syntax Extension and occasionally referred as JavaScript XML) is a React extension to the JavaScript language syntax^[1] which provides a way to structure component rendering using syntax familiar to many developers. It is similar in appearance to HTML.

React components are typically written using JSX, although they do not have to be as components may also be written in pure JavaScript. JSX is similar to another extension syntax created by Meta (formerly Facebook) for PHP called XHP.

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.^[2][3]

Attributes[]

JSX provides a range of element attributes designed to mirror those provided by HTML. Custom attributes can also be passed to the component.^[4] 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 {}:

  <h1>{10+1}</h1>

The example above will render:

  <h1>11</h1>

Conditional statements[]

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:

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.^[5] This processing is generally performed during a software build process before the application is deployed.

External links[]

• Draft: JSX Specification

References[]