JSX (JavaScript XML) es una extensión de la sintaxis de JavaScript que se utiliza en ReactJS para describir cómo debería ser la interfaz de usuario (UI). Se parece mucho a HTML y permite escribir elementos HTML en JavaScript y colocarlos en el DOM sin ninguna función createElement() y/o appendChild().
JSX convierte el código HTML en elementos de React, es decir, permite construir bloques de código visuales a partir de componentes y luego renderizarlos. Esto hace que el código sea más legible y fácil de entender.
Por ejemplo, se puede escribir un elemento h1 de HTML dentro de JSX de la siguiente manera:
```jsx
const element =
Los elementos JSX se pueden usar en declaraciones if, bucles for, asignaciones, argumentos de funciones, etc., igual que los elementos JavaScript.
Además de HTML, también puede contener código JavaScript. Para que esto suceda, el código JavaScript debe estar entre llaves {}. Por ejemplo:
```jsx
const name = ‘Josh Perez’;
const element =
Los elementos JSX también pueden ser objetos JavaScript, lo que significa que puedes usarlos en JavaScript como lo harías con cualquier otro objeto.
Es importante mencionar que JSX es opcional, aunque la mayoría de las personas lo encuentra útil cuando se trabaja en aplicaciones de React debido a su legibilidad y sencillez. Sin embargo, no necesitas usar JSX para usar React.
