JSX, el lenguaje de React (con EJEMPLOS)
Tags: jsx, react, javascript, framework
Published: 2020-11-02 14:00:23

## ⚛ React o ReactJS

React o ReactJS, es una de las tecnologías de JavaScript mas populares del momento. Desarrollada y mantenida principalmente por Facebook desde el año 2013, React se define como una librería open-source enfocada en construir interfaces de usuario para el front end.

## 🔳 Componentes

Uno de los conceptos principales de React son los *componentes*, estos son funciones (o clases) que almacenan una cierta lógica y una interfaz de usuario que puede ser renderizada al DOM.

> *Los componentes permiten separar la interfaz de usuario en piezas independientes, reutilizables y pensar en cada pieza de forma aislada.* - react.org  

## JavaScript XML (JSX)

Para describir la interfaz de usuario a ser representada en un componente se utiliza la sintaxis JSX (JavaScript XML). Esta es una extensión a JS que nos permite escribir HTML dentro de nuestro código sin necesidad de representarlo como un *string* (encerrándolo entre comillas).

⌨ Ejemplo:
```jsx
function App() {
  return <h1>Hola Mundo</h1>;
}
```
Esta extensión en realidad es [azúcar sintáctica](https://es.wikipedia.org/wiki/Az%C3%BAcar_sint%C3%A1ctico) para llamar a la función `React.createElement(type, [props], [...children])`, de modo que el ejemplo anterior transformado a ECMAScript estándar por un preprocesador (como [Babel.js](https://babeljs.io/)) se transforma en:

⌨
```js
function App(){
  return React.createElement("h1", null, "Hola Mundo");
}
```
El parámetro `type` puede ser tanto un string con el nombre de una etiqueta HTML o un componente de React (ya sea de clase o función). El parámetro `props` es un objeto que contiene los atributos del parámetro `type` y finalmente `children` son todos los componentes o tags HTML que están dentro del elemento que estamos creando.
> Recuerda que para utilizar la función `React.createElement` la libreria *React* debe estar en el scope. <br/> Esto mediante: ```js
import React from 'react'
```

Entonces... ¿Como se transforma un componente con una UI mas compleja?

## JSX con etiquetas HTML anidadas

⌨**JSX**
```jsx
function App() {
  return (
    <div>
      <h1>Bienvenido a Dev.to</h1>
      <button>Unirse a la comunidad</button>
    </div>
  );
}
```
⌨**ECMAScript**
```javascript
function App() {
  return React.createElement(
    "div",
    null,
    React.createElement("h1", null, "Bienvenido a Dev.to"),
    React.createElement("button", null, "Unirse a la comunidad")
  );
}
```
Mira como las etiquetas `<h1>` y `<button>` también son transformadas a una llamada a la función `React.createElement(...)` y son pasados como parámetros distintos en la llamada a la función que crea el `<div>` que los contiene.

## JSX con componentes de React

Hasta ahora solo hemos utilizado etiquetas HTML, pero también podemos utilizar componentes de React para describir nuestra interfaz de usuario.
⌨**JSX** 
```jsx
function Saludo() {
	return (
    	<h1>Bienvenido a DEV Community</h1>
    );
}

function App() {
  return (
	<Saludo />
  );
}
```
⌨**ECMAScript**
```js
function App() {
  return React.createElement(Saludo, null);
}
```
Es importante tener en cuenta que los componentes de React deben empezar con una mayúscula. De esta forma es como se diferencian los elementos nativos de HTML de los componentes.

Veamos que sucede si declaramos un componente que no comienza con una letra mayúscula.

⌨**JSX**
```jsx
function saludo() {
	return (
    	<h1>Bienvenido a DEV Community</h1>
    );
}

function App() {
  return (
	<saludo />
  );
}
```
⌨**ECMAScript**
```js
function App() {
  return React.createElement("saludo", null);
}
```
Mira como el componente saludo se pasa a la función `React.createElement` como si fuese un `string` y no como si fuese una función, como en el caso anterior.
Cuando se le pasa un objeto de tipo string, React lo interpretará como si fuese una etiqueta nativa de HTML y no lo renderizará de la manera esperada.

## Expresiones JS dentro de JSX

Puedes incrustar expresiones dentro de JSX encerrándolas en paréntesis de llaves.

⌨**JSX**
```jsx
const nombre = 'Sebastian Pardo';
const despedida = <h1>Hasta la proxima, {nombre}!</h1>;
```
⌨**ECMAScript**
```jsx
const despedida = React.createElement("h1", null, "Hasta la proxima, ", nombre, "!");
```
Y esto al renderizarlo en HTML sera: ⌨
```html
<h1>Hasta la proxima, Sebastian Pardo!</h1>
```

Por supuesto puedes hacer uso de otras expresiones como llamadas a la función `Array.map()` para iterar sobre un arreglo, expresiones matemáticas o concatenación de strings. 

### Renderizado condicional

Otra expresión bastante útil que puedes utilizar es la que te permite renderizar una sección de tu UI dependiendo de una condición.

Este funcionalidad consiste en lo siguiente:
1. Declarar la condición.
2. Utilizar el operador lógico `&&`.
3. Declarar la parte de tu UI que esta sujeta a la condición previa. (puedes utilizar JSX)

A continuación un ejemplo: ⌨
```jsx
let esViernes = true;
const inicio = <div>
    <h1> Bienvenido </h1> 
    { esViernes && <h2> "Feliz Viernes" </h2>}
</div>;

// OUTPUT
<div>
  <h1> Bienvenido </h1>
  <h2>Feliz Viernes</h2>
</div>
```
Esta funcionalidad se debe a que en JavaScript una expresión del tipo `true && expresion` siempre devuelve `expresion`, mientras que en el caso de `false && expresion` siempre devuelve `false`.

Un problema con este tipo de expresiones es que no nos permiten implementar una lógica de tipo *if/else*.
En el caso de que necesitemos implementar este tipo de lógicas podemos utilizar el operador ternario.
⌨ Ejemplo:
```jsx
let esViernes = false;
const inicio = <h1>{esViernes ? "ES VIERNES!!" : "Otro dia mas..."}</h1>

// OUTPUT
<h1>Otro dia mas...</h1>
```
## Valores Ignorados
Las etiquetas que contengan valores booleanos `true/false`, `null` y `undefined` serán renderizadas sin ningún contenido dentro.

⌨ Ejemplo:
```jsx
<p>{true}</p>
<p>{false}</p>
<p>{true && true}</p>
<p>{null}</p>
<p>{undefined}</p>
<p></p>
```
Todos los ejemplos anteriores compilan a:
⌨ 
```jsx
<p></p>
```

## Conclusión 📚

Si bien es posible escribir aplicaciones en React sin utilizar JSX, la verdad es que no es una opción viable en ningún caso (exagero).
Las mejoras que nos ofrece el utilizarlo no solo se quedan en la simplicidad y claridad del código, también nos permite ser mas productivos y rápidos escribiendo código React.
Aun cuando es una extensión de JS bastante simple de entender, tiene particularidades (algunas las revisamos en el post, no todas) que es importante conocer para evitar incurrir en posteriores bugs en nuestros códigos.

## Referencias 🌐

[Stack Overflow Survey 2020](https://insights.stackoverflow.com/survey/2020#technology-web-frameworks)
[JS Apps at Facebook](https://www.youtube.com/watch?v=GW0rj4sNH2w)
[Introducing JSX](https://reactjs.org/docs/introducing-jsx.html)
[JSX in Depth](https://reactjs.org/docs/jsx-in-depth.html)