Edición de «JSX (JavaScript)»

'''JSX (JavaScript XML)''', formalmente '''JavaScript Syntax eXtension''', es una extensión de [[JavaScript]] que permite la creación de árboles [[Document Object Model|DOM]] usando una sintaxis similar a [[XML]].<ref name=":0">{{Cita web|título=Draft: JSX Specification|url=https://facebook.github.io/jsx/|obra=JSX|editorial=Facebook|fechaacceso=2018-04-07}}</ref> Inicialmente creado por [[Facebook]] para ser usado con [[React]], JSX ha sido utilizado por muchos otros frameworks web.<ref name=Larsen>{{cita libro |apellido=Larsen|nombre=John|título=React Hooks in Action With Suspense and Concurrent Mode| año= 2021|editorial= Manning |isbn= 978-1720043997}}</ref>{{rp|5}}<ref name=Wieruch>{{cita libro |apellido=Wieruch|nombre=Robin|título=The Road to React |fecha=2018-09-14|url=https://archive.org/details/roadtoreactyourj0000robi|editorial= Leanpub|isbn= 978-1720043997}}</ref>{{rp|11}}  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:

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

===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ó
<code><nowiki><div></nowiki></code> para ello, o un fragmento de React, sea <code><nowiki><Fragment></nowiki></code>, or en su forma abreviada <code><nowiki><></nowiki></code>, o como un array.<ref>{{cita web |url=https://reactjs.org/blog/2017/09/26/react-v16.0.html#new-render-return-types-fragments-and-strings |título=React v16.0§New render return types: fragments and strings |apellido=Clark |nombre=Andrew |fecha=26 de septiembre de 2017 |obra=React Blog}}</ref><ref>{{cita web |url=https://reactjs.org/docs/react-component.html#render |título=React.Component: render |obra=React}}</ref><ref name=Wieruch>{{cita libro |apellido=Wieruch|nombre=Robin|título=The Road to React |fecha=2018-09-14|url=https://archive.org/details/roadtoreactyourj0000robi|editorial= Leanpub|isbn= 978-1720043997}}</ref>{{rp|68-69}}

===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.<ref>{{cita web |url=https://reactjs.org/blog/2017/09/26/react-v16.0.html#support-for-custom-dom-attributes |título=React v16.0§Support for custom DOM attributes |apellido=Clark |nombre=Andrew |fecha=26 de septiembre de 2017 |obra=React Blog}}</ref> 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:<ref name=Wieruch>{{cita libro |apellido=Wieruch|nombre=Robin|título=The Road to React |fecha=2018-09-14|url=https://archive.org/details/roadtoreactyourj0000robi|editorial= Leanpub|isbn= 978-1720043997}}</ref>{{rp|14-16}}
<syntaxhighlight lang="html">
  <h1>{10+1}</h1>
</syntaxhighlight>

El ejemplo anterior se renderizará como:
<syntaxhighlight lang="html">
  <h1>11</h1>
</syntaxhighlight>

===Expresiones condicionales===
La sentencias Sí-Entonces no pueden ser usadas dentro de JSX, pero sí expresiones condicionales. El ejemplo siguiente renderizará <syntaxhighlight lang="jsx" inline>{ i === 1 ? 'true' : 'false' }</syntaxhighlight> como la cadena <code>'true'</code>, porque <var>i</var> es igual a 1.
<syntaxhighlight lang="jsx">
const App = () => {
   const i = 1;

   return (
     <div>
       <h1>{ i === 1 ? 'true' : 'false' }</h1>
     </div>
   );
}
</syntaxhighlight>
Lo anterior será renderizado así:
<syntaxhighlight lang="html">
<div>
  <h1>true</h1>
</div>
</syntaxhighlight>

Las funciones y JSX pueden ser usados en condicionales:<ref name=Wieruch>{{cita libro |apellido=Wieruch|nombre=Robin|título=The Road to React |fecha=2018-09-14|url=https://archive.org/details/roadtoreactyourj0000robi|editorial= Leanpub|isbn= 978-1720043997}}</ref>{{rp|88-90}}
<syntaxhighlight lang="jsx">
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>
   );
}
</syntaxhighlight>

Lo anterior se renderizará como:
<syntaxhighlight lang="html">
<div>
  <div>Sección 1<span>(primero)</span></div>
  <div>Sección 2</div>
  <div>Sección 3</div>
</div>
</syntaxhighlight>

El código escrito en JSX requiere herramientas de conversión como [[Babel (compilador)|Babel]] antes de que pueda ser entendido por los navegadores web.<ref>{{Cita libro|url=https://books.google.com/books?id=Tg9QDwAAQBAJ|título=React for Real: Front-End Code, Untangled|apellido=Fischer|nombre=Ludovico|fecha=6 de septiembre de 2017|editorial=Pragmatic Bookshelf|isbn=9781680504484|idioma=en}}</ref><ref name=Larsen2021>{{cita libro |apellido=Larsen|nombre=John|título=React Hooks in Action With Suspense and Concurrent Mode| año= 2021|editorial= Manning |isbn= 978-1720043997}}</ref>{{rp|5}} Esta conversión generalmente se realiza durante la fase de compilación, antes de que sea desplegado.

== Referencias ==
{{listaref}}

{{Control de autoridades}}
[[Categoría:JavaScript]]