# 3) Reemplazando createElement por JSX
## Introducción
JSX es el standard para escribir aplicaciones con react. Analicemos esta declaración de variable:
{% code title="" %}
```javascript
const element = Hello world!
;
```
{% endcode %}
El contenido de la variable no es ni HTML ni es un String. Parece HTML pero realmente es una mezcla de JavaScript y HTML.
Se llama JSX y es una extensión de JavaScript. Los creadores de react recomiendan usarlo para describir como debería ser la UI de un componente. Es parecido a un lenguaje de template, con la ventaja de que puedes agregarle todo el JavaScript que quieras, sin limitaciones.
Todo lo que escribimos en JSX se transforma en un "element" cómo vimos en el capítulo anterior. Esta transformación la hará con [Babel](https://babeljs.io/).
## ¿Por qué JSX?
No se requiere realmente usar JSX mientras se trabaja con aplicaciones react. Puedes desarrollar tus aplicaciones con createElement cómo vimos en el capitulo anterior. Pero usar JSX tiene ventajas.
Quizás se hizo popular por su sintaxis familiar, es casi como escribir HTML. La lógica de nuestra UI sea muy descriptiva y fácil de entender.
Analicemos este componente:
{% code title="with-jsx.js" %}
```javascript
{title + description}
```
{% endcode %}
{% code title="without-jsx.js" %}
```javascript
React.createElement(
'div',
null,
React.createElement('img', { src: url, className: 'item-image' }),
React.createElement(
'span',
{ className: 'item-description' },
title + description
)
);
```
{% endcode %}
**Sin JSX** no queda del todo claro que es lo que está sucediendo. **Con JSX** visualizamos rápidamente como será la UI y además entendemos rápido desde donde se cargará la data. Es fácil entender lo que pasará con ese componente.
Cómo mencionamos, es una mezcla de JavaScript y HTML y por eso podemos incrustar variables o incluso código directamente en el template.
### Reemplazando createElement por JSX
A continuación reemplazaremos el código que hicimos en el capitulo anterior por JSX.
```javascript
```
Cómo verás el código es mucho más lindo.
Además de incluir los scripts de React y React-Dom ahora agregamos [Babel](https://babeljs.io/). Babel transformará el código JSX en el código equivalente en react.
En nuestro ejemplo Babel transforma el código JSX a lo siguiente:
```javascript
React.createElement(
'div',
null,
'Hello word'
);
```
Para ver como Babel transforma el JSX [puedes utilizar esta consola.](https://babeljs.io/repl/#?babili=false\&browsers=\&build=\&builtIns=false\&code_lz=DwEwlgbgfAtgpgOwM4EMBWdgHpzSA\&debug=false\&forceAllTransforms=false\&shippedProposals=false\&circleciRepo=\&evaluate=false\&fileSize=false\&lineWrap=true\&presets=es2015%2Creact%2Cstage-2\&prettier=false\&targets=\&version=6.26.0\&envVersion=)
#### Contenido dinámico
Gracias a JSX y a su posibilidad de incrustar código JavaScript dentro de los template, podemos generar contenidos dinámicos en base a datos, condiciones, etc. A continuación se muestran algunos ejemplos, más adelante en el workshop profundizaremos.
* Haciendo que el contenido del componente sea dinámico
```javascript
const content = "Hello word";
const element = {content}
;
```
* Clases dinámicas
```javascript
const content = "Hello word";
const style = "container";
const element = {content}
;
```
* Pasándole propiedades
```javascript
const content = "Hello word";
const style = "container";
const props = {
className: style,
children: content,
};
const element = ;
```
Calma, más adelante veremos que es eso de las props y cómo darle estilos a nuestros componentes.
Lo importante es que hayas entendido que es JSX y cómo funciona, para saber más ingresa aquí:
{% embed url="" %}
---
# Agent Instructions: Querying This Documentation
If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.
Perform an HTTP GET request on the current page URL with the `ask` query parameter:
```
GET https://workshops-js-montevideo.gitbook.io/react/reemplazando-createelement-por-jsx.md?ask=
```
The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.
Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.