JSX (JavaScript)

JSX (JavaScript XML), formalmente JavaScript Syntax eXtension, es una extensión de JavaScript que permite la creación de árboles DOM usando una sintaxis similar a XML.​ Inicialmente creado por Facebook para ser usado con React, JSX ha sido utilizado por muchos otros frameworks web.​​ Generalmente, JSX es transpilado a llamadas a funciones de JavaScript anidadas con una estructura similar a la del JSX original.

Marcado

Un ejemplo de código JSX:

const App = () => {
   return (
     <div>
       <p>Encabezado</p>
       <p>Contenido</p>
       <p>Pie</p>
     </div>
   ); 
}

Elementos anidados

Si se tienen muchos elementos en un mismo nivel, se deben envolver en un solo elemento React, como en el ejemplo anterior, donde se usó <div> para ello, o un fragmento de React, sea <Fragment>, or en su forma abreviada <>, o como un array.​​​

Atributos

JSX provee una variedad de atributos de elemento diseñados para representar los que ya trae HTML, y además, se pueden usar atributos propios en el componente.​ Todos los atributos serán recibidos por el componente como propiedades.

Expresiones JavaScript

Las expresiones de JavaScript (pero no las sentencias) pueden ser usadas dentro de JSX colocándolas dentro de llaves:​

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

El ejemplo anterior se renderizará como:

  <h1>11</h1>

Expresiones condicionales

La sentencias Sí-Entonces no pueden ser usadas dentro de JSX, pero sí expresiones condicionales. El ejemplo siguiente renderizará { i === 1 ? 'true' : 'false' } como la cadena 'true', porque i es igual a 1.

const App = () => {
   const i = 1;

   return (
     <div>
       <h1>{ i === 1 ? 'true' : 'false' }</h1>
     </div>
   );
}

Lo anterior será renderizado así:

<div>
  <h1>true</h1>
</div>

Las funciones y JSX pueden ser usados en condicionales:​

const App = () => {
   const sections = [1, 2, 3];

   return (
     <div>
       {sections.map((n,i) => (
           /* 'key' es usada por React para mantener una lista de elementos y sus cambios */
           /* Cada 'key' debe ser única */
           <div key={"section-" + n}>
               Sección {n} {i === 0 && <span>(primera)</span>}
           </div>
       ))}
     </div>
   );
}

Lo anterior se renderizará como:

<div>
  <div>Sección 1<span>(primero)</span></div>
  <div>Sección 2</div>
  <div>Sección 3</div>
</div>

El código escrito en JSX requiere herramientas de conversión como Babel antes de que pueda ser entendido por los navegadores web.​​ Esta conversión generalmente se realiza durante la fase de compilación, antes de que sea desplegado.