Ir al contenido

JSX (JavaScript)

De Wikipedia, la enciclopedia libre

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.[1]​ Inicialmente creado por Facebook para ser usado con React, JSX ha sido utilizado por muchos otros frameworks web.[2]: 5 [3]: 11  Generalmente, JSX es transpilado a llamadas a funciones de JavaScript anidadas con una estructura similar a la del JSX original.

Marcado

[editar]

Un ejemplo de código JSX:

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

Elementos anidados

[editar]

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.[4][5][3]: 68–69 

Atributos

[editar]

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.[6]​ Todos los atributos serán recibidos por el componente como propiedades.

Expresiones JavaScript

[editar]

Las expresiones de JavaScript (pero no las sentencias) pueden ser usadas dentro de JSX colocándolas dentro de llaves:[3]: 14–16 

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

El ejemplo anterior se renderizará como:

  <h1>11</h1>

Expresiones condicionales

[editar]

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:[3]: 88–90 

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.[7][8]: 5  Esta conversión generalmente se realiza durante la fase de compilación, antes de que sea desplegado.

Referencias

[editar]
  1. «Draft: JSX Specification». JSX. Facebook. Consultado el 7 de abril de 2018. 
  2. Larsen, John (2021). React Hooks in Action With Suspense and Concurrent Mode. Manning. ISBN 978-1720043997. 
  3. a b c d Wieruch, Robin. The Road to React. Leanpub. ISBN 978-1720043997. 
  4. Clark, Andrew (26 de septiembre de 2017). «React v16.0§New render return types: fragments and strings». React Blog. 
  5. «React.Component: render». React. 
  6. Clark, Andrew (26 de septiembre de 2017). «React v16.0§Support for custom DOM attributes». React Blog. 
  7. Fischer, Ludovico (6 de septiembre de 2017). React for Real: Front-End Code, Untangled (en inglés). Pragmatic Bookshelf. ISBN 9781680504484. 
  8. Larsen, John (2021). React Hooks in Action With Suspense and Concurrent Mode. Manning. ISBN 978-1720043997.