Introducción a JSX

Si queremos aprender a crear aplicaciones con React lo mejor (recomendado) es ayudarnos de JSX para crear las vistas, con la cual vamos a romper buenas practicas de programación que se han mantenido hasta el día de hoy, por ejemplo tomando en cuenta el modelo de arquitectura MVC, todos sabemos que no debemos mezclar Javascript con HTML, pero para trabajar con JSX es lo mejor.

Para trabajar con JSX debemos tener configurado un transpilador que nos ayude a transformar código JSX a código Javascript, puedes obtenerlo desde nuestro repositorio de github o crearlo paso a paso con ayuda del articulo crear entorno de desarrollo para React.

Además, necesitaremos algunos de los nuevos elementos y funciones de ES6 como el uso de let y const, función arrow, clases, herencia y objetos. Si no tienes muchos conocimientos sobre esta tecnologías te recomiendo leer los artículos sobre el tema.

Que es JSX?

Los desarrolladores de JSX lo consideran como una extensión de sintaxis Javascript para desarrollar interfaces de usuario (UI), si lo vemos desde otra perspectiva lo podemos ver como un lenguaje para plantillas como por ejemplo Jade, pero a diferencia de este ultimo, JSX viene con todo el poder de Javascript.

JSX combina la vista con la lógica de la misma, para contrarrestar lo que para algunos es una mala practica, React utiliza componentes para encapsular esta parte del código.

Un ejemplo de uso de JSX es el siguiente.-

1
const elem = <h1>Hello, world!</h1>;

De entrada empezamos combinando Javascript con HTML, pero note que el HTML no esta entrecomillado, una característica de JSX, con este código creamos un elemento, el cual queremos renderizar en pantalla.

Conceptos básicos

Pongamos atención al siguiente código.-

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
import React from 'react';
import ReactDOM from 'react-dom';

const rootElement = document.getElementById('root');
let name = 'Codeando';

const element = (
    <div className="main">
        <h1>Hola!</h1>
        <h2>Bienvenidos a {name}</h2>
        <img src="logo.png" />
    </div>
);

ReactDOM.render(
    element,
    rootElement
);

Englobe en un solo código todas (por lo menos la mayoría) las características que trae consigo el uso de JSX, empecemos, la linea 1 y 2 solo nos sirven para importar las dependencias de React y ReactDom a nuestro archivo (todo bien hasta aquí), en la linea 7-13 creamos una constante utilizando JSX y aquí es donde sucede la magia.

JSX es considerada una expresión

Lo primero a notar es que JSX es considerado una expresión por lo tanto no necesita estar entrecomillado como normalmente lo hacemos con el HTML dentro de Javascript.

En la linea 8 utilizamos un elemento div al cual le asignamos un atributo (una clase), pero note que el atributo no se llama class sino className, esto se hace así por una simple razón, En Javascript (ES6) class es una palabra reservada del lenguaje y no podemos utilizarla para otros fines es por eso que se opto por llamar a las clases (CSS) como className.

1
<div className="main">...</div>

Elementos HTML con hijos (childrens)

En la linea 8 y 9 vemos como el div contiene 3 elementos hijos, tal y como lo hacemos al utilizar HTML, si no utilizáramos JSX el código tendrá que se de la siguiente forma.-

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
// Utilizando JSX
<div className="main">
        <h1>Hola!</h1>
</div>
				
// Sin utilizar JSX
react.createElement(
    'div',
    { className: 'main' },
    react.createElement(
        'h1',
        null,
        'Hola!'
    );
);

Note que tal ves no es muy difícil trabajar con React sin JSX, tan solo son elementos anidados dentro de otros, pero imagine crear una aplicación de gran magnitud, esta tarea seria muy laboriosa y por tanto nos llevara más tiempo cumplirla, por eso es mejor trabajar con JSX.

Expresiones Javascript dentro de JSX

El siguiente punto a notar es como utilizar variables (pueden ser funciones o expresiones Javascript) dentro de JSX, lo hacemos encerrando la expresión Javascript entre llaves.-

1
<h2>Bienvenidos a {name}</h2>

XML también es extensión de JSX

Había hablado de que JSX es una combinación de HTML con Javascript, pero también es posible utilizar características de XML, por ejemplo si tenemos una etiqueta vaciá como img podemos cerrarla inmediatamente como si estuviéramos utilizando XML.-

1
<img src="logo.png" />

Programar sin JSX, una tarea tediosa

Les dejo el código que tendríamos que utilizar para obtener el mismo resultado pero sin utilizar JSX.-

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
'use strict';

let react = require('react');
let reactDom = require('react-dom');

const rootElement = document.getElementById('root');
let name = 'Codeando';

const element = react.createElement(
    'div',
    {
        className: 'main'
    },
    react.createElement(
        'h1',
        null,
        'Hola!'
    ),
    react.createElement(
        'h2',
        null,
        'Bienvenidos a ',
        name
    ),
    react.createElement(
        'img',
        {
            src: 'logo.png'
        })
);

reactDom.render(element, rootElement);

Conclusiones

La conclusión absoluta es que JSX nos simplifica la vida al trabajar con React, no importa que valla contra las buenas practicas que seguramente te inculcaron al aprender a programar, siempre he dicho que si crean un framework o en este caso librería es para facilitarnos el trabajo y no para hacerlo más difícil, puedes acceder al repositorio de github para ver los ejemplos (el ejemplo lo encontraras en la rama 01 introduccion a JSX).-

• Github Codeando

Si te interesa el tema puedes continuar con los siguientes enlaces.-

• Articulo anterior: Introducción a React
• Articulo siguiente: Componentes, props y estados
• Curso: Curso de React

Que tengan feliz código!