JSX (JavaScript)

Un ejemplo de código JSX:

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

Elementos anidados#edit

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]​

Atributos#edit

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#edit

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

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

El ejemplo anterior se renderizará como:

  <h1>11</h1>

Expresiones condicionales#edit

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]​

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

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. Wieruch, Robin (14 de septiembre de 2018). 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.

• Datos: Q105157779

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 (14 de septiembre de 2018). 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.