Un ejemplo de código JSX:
const App = () => {
return (
<div>
<p>Encabezado</p>
<p>Contenido</p>
<p>Pie</p>
</div>
);
}
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
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.
Las expresiones de JavaScript (pero no las sentencias) pueden ser usadas dentro de JSX colocándolas dentro de llaves:[3]: 14–16
El ejemplo anterior se renderizará como:
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.
